Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Swipeable Bottom Tab Bar with Static Top Title Bar in React Native with React Navigation
// 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
You can’t perform that action at this time.