React Native Switcher

Question

Are there some ways in react-native to create a switcher with this exact design? Thank you!

Answer 1

That's easy. First, in component keep track of which state is active with useState if using hooks. A boolean works well on this because there are only two states. Then you can use conditional rendering in JSX to switch styles on buttons / touchableOpacity to make them look different. Then, on-press you simply update the state. Later you could use this to change forms below it too, or send off to different actions in redux if you are using it.

Mind you, the code below is an example. It is not tested and is sort of verbose. (see Correct way to handle conditional styling in React for one way to shorten it.) I always keep most of my stylesheet separately for the purpose of changing out themes in my app. (What I mean is <Theme.activeSignIn /> is really a button with specific styles.)

import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import { Theme } from "../../Theme";

const SignUpSelection = (props: any) => {
  const [isSignInActive, setIsSignInActive] = useState<boolean>(false);

  const onSignInPressed = () => {
    setIsSignInActive(true);
  };

  const onSignUpPressed = () => {
    setIsSignInActive(false);
  };

  const styles = StyleSheet.create({
    signInSelectionContainer: {

    }, 
    buttonContainer: {

    }
  })
  return (
    <View style={styles.signInSelectionContainer}>
      <View style={styles.buttonContainer}>
        {isSignInActive ? (
          <Theme.activeSignIn
            title="Sign In"
            onPress={onSignInPressed}
          />
        ) : (
          <Theme.inactiveSignIn
            onPress={onSignInPressed}
            title="Sign in"
          ></Theme.inactiveSignIn>
        )}
      </View>
      <View style={styles.buttonContainer}>
        {isSignInActive ? (
          <Theme.inactiveSignUp
            title="Sign up"
            onPress={onSignUpPressed}
          />
        ) : (
          <Theme.activeSignUp
            title="Sign up"
            onPress={onSignUpPressed}
          />
        )}
      </View>
    </View>
  );
};

export default SignUpSelection;