Question 34661 in React native Question posted in
The official React Native documentation can be found here.

Why is MyContext.Provider not showing value in render? – React native

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?

Tags:

2

Answers


  1. 0

    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,
  },
});
    Login or Signup to reply.
  2. 0

    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>
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search