React-Navigation with Login Screen

Question

I am trying to use react-navigation to create a initial LOGIN screen which has no tabbar and header, and once the user has been successfully authenticated will navigate to a

Answer 1

Its good that you are using react-navigation which has a good support for most of the features your app requires. Heres my advice

1) On Authentication

React-native has this nice feature state variables which when changed views are re-rendered. You can use state variables to understand the "state" (authenticated/visitor) of the users of your app.

Here is a simple implementation where a user logs in by pressing a login button

Entry page where user logs in

import React from 'react';

import Home from './layouts/users/home/Home';
import Login from './layouts/public/login/Login';


class App extends React.Component {

    state = {
        isLoggedIn: false
      }

    componentDidMount() {
        //Do something here like hide splash screen
    }

    render(){
        if (this.state.isLoggedIn)
         return ;
     else
         return  this.setState({isLoggedIn: true})}
             />;

    }
}

export default App;

2) Login with header

Login View

import React from 'react';
//Non react-native import
import { TabNavigator } from 'react-navigation'
import Icon from 'react-native-vector-icons/MaterialIcons'
import LoginStyles from './Style'
//Do all imports found in react-native here
import {
    View,
    Text,
    TextInput,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';


class Login extends React.Component {
  render(){

         return (
       
       
         Login area
       

       

                
               Login
                
                



       
     );

    }
}

export default Login;

Remember to remove the style attributes in the login screen and add yours including import, I am leaving them there as it can help you have and idea how you can arrange you react project

However it still works without the styles so you can take them off, clicking the login button will take you to the Home screen, since the state changed and the view has to be re-rendered according to new state

The login screen is without a header as you required

Home screen with tabs

3) Tabs with header The general method to achieve this functionality it to add a TabNavigator in a StackNavigator.

       import React from 'react';
    import {
     DrawerNavigator,
     StackNavigator,
     TabNavigator,
     TabBarBottom,
     NavigationActions
    } from 'react-navigation'
    import Icon from 'react-native-vector-icons/MaterialIcons'
 
    
    //Do all imports found in react-native here
    import {
        View,
        Text,
        TextInput,
        StyleSheet,
        TouchableOpacity,
    } from 'react-native';
    
class PicturesTab extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Pictures',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) =>  (),
  };

  render() { return Pictures }
}

class VideosTab extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Videos',
    tabBarIcon: ({ tintColor }) =>  (),
  };

  render() { return Videos }

}
    
    const HomeTabs = TabNavigator({
      Pictures: {
        screen: PicturesTab,
      },
      Videos: {
        screen: VideosTab,
      },
    }, {
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',
        tabBarOptions: {
        //Thick teal #094545
        activeTintColor: '#094545',
        showLabel: false,
        activeBackgroundColor: '#094545',
        inactiveTintColor: '#bbb',
        activeTintColor: '#fff',
    
    
      }
    });
    
    
    
    const HomeScreen = StackNavigator({
      HomeTabs : { screen: HomeTabs,
        navigationOptions: ({ navigation }) => ({
        // title :'title',
        // headerRight:'put some component here',
        // headerLeft:'put some component here',
         headerStyle: {
           backgroundColor: '#094545'
         }
    
    
       })
     },
    });
    
   
    
    
    export default HomeScreen;

Disclaimer : Code may return errors as some files may be missing or some typos may be present you should check for details carefully and change where neccesary if you have to copy this code. Any problems can be pasted as comments. Hope this helps someone.

You may also remove the icons in the tab configurations or install the react-native-vector icons which makes tabs great!