How to implement tab navigation in react native?

Question

I'm creating a new application in react native. In login screen, I'm trying to implement tab navigation.I want to navigate between Login form and register form.Actually, I don't want to navigate to a different page.I'm trying to navigate between these two forms (just like in coursera app). Is that possible? I don't know how to implement this.

following is the code in react

<Container>
    <View style={styles.container}>
        <View style={styles.content}>
            <InputGroup style={styles.input}>
                <Input
                    label="Email"
                    placeholder="[email protected]"   />
                <Image source={require('../Images/envelope.png')} style={{width:30, height:30, marginRight:5}} />
            </InputGroup>
            <InputGroup style={styles.input}>

                <Input
                    label="Password"
                    placeholder="Password"
                    secureTextEntry />
                <Image source={require('../Images/lock.png')} style={{width:30, height:30, marginRight:5}} />

            </InputGroup>
            {this.state.isLoading ? ( <Spinner size="small" color="#000000" />
            ) : (
                <Button style={styles.button} onPress={() => this.onPressLogin()} >
                    <Text style={{paddingLeft:50}}>Login</Text>
                </Button>
            )}

            <Tabs selected={this.state.page} style={{backgroundColor:'white'}}
                  selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>

                <Text name="first" selectedIconStyle={{borderTopColor: 'red',borderTopWidth:2}}>Login</Text>
                <Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Register</Text>
            </Tabs>
        </View>

    </View>
</Container>

following is the screenshot of mainscreen

Answer 1

Is this what you want?

If so, it's not very hard to implement.

First of all, install react-navigation module:

npm install --save react-navigation

Second of all, you mentioned that you don't want to make two screens. However, in this case, they are actually still 2 separate screens. Let's go ahead and make two screens: LoginScreen and RegisterScreen like this:

// This is LoginScreen
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Icon } from 'react-native-elements';

class LoginScreen extends Component {
    // This is for the tab bar configuration
    static navigationOptions = {
        title: 'Login',
        header: null,
        tabBarIcon: ({ tintColor }) => {
            return (<Icon name='input' size={30} color={tintColor} />)
        }
    };

    render() {
        return (
            <View style={{ ... }}>
                <Text style={{ ... }}>
                    Login Screen
                </Text>
            </View>
        );
    }
}

export default LoginScreen;

// This is RegisterScreen
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Icon } from 'react-native-elements';

class RegisterScreen extends Component {
    static navigationOptions = {
        title: 'Register',
        header: null,
        tabBarIcon: ({ tintColor }) => {
            return (<Icon name='person-add' size={30} color={tintColor} />)
        }
    };

    render() {
        return (
            <View style={{ ... }}>
                <Text style={{ ... }}>
                    Register Screen
                </Text>
            </View>
        );
    }
}

export default RegisterScreen;

Then, in your App.js file, do this:

import React, { Component } from 'react';
import { TabNavigator } from 'react-navigation';

import LoginScreen from 'path/to/LoginScreen';
import RegisterScreen from 'path/to/RegisterScreen';

class App extends Component {
    render() {
        const MainNavigator = TabNavigator({
            login: { screen: LoginScreen },
            register: { screen: RegisterScreen }
        });

        return (
            <MainNavigator />
        );
    }
}

export default App;