Home > Mobile >  React Native pass useState Switch variable to other screens
React Native pass useState Switch variable to other screens

Time:11-16

Beginner here. I'm struggling to pass my useState variable to another screen in my React Native project. The screen that contains the variable, "screenCheckboxes.js" is structured like

export default function screenCheckboxes({ navigation }) {

  const [check, setCheck] = useState(false);
  const toggleCheck = () => setCheck(previousState => !previousState);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Hello from Checkbox Screen</Text>

      <Switch
        onValueChange={toggleCheck}
        value={check}
      />

    </View>
  );
}

I want to render an image on another screen file, depending on if the checkbox switch is checked on or not. I figured I will be importing the checkbox screen using import { check } from './screenCheckboxes.js';

How would I go about using my "check" useState in another screen?

CodePudding user response:

Do not use Redux or Context API for this kind of light stuff. This is a mistake make by a lot a developers.

I recommand you to use zustand: https://github.com/pmndrs/zustand.

A light store library recommanded by react-three-fiber.

CodePudding user response:

pass it as a param while navigating to that screen or you can use something like redux or context api.

  • Related