Merge pull request #6 from noddy1996/ios

Tab navigation is configured

Author: eramudeep

App.js

@@ -8,30 +8,33 @@
 
 import React from 'react';
 import MainStack from './app/routing/MainStack';
-import { Provider } from "react-redux"
-import { StatusBar } from 'react-native'
+import {Provider} from 'react-redux';
+import {StatusBar} from 'react-native';
 import storePre from './app/redux/store';
 import DropdownAlert from 'react-native-dropdownalert';
-import { AlertHelper } from './app/utils/AlertHelper';
-import { PersistGate } from 'redux-persist/integration/react'
-
+import {AlertHelper} from './app/utils/AlertHelper';
+import {PersistGate} from 'redux-persist/integration/react';
+import TabNavigationStack from './app/routing/TabNavigationStack';
+import {navigationTypeTabs} from './app.json';
 const App: () => React$Node = () => {
-  const { persistor, store } = storePre;
+  const {persistor, store} = storePre;
 
   return (
     <Provider store={store}>
-       <PersistGate loading={null} persistor={persistor}>
-      <MainStack/>
-      <DropdownAlert
-          defaultContainer={{ padding: 8, paddingTop: StatusBar.currentHeight, flexDirection: 'row' }}
-          ref={ref => AlertHelper.setDropDown(ref)}
+      <PersistGate loading={null} persistor={persistor}>
+        {navigationTypeTabs ? <TabNavigationStack /> : <MainStack />} 
+        <DropdownAlert
+          defaultContainer={{
+            padding: 8,
+            paddingTop: StatusBar.currentHeight,
+            flexDirection: 'row',
+          }}
+          ref={(ref) => AlertHelper.setDropDown(ref)}
           onClose={() => AlertHelper.invokeOnClose()}
         />
-        </PersistGate>
+      </PersistGate>
     </Provider>
-  )
-
+  );
 };
 
-
 export default App;

README.md

@@ -17,12 +17,14 @@ See [Getting Started](https://facebook.github.io/react-native/docs/getting-start
 - [Redux-persist](https://github.com/rt2zz/redux-persist) `6.0.0` Persist and rehydrate a redux store. Javascript apps
 - [Alert](https://github.com/testshallpass/react-native-dropdownalert) `4.3.0` An alert to notify users 
 - [Babel](http://babeljs.io/) `7.2.3` for ES6+ support
+- [Bottom-Tabs](https://github.com/react-navigation/react-navigation) `5.11.11` for Bottom Navigations 
 - [Navigation for React Native](https://reactnavigation.org/) a router based on new React Native Navigation API
 
 ## Libraries
  - [@react-native-community/masked-view](https://github.com/react-native-community/react-native-masked-view) `0.1.10`
  - [@react-navigation/native](https://github.com/react-navigation/react-navigation) `5.7.3`
  - [@react-navigation/stack](https://github.com/react-navigation/react-navigation) `5.9.0`
+ - [Bottom-Tabs](https://github.com/react-navigation/react-navigation) `5.11.11` 
  - [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) `1.7.0`
  - [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) `1.13.0`
  - [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) `3.1.7`
@@ -77,7 +79,10 @@ $ react-native run-ios
 ```sh
 $ react-native run-android
 ```
+#### 4. How to Decide the Navigation
 
+*	Navigation is decided By  **navigationTypeTabs** Key definend in [app.json](./app.json).
+*	**navigationTypeTabs** :  true, will give you the bottom Tabs and vice versa.
 ## Debugger
 - [React Native Debugger](https://github.com/jhen0409/react-native-debugger) : The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools
 - [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension) `2.13.5`

app.json

@@ -1,4 +1,5 @@
 {
   "name": "react_native_redux_starter",
-  "displayName": "react_native_redux_starter"
+  "displayName": "react_native_redux_starter",
+  "navigationTypeTabs": true
 }

app/routing/MainStack.js

@@ -1,16 +1,20 @@
-import React from 'react'
-import { createStackNavigator } from '@react-navigation/stack';
-import { NavigationContainer } from '@react-navigation/native';
+import React from 'react';
+import {createStackNavigator} from '@react-navigation/stack';
+import {NavigationContainer} from '@react-navigation/native';
 import Home from '../screens/Home';
+import {RoutesList} from './routes';
 
 const Stack = createStackNavigator();
 
 export default function MainStack() {
   return (
-      <NavigationContainer>
-    <Stack.Navigator screenOptions={{headerShown:false}}>
-      <Stack.Screen name="Home" component={Home} />
-    </Stack.Navigator>
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{headerShown: false}}>
+        {RoutesList?.map((route, key) => {
+          const {name, component} = route;
+          return <Stack.Screen key={key} name={name} component={component} />;
+        })}
+      </Stack.Navigator>
     </NavigationContainer>
   );
-}
+}

app/routing/TabNavigationStack.js

@@ -0,0 +1,36 @@
+/**
+ * @author Amusoftech <er.amudeep@gmail.com>
+ * @description Minimal example of Tab Navigations
+ */
+import * as React from 'react';
+import {Text, View} from 'react-native';
+import {NavigationContainer} from '@react-navigation/native';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {RoutesList} from './routes';
+import {appColors} from '../utils/appColors';
+
+const Tab = createBottomTabNavigator();
+
+export default function TabNavigationStack() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator
+        tabBarOptions={{
+          activeTintColor: appColors.primary,
+          inactiveTintColor: appColors.secondary,
+        }}>
+        {RoutesList?.map((route, key) => {
+          const {name, component, options} = route;
+          return (
+            <Tab.Screen
+              key={key}
+              name={name}
+              component={component}
+              options={options}
+            />
+          );
+        })}
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}

app/routing/routes.js

@@ -0,0 +1,18 @@
+/**
+ * @author Amusoftech <er.amudeep@gmail.com>
+ * @description List of routes for Tabs Navigator and Stack navigator, Along addational  Option for Tabs
+ */
+import Home from '../screens/Home';
+import {appColors} from '../utils/appColors';
+
+export const RoutesList = [
+  {
+    name: 'Home',
+    component: Home,
+    options: {
+      tabBarBadge: 3,
+      tabBarLabel: 'Home',
+      //.... rest are the params for Tab.Screen See : https://reactnavigation.org/docs/bottom-tab-navigator/#options
+    },
+  },
+];

package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/native": "^5.8.10",
     "@react-navigation/stack": "^5.12.8",
     "react": "^17.0.1",