Navigation is one of the core aspects of Mobile app development, With the right navigation module your app will have the native look and feel it deserves. There are lots of Navigation Modules for React-Native out there but most of them are built on JavaScript, JavaScript base Navigations are only trying to fake the native navigation but you can get the real native navigation performance with the look and feel by using React Native Navigation for your Android and iOS app. React Native Navigation is written in native codes to give the best performance and the same look and feel you will get on a native mobile application. In this tutorial, we are using React Native Navigation with Redux and React Native Google Analytics Bridge. Redux and Google Analytics Bridge are just and added the bonus to our app, We use Redux to maintain our app state then we will use Google Analytics Bridge to Track our app and receive detailed usage information from the app.
Initiating React Native Google Analytics Bridge
The key difference with the native bridge is that you get a lot of the metadata handled automatically by the Google Analytics native library. This will include the device UUID, device model, viewport size, OS version etc.Initialize Google analytics in our app with the following line of code:
import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
const tracker = new GoogleAnalyticsTracker('UA-124024789-1');
For more info about React Native Google Analytics Bridge, you can visit the repo page here.const tracker = new GoogleAnalyticsTracker('UA-124024789-1');
Using React Native Navigation
We are going to be using React Native Navigation API that is also available here. Starting Activity in React Native Navigation is event base, We need to listen for registerAppLaunchedListener(callback) This event is called once the app is launched. It's where you will initialize the app with the layout you want, via the SetRoot command.
Navigation.events().registerAppLaunchedListener(() => {
tracker.trackEvent('lunch', 'appLunched'); // Google Analytics tracker object
store.subscribe(this.onStoreUpdate.bind(this));
store.dispatch(appActions.appInitialized());
});
tracker.trackEvent('lunch', 'appLunched'); // Google Analytics tracker object
store.subscribe(this.onStoreUpdate.bind(this));
store.dispatch(appActions.appInitialized());
});
React Native Navigation Single Screen Activity
To create a single screen activity we are going to use the stack API:Navigation.setRoot({
root: {
stack: {
id: 'Auth',
children: [
{
component: {
name: 'tlikes.WelcomeScreen',
passProps: {
str:
"This is a prop passed in 'startSingleScreenApp()'!",
obj: {
str: 'This is a prop passed in an object!',
arr: [
{
str:
'This is a prop in an object in an array in an object!',
},
],
arr2: [
['array of strings', 'with two strings'],
[1, 2, 3],
],
},
num: 1234,
fn: function() {
return 'Hello from a function!';
},
},
},
},
],
},
},
});
React Native Navigation Tabs Screen Activity
To create screen with multiple tabs using React Native Navigation we can use the Bottom Tabs API:
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'tlikes.BottomTabsSideMenu',
},
},
center: {
bottomTabs: {
id: 'Dashboard',
options: {
bottomTabs: {
titleDisplayMode: 'alwaysShow',
barStyle: 'black',
translucent: true,
hideShadow: false,
},
popGesture: true,
statusBar: {
visible: true,
style: 'light',
},
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
drawBehind: true,
},
layout: {
orientation: ['portrait'],
topMargin: Navigation.constants().statusBarHeight,
},
},
children: [
{
stack: {
children: [
{
component: {
name: 'tlikes.TrendingScreen',
options: {
statusBar: {
visible: true,
style: 'light',
},
popGesture: true,
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
hideOnScroll: true,
title: {
text: 'Trending on T-Likes',
fontSize: 20,
color: 'white',
},
background: {
color: '#6B609A',
},
rightButtons: [
{
icon: require('../img/tlogo.png'),
id: 'tlogo',
color: 'white',
},
],
leftButtons: [
{
icon: require('../img/men.png'),
id: 'menu',
color: 'white',
},
],
},
bottomTab: {
fontSize: 12,
badge: 'New',
text: 'Trending',
icon: require('../img/trending.png'),
selectedIcon: require('../img/trending_selected.png'),
},
},
},
},
],
},
},
{
stack: {
children: [
{
component: {
name: 'tlikes.TalentsScreen',
options: {
statusBar: {
visible: true,
style: 'light',
},
popGesture: true,
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
hideOnScroll: true,
title: {
text: 'Discover Great Talents on T-Likes',
fontSize: 20,
color: 'white',
},
background: {
color: '#6B609A',
},
rightButtons: [
{
icon: require('../img/tlogo.png'),
id: 'tlogo',
color: 'white',
},
],
leftButtons: [
{
icon: require('../img/men.png'),
id: 'menu',
color: 'white',
},
],
},
bottomTab: {
fontSize: 12,
text: 'Discover',
icon: require('../img/discover.png'),
selectedIcon: require('../img/discover_selected.png'),
},
},
},
},
],
},
},
{
stack: {
children: [
{
component: {
name: 'tlikes.ContestsScreen',
options: {
statusBar: {
visible: true,
style: 'light',
},
popGesture: true,
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
hideOnScroll: true,
title: {
text: 'Compete With the Best of Bests',
fontSize: 20,
color: 'white',
},
background: {
color: '#6B609A',
},
rightButtons: [
{
icon: require('../img/tlogo.png'),
id: 'tlogo',
color: 'white',
},
],
leftButtons: [
{
icon: require('../img/men.png'),
id: 'menu',
color: 'white',
},
],
},
bottomTab: {
fontSize: 12,
text: 'Contests',
icon: require('../img/contest.png'),
selectedIcon: require('../img/contest_selected.png'),
},
},
},
},
],
},
},
],
},
},
},
},
});
You can view the complete source code or download the Demo App via the link above. If you have any question, Leave a comment below I will answer as soon as I can.
root: {
sideMenu: {
left: {
component: {
name: 'tlikes.BottomTabsSideMenu',
},
},
center: {
bottomTabs: {
id: 'Dashboard',
options: {
bottomTabs: {
titleDisplayMode: 'alwaysShow',
barStyle: 'black',
translucent: true,
hideShadow: false,
},
popGesture: true,
statusBar: {
visible: true,
style: 'light',
},
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
drawBehind: true,
},
layout: {
orientation: ['portrait'],
topMargin: Navigation.constants().statusBarHeight,
},
},
children: [
{
stack: {
children: [
{
component: {
name: 'tlikes.TrendingScreen',
options: {
statusBar: {
visible: true,
style: 'light',
},
popGesture: true,
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
hideOnScroll: true,
title: {
text: 'Trending on T-Likes',
fontSize: 20,
color: 'white',
},
background: {
color: '#6B609A',
},
rightButtons: [
{
icon: require('../img/tlogo.png'),
id: 'tlogo',
color: 'white',
},
],
leftButtons: [
{
icon: require('../img/men.png'),
id: 'menu',
color: 'white',
},
],
},
bottomTab: {
fontSize: 12,
badge: 'New',
text: 'Trending',
icon: require('../img/trending.png'),
selectedIcon: require('../img/trending_selected.png'),
},
},
},
},
],
},
},
{
stack: {
children: [
{
component: {
name: 'tlikes.TalentsScreen',
options: {
statusBar: {
visible: true,
style: 'light',
},
popGesture: true,
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
hideOnScroll: true,
title: {
text: 'Discover Great Talents on T-Likes',
fontSize: 20,
color: 'white',
},
background: {
color: '#6B609A',
},
rightButtons: [
{
icon: require('../img/tlogo.png'),
id: 'tlogo',
color: 'white',
},
],
leftButtons: [
{
icon: require('../img/men.png'),
id: 'menu',
color: 'white',
},
],
},
bottomTab: {
fontSize: 12,
text: 'Discover',
icon: require('../img/discover.png'),
selectedIcon: require('../img/discover_selected.png'),
},
},
},
},
],
},
},
{
stack: {
children: [
{
component: {
name: 'tlikes.ContestsScreen',
options: {
statusBar: {
visible: true,
style: 'light',
},
popGesture: true,
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
hideOnScroll: true,
title: {
text: 'Compete With the Best of Bests',
fontSize: 20,
color: 'white',
},
background: {
color: '#6B609A',
},
rightButtons: [
{
icon: require('../img/tlogo.png'),
id: 'tlogo',
color: 'white',
},
],
leftButtons: [
{
icon: require('../img/men.png'),
id: 'menu',
color: 'white',
},
],
},
bottomTab: {
fontSize: 12,
text: 'Contests',
icon: require('../img/contest.png'),
selectedIcon: require('../img/contest_selected.png'),
},
},
},
},
],
},
},
],
},
},
},
},
});
Thanks!
Your feedback helps us improve tutorials.
No comments:
Post a Comment