index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import { StackNavigator,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 {
  staticnavigationOptions = {
    title:"hone"
  }
  render() {
    return (<View><Text style={styles.instructions}>First -> First Screen</Text></View>);
  }
}
class First_TwoScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  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 = {
	tabBarLabel: 'Female',
    tabBarIcon: ({ tintColor }) => (
       <Icon name="cogs" size={16} color={ tintColor } />
    )
  };
  render() {
    return (<View style={styles.container3}><Text style={styles.instructions}>first-> Third Screen</Text></View>);
  }
}
class First_FourScreen extends React.Component {
   static navigationOptions = {
  tabBarLabel: 'Me',
  tabBarOptions: { showIcon: true } ,
    // 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}
      />
    )
  };
  render() {
    return (
	<View style={styles.container4}>    
		<Image
			source={require('./icons/accept.png')}
			style={styles.icon}
		/>
		<Text style={styles.instructions}>Fourth -> third Screen</Text>
	</View>);
  }
}
///////////////////////////////////////////////////////
class Second_OneScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (
    <View style={styles.container5}>
      <Text style={styles.instructions}>Second -> First Screen</Text>
    </View>);
  }
}
class Second_TwoScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container6}><Text style={styles.instructions}>Second -> Second Screen</Text></View>);
  }
}
class Second_ThreeScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container7}><Text style={styles.instructions}>Second -> Three Screen</Text></View>);
  }
}
class Second_FourScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.containe8}><Text style={styles.instructions}>Second -> Fourth Screen</Text></View>);
  }
}
///////////////////////////////////////////////////////
class Third_OneScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container9}><Text style={styles.instructions}>Third - First Screen</Text></View>);
  }
}
class Third_TwoScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container10}><Text style={styles.instructions}>Third - Second Screen</Text></View>);
  }
}
class Third_ThreeScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container11}><Text style={styles.instructions}>Third - Third Screen</Text></View>);
  }
}
class Third_FourScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container12}><Text style={styles.instructions}>Third - Fourth Screen</Text></View>);
  }
}
////////////////////////////////////////////////////////
class Fourth_OneScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container13}><Text style={styles.instructions}>Fourth -> First Screen</Text></View>);
  }
}
class Fourth_TwoScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container14}><Text style={styles.instructions}>Fourth -> Second Screen</Text></View>);
  }
}
class Fourth_ThreeScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container15}><Text style={styles.instructions}>Fourth -> Third Screen</Text></View>);
  }
}
class Fourth_FourScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  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 {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container}><Text style={styles.instructions}>First Screen</Text></View>);
  }
}

class SecondScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container}><Text style={styles.instructions}>Second Screen</Text></View>);
  }
}
class ThirdScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container}><Text style={styles.instructions}>Third Screen</Text></View>);
  }
}
class FourthScreen extends React.Component {
    static navigationOptions = {
    tabBarLabel: 'Neighbour',
    title:"Neighbour",
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: () => (
       <Icon name="rocket" size={16}  />
    )
  };
  render() {
    return (<View style={styles.container}><Text style={styles.instructions}>Four Screen</Text></View>);
  }
}
// first will be main screen automatically
const FourthTabNavigator = TabNavigator({
  fourth_first : { screen: Fourth_OneScreen },	
  fourth_second: { screen : Fourth_TwoScreen },
  fourth_third : { screen: Fourth_ThreeScreen },
  fourth_fourth : { screen: Fourth_FourScreen }
},{
   tabBarOptions: { 
    showIcon: true,
    fontSize:7,
    style:{
      backgroundColor:"green"
    } 
  },
	tabBarComponent: TabBarBottom,
	tabBarPosition:'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  lazyLoad: true
});
const ThirdTabNavigator = TabNavigator({
  third_first: { screen: Third_OneScreen },
  third_second: { screen: Third_TwoScreen },
  third_third : { screen: Third_ThreeScreen },
  third_fourth : { screen: Third_FourScreen }
},{
   tabBarOptions: { 
    showIcon: true,
    fontSize:7,
    style:{
      backgroundColor:"yellow"
    } 
  },
	tabBarComponent: TabBarBottom,
	tabBarPosition:'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  lazyLoad: true
});
const SecondTabNavigator = TabNavigator({
  second_first: { screen: Second_OneScreen },
  second_second: { screen: Second_TwoScreen },
  second_third : { screen: Second_ThreeScreen },
  second_fourth : { screen: Second_FourScreen }
},{
   tabBarOptions: { 
    showIcon: true,
    fontSize:7,
    style:{
      backgroundColor:"blue"
    } 
  },
	tabBarComponent: TabBarBottom,
	tabBarPosition:'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  lazyLoad: true
});

const FirstTabNavigator = TabNavigator({
  "Friends": { screen: ThirdTabNavigator },
  "Neighbour" : { screen: FourthTabNavigator },
  "Love" : { screen: SecondTabNavigator }
},{
   tabBarOptions: { 
    showIcon: true,
    fontSize:7,
     headerMode:'none'
  },
	tabBarComponent: TabBarTop,
  tabBarPosition:'top',
  swipeEnabled: false,
  animationEnabled: false,
  lazyLoad:true
});

export default class naviTest extends Component {
  render() {
    return (
      <FirstTabNavigator />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e6ffff',
  },
    container1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
    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: 16,
    height: 16,
  }
});
AppRegistry.registerComponent('drawerdownup', () =>naviTest);