How to add a screen switcher component in react native

Question

Being a newbie to the field of app development, I actually don't know the name of this UI component .

This component basically act as a switcher between two screen, which shows up Explore screen when Explore is clicked and My Community screen when My Community is clicked

Someone please help me to know what to call this component and which npm package need to be used to deploy it.

THANKS IN ADVANCE!!!

It's a `toggle-button` or simply `switch` See: https://reactnative.dev/docs/switch#example This also might help you: https://reactnativeforyou.com/how-to-add-a-switch-toggle-button-in-react-native/ — suther, Aug 25 '21 at 06:00

score 1 · Accepted Answer · edited Aug 25 '21 at 13:18

You can use the switch component and its boolean value to conditionally display different screens/components.

Basic example using setState:

const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  
return (
  <View>
    <Switch
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
      {isEnabled ? <Text>Placerholder Screen 1</Text> : <Text>Placerholder Screen 2</Text>}
    </View>
  );

But in this situation I would advise you to use Tabs instead of a Switch. React Navigation is a great library to help you with this. You may want to look at the bottom tabs, material bottom tabs or material top tabs.

How to add a screen switcher component in react native

1 Answers1