React Native Navigation v2 with Redux and Google Analytics ~ Hybrid Mobile Apps Development, React Native, Flutter, JavaScript, Darts, iOS, Android, NodeJS
Coding Savvy FB Twitter Google
» »

React Native Navigation v2 with Redux and Google Analytics

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.
React Native Navigation v2 with Redux and Google Analytics
Download Script React Native Navigation v2 with Redux and Google Analytics Demo Live Demo

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.

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());
    });

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.
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment