I am a newbie trying to work with react native context. A very simple program, but unable to show the value. Here is the code:

import React, {Component} from 'react';
import {Text, View } from 'react-native';
export const MyContext = React.createContext();
export default class App extends Component {
    static contextType = MyContext;
    render() {
      this.state = 1
      return (
          <View>
            <Text> Hello There </Text>
            <MyContext.Provider value={this.state}>
                  {this.props.children}
            </MyContext.Provider>
          </View>
        );
      };
};

'Hello There' gets displayed. Even if I hard-code the value for MyContext.Provider , it doesn't display anything, and there are no errors either. What am I doing wrong?

CodePudding user response：

Here is an sample with a class component.

1. You have to create a context React.createContext
2. You have to apply your context with MyContext.Provider
3. You have to consume your context with MyContext.Consumer

import { Text, View } from 'react-native';
export const MyContext = React.createContext();

export default class App extends Component {
  state = { value: 12};

  render() {
    return (
      <MyContext.Provider value={this.state}>
        <View
          style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
          <Text>Hello There </Text>
          <MyContext.Consumer>
            {({ value }) => <Text>{value}</Text>}
          </MyContext.Consumer>
        </View>
      </MyContext.Provider>
    );
  }
}

CodePudding user response：

Kindly check context example. hope it helps

Please check the working example here https://snack.expo.dev/@gaurav1995/excited-donut

import React,{useContext,useState,createContext} from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';


const BasicContext = createContext({})


const BasicComp = () => {

   const dummyText = useContext(BasicContext);


   return(
     <View style={styles.container} >
     <Text>{dummyText?.hey}</Text>
     </View>
   )
}

export default function App() {

  const [reach,setReach] = useState({ hey:"whatsup devs! loving context"})


  return (
    <BasicContext.Provider value={reach} >
      <BasicComp />
     </BasicContext.Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});