Get only undefined value from my global variable configured with Context

I have an React Native app with two pages. On the first page I have a picker from which I need the data from in the second page. I try to use Context for making sate globally available but I didn’t get it to work till now because I only get undefined types at the position where I wanna insert the global state and not the value who was selected from the picker. I dont’t get any errors but the field where the picker value should be represented is empty.

File from which I wanna get state from:

const FirstFile = () => {
  const [selectedValueRound, setSelectedValueRound] = useState("10 rounds");
  return (
    <View>
      <RoundContext.Provider
        value={[selectedValueRound, setSelectedValueRound]}
      >
        <View>
          <Picker
            selectedValue={selectedValueRound}
            onValueChange={(itemValue, itemIndex) =>
              setSelectedValueRound(itemValue)
            }
          >
            <Picker.Item label="1 round" value="0"></Picker.Item>
            <Picker.Item label="2 rounds" value="1"></Picker.Item>
          </Picker>
        </View>
      </RoundContext.Provider>
    </View>
  );
};

Context file:

export const RoundContext = createContext(false);

Navigation file where I wrap my context around

const Stack = createNativeStackNavigator();

const {selectedValueRound, setSelectedValueRound} = useContext(RoundContext);

const MyStack = () => {
  return (
    <RoundContext.Provider value={[selectedValueRound, setSelectedValueRound]}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="FirsFile" component={FirsFile} />
          <Stack.Screen name="SecondFile" component={SecondFile} />
        </Stack.Navigator>
      </NavigationContainer>
    </RoundContext.Provider>
  );
};

File where I try to insert the global value:

const SecondFile = () => {
  const [selectedValueRound, setSelectedValueRound] = useContext(RoundContext);

  return (
    <View>
      <Text>{selectedValueRound}</Text>
    </View>
  );
};
export default SomeFile;

Answer

You also need to define context provider and wrap your app into it.

export const RoundContextProvider = ({children}) => {
  const stateTuple = useState(false);
  return <RoundContext.Provider value={stateTuple}>{children}</RoundContext.Provider>;
}

<RoundContextProvider>
  <YourApp/>
</RoundContextProvider>

then you can use it as you described in the question: const [selectedValueRound, setSelectedValueRound] = useContext(RoundContext);

Advertisement

Answer