React Navigation tutorial (0.60) — createMaterialTopTabNavigator basic implementation

Hi there, it has been a while since I have written an article and thought while I’m listening to 90s house music and drinking Coca cola I would concoct a tutorial for one of my favourite libraries within the React Native world, React Navigation. The tutorial will involve creating a project from scratch and implementing a very basic material design top tab navigator, so lets get to it.

react-native init MyAmazingProject
npm install react-navigation react-native-gesture-handler react-native-reanimated
cd ios
pod install
MyProjectName/android/app/src/main/java/com/topswipemenu/MainActivity.java
import com.facebook.react.ReactActivityDelegate;import com.facebook.react.ReactRootView;import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
@Overrideprotected ReactActivityDelegate createReactActivityDelegate() {return new ReactActivityDelegate(this, getMainComponentName()) {@Overrideprotected ReactRootView createRootView() {return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
import {createAppContainer,createMaterialTopTabNavigator} from 'react-navigation';
const App = () => {return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
};
const AppNavigator = createMaterialTopTabNavigator({Home:{screen:App,}},{tabBarOptions:{style:{marginTop:50,backgroundColor:'black'},activeTintColor:'orange',
},
}
)
import React from 'react';import {Text,View,StyleSheet} from 'react-native';class Test extends React.Component{render(){return(<View><Text>Test file</Text></View>)}
}
export default Test;
import Test from './components/Test';
TestPage:{screen:Test}
const AppNavigator = createMaterialTopTabNavigator({Home:{screen:App,},TestPage:{screen:Test}},{tabBarOptions:{style:{marginTop:50,backgroundColor:'black'},activeTintColor:'orange',},
}
)
tabBarOptions:{style:{marginTop:50,backgroundColor:'black'},activeTintColor:'orange',upperCaseLabel:false},
static navigationOptions = {}
static navigationOptions = {
title:'My test page!'
}
TestPage:{screen:Test,navigationOptions:()=>({title:'my test page'})}
tabBarOnPress:({navigation,defaultHandler})=>{alert("you clicked on test page route!")}
const AppNavigator = createMaterialTopTabNavigator({Home:{screen:App,},TestPage:{screen:Test,navigationOptions:()=>({title:'my test page',tabBarOnPress:({navigation,defaultHandler})=>{alert(navigation)}})}},{tabBarOptions:{style:{marginTop:50,backgroundColor:'black'},activeTintColor:'orange',upperCaseLabel:false},})

Software Developer in the UK. With a keen passion for React Native & C#. Blog — https://cowboycode.co.uk/