React Native - Navigator and Tab Bar integration

Question

I've been trying to find a solution for integrating TabBarIOS and Navigator, and have been coming up empty. Basically, what I'm trying to solve is having a screen that displays a Login Screen at startup (without tabs), then navigate to a Home Screen that does have tabs.

Here's my Index, Login Screen, Tab Bar Component, and Navigator Component files.

If anyone has any suggestions, I would greatly appreciate it!

Thanks

Index.ios.js:

'use strict'

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, TabBarIOS } from 'react-native';
import _ from 'lodash';
import Icon from 'react-native-vector-icons/FontAwesome';

import StatusBarBackground from './app/components/StatusBarBackground'
import AppNavigator from './app/navigation/AppNavigator';
import LoginIndexScreen from './app/screens/LoginIndexScreen'
import BottomBarIOS from './app/components/BottomBarIOS'

class mobile extends Component {

    render() {
        return (
            <AppNavigator />
        );
    }

}

const styles = StyleSheet.create({

  navigatorStyles: {

  }

});

AppRegistry.registerComponent('mobile', () => mobile);

BottomBarIOS.js

'use strict'

import React, { Component } from 'react';
import { StyleSheet, Text, TabBarIOS } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

import AppNavigator from '../navigation/AppNavigator';

class BottomBarIOS extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: "HomeScreen"
        }
    }

    render() {
        return (
            <TabBarIOS selectedTab={this.state.selectedTab}>

                <TabBarIOS.Item
                    selected={this.state.selectedTab === "HomeScreen"}
                    title="Home"
                    onPress={() => this.setState({selectedTab: "HomeScreen"})}>
                        <AppNavigator
                        initialRoute={{ident: "HomeScreen"}} />
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    selected={this.state.selectedTab === "CatalogueScreen"}
                    title="Catalogue"
                    onPress={() => this.setState({selectedTab: "CatalogueScreen"})}>
                        <AppNavigator
                        initialRoute={{ident: "CatalogueScreen"}} />
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    selected={this.state.selectedTab === "MapScreen"}
                    title="Map"
                    onPress={() => this.setState({selectedTab: "MapScreen"})}>
                        <AppNavigator
                        initialRoute={{ident: "MapScreen"}} />
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    selected={this.state.selectedTab === "UserProfileScreen"}
                    title="Profile"
                    onPress={() => this.setState({selectedTab: "UserProfileScreen"})}>
                        <AppNavigator
                        initialRoute={{ident: "UserProfileScreen"}} />
                </TabBarIOS.Item>
            </TabBarIOS>
        );
    }

}

const styles = StyleSheet.create({

  navigatorStyles: {

  }

});

module.exports = BottomBarIOS;

LoginIndexScreen.js

'use strict'

import React, { Component } from 'react';
import { AsyncStorage, StyleSheet, Text, View, TouchableOpacity, AlertIOS,} from 'react-native';

import ViewContainer from '../components/ViewContainer';
import StatusBarBackground from '../components/StatusBarBackground';
import AppNavigator from '../navigation/AppNavigator'

class LoginIndexScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: "LoginIndexScreen"
        }
    }

    render() {
        return (
            <ViewContainer>
                <StatusBarBackground />
                <View style={styles.textContainer}>
                    <Text style={styles.loginText}>Welcome to Poqet</Text>
                    <TouchableOpacity onPress={(event) => this._navigateToHomeScreen()}>
                        <Text style={styles.nextStep}>Press to go to Home Screen</Text>
                    </TouchableOpacity>
                </View>
            </ViewContainer>
        );
    }

    _navigateToHomeScreen() {
        this.props.navigator.push({
            ident: "HomeScreen"
        });
    }
}

const styles = StyleSheet.create({

    textContainer: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    loginText: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 30
    },

    nextStep: {
        marginTop: 80
    }

});

module.exports = LoginIndexScreen;

AppNavigator.js

'use strict'

import React, { Component } from 'react';
import { Navigator } from 'react-native';

import RegisterIndexScreen from '../screens/RegisterIndexScreen';
import LoginIndexScreen from '../screens/LoginIndexScreen';
import HomeScreen from '../screens/HomeScreen';
import UserProfileScreen from '../screens/UserProfileScreen';
import CatalogueScreen from '../screens/CatalogueScreen';
import MapScreen from '../screens/MapScreen';

class AppNavigator extends Component {

    _renderScene(route, navigator) {
        var globalNavigatorProps = { navigator }

        switch(route.ident) {
            case "RegisterIndexScreen":
                return (
                    <RegisterIndexScreen {...globalNavigatorProps} />
                )
            case "LoginIndexScreen":
                return (
                    <LoginIndexScreen {...globalNavigatorProps} />
                )
            case "HomeScreen":
                return (
                    <HomeScreen {...globalNavigatorProps} />
                )
            case "UserProfileScreen":
                return (
                    <UserProfileScreen {...globalNavigatorProps}
                    person={route.person} />
                )
            case "CatalogueScreen":
                return (
                    <CatalogueScreen {...globalNavigatorProps} />
                )
            case "MapScreen":
                return (
                    <MapScreen {...globalNavigatorProps} />
                )
            default:
                return (
                    <LoginIndexScreen {...globalNavigatorProps} />
                )
        }

    }

    render() {
        return (
            <Navigator
                initialRoute={{ident: "LoginIndexScreen"}}
                ref="appNavigator"
                renderScene={this._renderScene}
                configureScene={(route) => ({...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight, })} />
        );
    }

}

module.exports = AppNavigator;

Answer 1

I suggest using this routing library: https://github.com/aksonov/react-native-router-flux

What you are trying to achieve can be done very easily and with less code.