React Native Context - retrieve the value from Context.provider outside of the render function

Question

I have an app that already uses the context api, it has a number of providers. I have added a new provider called VideoContext.

All I want is to read its activeVideo value (set elsewhere in the app)

class App extends Component {

    state = {
      videoState: 0,
    };

    setVideoState(){
     //logic to alter the videoState.
    }

...
 render() {
    return (
      // Config Context
      <ConfigContext.Provider value={this.decorateConfigContextFromProps()}>
        <VideoContext.Provider value={this.state.videoState}>
          {/* Theme Context */}
          <SomeOtherProvider theme={this.decorateStyledContextFromProps()}>
            {/* Redux Store Context */}
            <Provider store={this.rootStore}>
              <View style={{ flex: 1 }}>
                <StatusBar />
                <ConnectedApp />
              </View>
            </Provider>
          </SomeOtherProvider>
        </VideoContext.Provider>
      </ConfigContext.Provider>
    );
  }
}
App.contextType = ConfigContext;

child component - miles down the tree

class DeepChild extends Component {   

  state = {
    activeVideo: '',
  };

  shouldComponentUpdate(nextProps: Props, nextState) {
    if (this.state.activeVideo !== nextState.activeVideo) {
      return true;
    }

    return //otherwise do some other logic here
  }
  ...

  render() {
    return (
      <View/>
        <VideoContext.Consumer>
          /* yuck! */
          {({activeVideo}) => {
            if(activeVideo !== this.state.activeVideo){
              this.setState({activeVideo: activeVideo}, () => {
                 console.log('this did indeed update the state');
              })
            }
          }}
        </VideoContext.Consumer>
        <FlatList...containing many items.../>
      </View>
    );
  }
}

How can I read the value provided by the VideoContext Provider inside the Child class component, without having to bury it inside the render function? I haven't seen any docs on this.

Thanks.

Answer 1

Use contextType like this

static contextType = VideoContext;

then value will be accessible like this.context.activeVideo

eg

class DeepChild extends Component {   
      static contextType = VideoContext;
          state = {
            activeVideo: '',
          };
        
          shouldComponentUpdate(nextProps: Props, nextState) {
            if (this.state.activeVideo !== nextState.activeVideo) {
              return true;
            }
        
            return //otherwise do some other logic here
          }
          ...
        
          render() {
            return (
              <View/>
                <VideoContext.Consumer>
                  /* yuck! */
                  {({activeVideo}) => {
                    if(activeVideo !== this.state.activeVideo){
                      this.setState({activeVideo: activeVideo}, () => {
                         console.log('this did indeed update the state');
                      })
                    }
                  }}
                </VideoContext.Consumer>
                <FlatList...containing many items.../>
              </View>
            );
          }
        }