React Native: Build Login Screen

I am just starting with react native and I want to know How do I build a login and singup form shares same screen. Where both login and singup tabs shows on one screen. Just need

Solution 1:

I'm already designing this type of screen in my case, I manage state for changing form like this

importReactfrom'react';
import { View, Text, StatusBar, TouchableOpacity, ImageBackground, Image, ScrollView, UIManager, LayoutAnimation, BackHandler  } from'react-native'import styles from'../stylesheet/LoginSignup';
importSignupFormfrom'../components/SignupForm';
importSigninFormfrom'../components/SigninForm';

exportdefaultclassAuthextendsReact.Component {

    static navigationOptions = {
        header: null
    };

    constructor(props)
    {
        super(props);
        this.state = {
            IsOpenTab : 'SignIn',   //  'SignIn', 'SignUp' OR 'ResetPassword'
        };
        UIManager.setLayoutAnimationEnabledExperimental &&
        UIManager.setLayoutAnimationEnabledExperimental(true);
        // LayoutAnimation.spring();
    }

    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    }
    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
    }

    handleBackPress = () => {
        returnfalse;
    };

    render() {

        return (

            <ScrollViewstyle={styles.container}keyboardShouldPersistTaps='always'><StatusBarbackgroundColor='#2c8ba6'barStyle='light-content' /><Viewstyle={styles.TopLogoArea}><ImageBackgroundsource={require('../assets/bg_top.png')} style={styles.TopLogoAreaBackground}><Viewstyle={{paddingTop:20}}><Imagesource={require('../assets/logo.png')} resizeMode='contain'style={{width:150, height:150,}}/></View><Viewstyle={{flexDirection:'row'}}>



                                {
                                    this.state.IsOpenTab === 'SignIn' ? <Viewstyle={styles.TabArea}><Viewstyle={styles.TabActiveArea}><Textstyle={styles.TabActiveLable}>SIGN IN</Text><Viewstyle={styles.TabActiveLine}/></View></View> : <TouchableOpacityonPress={()=>this.NavigateForm('SignIn')} activeOpacity={0.8} style={styles.TabArea}><Textstyle={styles.TabDeactiveLable}>SIGN IN</Text></TouchableOpacity>
                                }



                            <Viewstyle={styles.TabArea}><Textstyle={{color:'#2dc7b0', fontWeight:'bold', fontSize:12}}>OR</Text></View>



                                {
                                    this.state.IsOpenTab === 'SignUp' ? <Viewstyle={styles.TabArea}><Viewstyle={styles.TabActiveArea}><Textstyle={styles.TabActiveLable}>SIGN UP</Text><Viewstyle={styles.TabActiveLine}/></View></View> : <TouchableOpacityonPress={()=>this.NavigateForm('SignUp')} activeOpacity={0.8} style={styles.TabArea}><Textstyle={styles.TabDeactiveLable}>SIGN UP</Text></TouchableOpacity>
                                }



                        </View></ImageBackground></View><Viewstyle={{paddingVertical:40,}}>

                    {
                        this.state.IsOpenTab === 'SignIn' ? <SigninFormnavigation={this.props.navigation} /> : <SignupFormnavigation={this.props.navigation} />
                    }

                </View></ScrollView>

        );
    }

    NavigateForm = (method) => {

        constCustomLayoutLinear = {
            duration: 300,
            create: {
                type: LayoutAnimation.Types.linear,
                property: LayoutAnimation.Properties.opacity,
            },
            update: {
                type: LayoutAnimation.Types.linear,
                property: LayoutAnimation.Properties.opacity,
            },
        };
        LayoutAnimation.configureNext(CustomLayoutLinear );

        if(method === 'SignUp'){
            this.setState({
                IsOpenTab : 'SignUp',
            });
        }else{
            this.setState({
                IsOpenTab : 'SignIn',
            });
        }

    }

}

Solution 2:

you can use something as a flag in state,for example if you touch login the flags turns into true and if you touch singin the flag turns into false,and by this way you can show 2 screens