React native nested routing with splash screen

router.js

// via https://github.com/react-community/react-navigation/issues/156#issuecomment-309263670
import React, { Component } from 'react';

import {
  Alert,
  AppRegistry,
  Button,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import {
  StackNavigator,
  TabNavigator,
} from 'react-navigation';


class Splash extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    setTimeout(() => {
      requestAnimationFrame(() => {
        this.props.navigation.navigate('AuthTab');
      });
    }, 500);
  }

  render() {
    return (
      <View>
        <Text>Splash Screen</Text>
      </View>
    );
  }
}


class SplashScreen extends Component {
  static navigationOptions = {
    header: null
  }

  render() {
    return (
      <Splash navigation={this.props.navigation} />
    );
  }
}


class LoginScreen extends Component {
  login = () => {
    this.props.navigation.navigate('AppTab');
  }

  render() {
    return (
      <View>
        <Text>LoginScreen</Text>
        <Button title="login" onPress={this.login} />
      </View>
    );
  }
}


class RegisterScreen extends Component {
  render() {
    return (
      <View>
        <Text>RegisterScreen</Text>
      </View>
    );
  }
}


class HomeScreen extends Component {
  static navigationOptions = {
    title: 'Home'
  }

  render() {
    const nav = this.props.navigation;

    return (
      <View>
        <Text>This is home screen</Text>
        <Button title="Go to SkyWalker Profile" onPress={() => nav.navigate('Profile', {name: 'SKY'})} />
      </View>
    );
  }
}


class ProfileScreen extends Component {
  static navigationOptions({navigation}) {
    const state = navigation.state;
    const params = navigation.state.params;

    return {
      title: `${params.name} Profile`
    };
  }

  render() {
    const nav = this.props.navigation;
    const params = this.props.navigation.state.params;

    return (
      <View>
        <Text>{JSON.stringify(nav.state)}</Text>
        <Text>This is {params.name} profile screen</Text>
        <Button title="Go Back" onPress={() => nav.goBack()} />
      </View>
    );
  }
}


const AuthNavigator = StackNavigator({
  Login: {
    path: '/login',
    screen: LoginScreen
  },
  Register: {
    path: '/register',
    screen: RegisterScreen
  }
}, {
  initialRouteName: 'Login'
});


const AppNavigator = StackNavigator({
  Home: {
    path: '/home',
    screen: HomeScreen
  },
  Profile: {
    path: '/profile/:name',
    screen: ProfileScreen
  },
}, {
  initialRouteName: 'Home'
});


const TAB_ROUTES = {
  SplashTab: {
    screen: SplashScreen,
    navigationOptions: { title: 'Splash' }
  },
  AuthTab: {
    screen: AuthNavigator,
    navigationOptions: { title: 'Auth' }
  },
  AppTab: {
    screen: AppNavigator,
    navigationOptions: { title: 'App' }
  }
};

const TAB_NAVIGATOR_CONFIG = {
  initialRouteName: 'SplashTab',
  backBehavior: 'none',
  swipeEnabled: false,
  tabBarPosition: 'bottom',
  lazy: true,
  animationEnabled: true,
  tabBarOptions: {
    indicatorStyle: { backgroundColor: '#fff' }
  },
  navigationOptions: {
    tabBarVisible: false
  }
};

const Application = TabNavigator(TAB_ROUTES, TAB_NAVIGATOR_CONFIG);

AppRegistry.registerComponent('ReactApplication', () => Application);