Skip to content

Instantly share code, notes, and snippets.

@amsimoes

amsimoes/MainTabNavigator.js

Created July 10, 2017 20:50
Show Gist options
  • Save amsimoes/be5894f3222f46d1031ff9af8f46cb49 to your computer and use it in GitHub Desktop.
Save amsimoes/be5894f3222f46d1031ff9af8f46cb49 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
MainTabNavigator.js
/**
* @flow
*/
import React from 'react';
import { FontAwesome, MaterialIcons, Foundation } from '@expo/vector-icons';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import Colors from '../constants/Colors';
import EventScreen from '../screens/EventScreen';
import ScoresScreen from '../screens/ScoresScreen';
import ScheduleScreen from '../screens/ScheduleScreen';
import EventTabNavigator from './EventTabNavigator'
import InfoScreen from '../screens/InfoScreen';
export default TabNavigator(
{
Scores: {
screen: ScoresScreen,
},
Event: {
screen: EventTabNavigator,
navigationOptions: { tabBarLabel: 'Event' }
},
Schedule: {
screen: ScheduleScreen,
},
},
{
navigationOptions: ({ navigation }) => ({
// Set the tab bar icon
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let iconName;
switch (routeName) {
case 'Event':
iconName = 'location-city';
return (
<MaterialIcons
name={iconName}
size={34}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
break;
case 'Scores':
iconName = 'results';
return (
<Foundation
name={iconName}
size={34}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
break;
case 'Schedule':
iconName = 'calendar';
return (
<FontAwesome
name={iconName}
size={28}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
}
return (
<FontAwesome
name={'remove'}
size={30}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
},
}),
// Put tab bar on bottom of screen on both platforms
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
// Disable animation so that iOS/Android have same behaviors
animationEnabled: false,
// Don't show the labels
tabBarOptions: {
showLabel: true,
},
}
);
Raw
RootNavigation.js
import { Notifications } from 'expo';
import React from 'react';
import { StackNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
import EventTabNavigator from './EventTabNavigator';
const RootStackNavigator = StackNavigator(
{
Main: {
screen: MainTabNavigator,
},
},
{
navigationOptions: () => ({
headerTitleStyle: {
fontWeight: 'normal',
},
}),
}
);
export default class RootNavigator extends React.Component {
render() {
return <RootStackNavigator />;
}
}
Raw
ScoresScreen.js
import React from 'react';
import { ScrollView, StyleSheet, Text, Picker, Slider, Button, View } from 'react-native';
import { ExpoLinksView } from '@expo/samples';
import Expo from 'expo';
import MapView from 'react-native-maps';
export default class ScoresScreen extends React.Component {
constructor(props) {
super(props)
}
static navigationOptions = {
title: 'Scores',
headerRight: (<View><Picker
selectedValue={"java"}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker></View>)
};
render() {
return (
<Picker
selectedValue={"java"}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#fff',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment