Full repository here.
Created
January 21, 2020 08:57
-
-
Save johnkyony/8df41ad146e46cd60cef532a5b0364d2 to your computer and use it in GitHub Desktop.
React Native - Tab Navigation (Screens)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { View, StyleSheet, Text } from 'react-native'; | |
| import { Ionicons } from '@expo/vector-icons'; | |
| const TabIcon = (props) => ( | |
| <Ionicons | |
| name={'md-home'} | |
| size={35} | |
| color={props.focused ? 'grey' : 'darkgrey'} | |
| /> | |
| ) | |
| export default class ScreenOne extends React.Component { | |
| static navigationOptions = { | |
| tabBarIcon: TabIcon | |
| }; | |
| render() { | |
| return ( | |
| <View style={styles.container}> | |
| <Text>Screen One</Text> | |
| </View> | |
| ); | |
| } | |
| } | |
| const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { View, StyleSheet, Text } from 'react-native'; | |
| import { Ionicons } from '@expo/vector-icons'; | |
| const TabIcon = (props) => ( | |
| <Ionicons | |
| name={'md-apps'} | |
| size={35} | |
| color={props.focused ? 'grey' : 'darkgrey'} | |
| /> | |
| ) | |
| export default class ScreenTwo extends React.Component { | |
| static navigationOptions = { | |
| tabBarIcon: TabIcon | |
| }; | |
| render() { | |
| return ( | |
| <View style={styles.container}> | |
| <Text>Screen Two</Text> | |
| </View> | |
| ); | |
| } | |
| } | |
| const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| }, | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment