Created
November 15, 2019 15:25
-
-
Save topherPedersen/e9c468a2d16e937cf13ad4902fea12fb to your computer and use it in GitHub Desktop.
Swipeable Bottom Tab Bar with Static Top Title Bar in React Native with React Navigation
This file contains 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
// REFERENCE (TabNavigator with Top Header Bar): https://github.com/react-navigation/react-navigation/issues/741 | |
import React from 'react'; | |
import { Text, View } from 'react-native'; | |
import { createAppContainer } from 'react-navigation'; | |
import { createStackNavigator } from 'react-navigation-stack'; | |
import { createBottomTabNavigator } from 'react-navigation-tabs'; | |
import { createMaterialTopTabNavigator } from 'react-navigation-tabs'; | |
class HomeScreen extends React.Component { | |
static navigationOptions = { | |
title: "Home", | |
}; | |
render() { | |
return ( | |
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> | |
<Text>Home!</Text> | |
</View> | |
); | |
} | |
} | |
class SettingsScreen extends React.Component { | |
static navigationOptions = { | |
title: 'Settings', | |
}; | |
render() { | |
return ( | |
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> | |
<Text>Settings!</Text> | |
</View> | |
); | |
} | |
} | |
const routeConfiguration = { | |
Home: HomeScreen, | |
Settings: SettingsScreen, | |
}; | |
const tabNavigatorConfiguration = { | |
tabBarPosition: 'bottom', | |
swipeEnabled: true, | |
}; | |
const myTabNavigator = createMaterialTopTabNavigator(routeConfiguration, tabNavigatorConfiguration); | |
const RootStack = createStackNavigator( | |
{ | |
Home: { | |
screen: myTabNavigator, | |
navigationOptions: {title: "Moolabeast"} | |
} | |
}, | |
{ | |
initialRouteName: 'Home', | |
} | |
); | |
const AppContainer = createAppContainer(RootStack); | |
export default class App extends React.Component { | |
render() { | |
return(<AppContainer/>); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment