index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import { TabNavigator,TabBarBottom,TabBarTop } from "react-navigation";
import Icon from 'react-native-vector-icons/FontAwesome';

// what if nested  tab in tab 
class First_OneScreen extends React.Component {
  render() {
    return (<View style={styles.container1}><Text style={styles.instructions}>First -> First Screen</Text></View>);
  }
}
class First_TwoScreen extends React.Component {
  static navigationOptions = {
	showIcon:true,
    tabBarLabel: 'Home',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) => (
       <Icon name="rocket" size={30} color={ tintColor } />
    ),
  };
  render() {
    return (
	<View style={styles.container2}>
		<Icon name="rocket" size={30} color="red" />
		<Text style={styles.instructions}>First -> Two Screen</Text>
	</View>);
  }
}
class First_ThreeScreen extends React.Component {
  static navigationOptions = {
    showIcon:true,
	tabBarLabel: 'Home',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) => (
       <Icon name="cogs" size={30} color={ tintColor } />
    ),
  };
  render() {
    return (<View style={styles.container3}><Text style={styles.instructions}>Three -> Third Screen</Text></View>);
  }
}
class First_FourScreen extends React.Component {
   static navigationOptions = {
    showIcon:true,
	tabBarLabel: 'Home',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) => (
        <Image
        source={require('./icons/accept.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };
  render() {
    return (
	<View style={styles.container4}>    
		<Image
			source={require('./icons/accept.png')}
			style={styles.icon}
		/>
		<Text style={styles.instructions}>Fourth -> Fourth Screen</Text>
	</View>);
  }
}
///////////////////////////////////////////////////////
class Second_OneScreen extends React.Component {
  render() {
    return (<View style={styles.container5}><Text style={styles.instructions}>Second -> First Screen</Text></View>);
  }
}
class Second_TwoScreen extends React.Component {
  render() {
    return (<View style={styles.container6}><Text style={styles.instructions}>Second -> Second Screen</Text></View>);
  }
}
class Second_ThreeScreen extends React.Component {
  render() {
    return (<View style={styles.container7}><Text style={styles.instructions}>Second -> Three Screen</Text></View>);
  }
}
class Second_FourScreen extends React.Component {
  render() {
    return (<View style={styles.containe8}><Text style={styles.instructions}>Second -> Fourth Screen</Text></View>);
  }
}
///////////////////////////////////////////////////////
class Third_OneScreen extends React.Component {
  render() {
    return (<View style={styles.container9}><Text style={styles.instructions}>Third - First Screen</Text></View>);
  }
}
class Third_TwoScreen extends React.Component {
  render() {
    return (<View style={styles.container10}><Text style={styles.instructions}>Third - Second Screen</Text></View>);
  }
}
class Third_ThreeScreen extends React.Component {
  render() {
    return (<View style={styles.container11}><Text style={styles.instructions}>Third - Third Screen</Text></View>);
  }
}
class Third_FourScreen extends React.Component {
  render() {
    return (<View style={styles.container12}><Text style={styles.instructions}>Third - Fourth Screen</Text></View>);
  }
}
////////////////////////////////////////////////////////
class Fourth_OneScreen extends React.Component {
  render() {
    return (<View style={styles.container13}><Text style={styles.instructions}>Fourth -> First Screen</Text></View>);
  }
}
class Fourth_TwoScreen extends React.Component {
  render() {
    return (<View style={styles.container14}><Text style={styles.instructions}>Fourth -> Second Screen</Text></View>);
  }
}
class Fourth_ThreeScreen extends React.Component {
  render() {
    return (<View style={styles.container15}><Text style={styles.instructions}>Fourth -> Third Screen</Text></View>);
  }
}
class Fourth_FourScreen extends React.Component {
  render() {
    return (<View style={styles.container16}><Text style={styles.instructions}>Fourth -> Fourth Screen</Text></View>);
  }
}
/////////////////////////////////////////////////////////



// what if nested tab in tab

class FirstScreen extends React.Component {
  
  render() {
    return (<View style={styles.container}><Text style={styles.instructions}>First Screen</Text></View>);
  }
}

class SecondScreen extends React.Component {
  render() {
    return (<View style={styles.container}><Text style={styles.instructions}>Second Screen</Text></View>);
  }
}
class ThirdScreen extends React.Component {
  render() {
    return (<View style={styles.container}><Text style={styles.instructions}>Third Screen</Text></View>);
  }
}
class FourthScreen extends React.Component {
  render() {
    return (<View style={styles.container}><Text style={styles.instructions}>Four Screen</Text></View>);
  }
}
// first will be main screen automatically
const FirstNavigator = TabNavigator({
  first_first: { screen: First_OneScreen },
  first_second: { screen: First_TwoScreen },
  first_third : { screen: First_ThreeScreen },
  first_fourth : { screen: First_FourScreen }
});
const SecondNavigator = TabNavigator({
  second_first: { screen: Second_OneScreen },
  second_second: { screen: Second_TwoScreen },
  second_third : { screen: Second_ThreeScreen },
  second_fourth : { screen: Second_FourScreen }
},{
	tabBarComponent: TabBarBottom,
	tabBarPosition:'bottom'
});

const ThirdNavigator = TabNavigator({
  third_first: { screen: Third_OneScreen },
  third_second: { screen: Third_TwoScreen },
  third_third : { screen: Third_ThreeScreen },
  third_fourth : { screen: Third_FourScreen }
},{
	tabBarComponent: TabBarBottom,
	tabBarPosition:'bottom'
});

const FourthNavigator = TabNavigator({
  fourth_first : { screen: Fourth_OneScreen },	
  fourth_second: { screen : Fourth_TwoScreen },
  fourth_third : { screen: Fourth_ThreeScreen },
  fourth_fourth : { screen: Fourth_FourScreen }
},{
	tabBarComponent: TabBarBottom,
	tabBarPosition:'bottom'
});
/**
const MainScreenNavigator = TabNavigator({
  first_main: { screen: FirstNavigator },
  second_main: { screen: SecondNavigator },
  third_main: { screen: ThirdNavigator },
  four_main: { screen: FourthNavigator },
},{

	tabBarPosition:'top'

});
**/
const MainScreenNavigator = TabNavigator({
  "ūnus": { screen: FirstNavigator },
  "duo": { screen: First_TwoScreen },
  "trēs" : { screen: First_ThreeScreen },
  "quattuor" : { screen: First_FourScreen }
},{

	tabBarPosition:'bottom',
	showIcon:true
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'orange',
  },
    container1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f34336',
  },
    container2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e81e63',
  },
    container3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#3f51b5',
  },
    container4: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2196f2',
  },
    container5: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#8bc24a',
  },
  container6: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9e9e9e',
  },  
  container7: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fec007',
  },
    container8: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00bcd3',
  },
    container9: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9c27b0',
  },
    container10: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00bcd3',
  },  
  container11: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#feea3b',
  },  container12: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#673ab7',
  },
    container13: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ccdb39',
  },
    container14: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#03a9f3',
  },
    container15: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#374046',
  },
    container16: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e47479',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
    icon: {
    width: 26,
    height: 26,
  },
});
AppRegistry.registerComponent('drawerdownup', () => MainScreenNavigator);