Create Card with Login/SignUp Tabs in React Native

Question

Hi I want to create a card with Login and SignUp tabs with react native, I am using react native elements but dont know how to add a tab in the card, Here's of image of what I want

Answer 1

Maybe something like this would work

const AuthentificationCard = () => {
  // 0 = login || 1 = signIn
  const [cardstate, setcardState] = useState(0);

  return (
    <Card>
      <TouchableTab onPress={() => setcardState(0)}> login </TouchableTab>
      <TouchableTab onPress={() => setcardState(1)}> Signin </TouchableTab>

      {cardstate == 0 ? ( <LoginComponent/> ) : ( <SignInComponent/> )}
    </Card>
  );
}

OR with class based component

class AuthentificationCard extends Component {

  constructor(props) {
    super(props);
    this.state = {
      cardstate: 0,
    };
  }

  render() {
    return (
     <Card>
           <TouchableOpacity onPress={() => this.setState({ cardstate: 0})}> <Text>login</Text> </TouchableOpacity> 
           <TouchableOpacity onPress={() => this.setState({ cardstate: 1})}> <Text>SignIn</Text> </TouchableOpacity> 
           {this.state.cardstate == 0 ? ( <LoginComponent/> ) : ( <SignInComponent/> )}
    </Card>
    );
  }
}