stack navigator and search screen

.eslintrc

@@ -37,7 +37,7 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
-  "plugins": ["react-native"],
+  "plugins": ["react-native", "simple-import-sort"],
   "rules": {
     // Spacing in brackets is consistent and readable
     "array-bracket-spacing": ["error", "always"],
@@ -136,6 +136,17 @@
       {
         "ignoreStyleProperties": true
       }
+    ],
+    // Prefer passing in ES6 default values to function components (ideal solution resolve #113)
+    "react/require-default-props": "off",
+    // This plugin sorts alphabetically by default
+    "simple-import-sort/sort": "off",
+    // Add new line between imports
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always"
+      }
     ]
   }
 }

commitlint.config.js

@@ -17,5 +17,6 @@ module.exports = {
         'test',
       ],
     ],
+    'body-max-line-length': [ 0 ],
   },
 }

ios/Podfile.lock

@@ -185,8 +185,8 @@ PODS:
     - React-cxxreact (= 0.63.2)
     - React-jsi (= 0.63.2)
   - React-jsinspector (0.63.2)
-  - react-native-safe-area-context (3.1.7):
-    - React
+  - react-native-safe-area-context (3.1.8):
+    - React-Core
   - React-RCTActionSheet (0.63.2):
     - React-Core/RCTActionSheetHeaders (= 0.63.2)
   - React-RCTAnimation (0.63.2):
@@ -247,6 +247,8 @@ PODS:
     - React-Core (= 0.63.2)
     - React-cxxreact (= 0.63.2)
     - React-jsi (= 0.63.2)
+  - RNCMaskedView (0.1.10):
+    - React
   - RNGestureHandler (1.8.0):
     - React
   - RNReanimated (1.13.0):
@@ -288,6 +290,7 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -352,6 +355,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCMaskedView:
+    :path: "../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -382,7 +387,7 @@ SPEC CHECKSUMS:
   React-jsi: 54245e1d5f4b690dec614a73a3795964eeef13a8
   React-jsiexecutor: 8ca588cc921e70590820ce72b8789b02c67cce38
   React-jsinspector: b14e62ebe7a66e9231e9581279909f2fc3db6606
-  react-native-safe-area-context: fcece23844742b6f7f0627c3715b806a7deff946
+  react-native-safe-area-context: 01158a92c300895d79dee447e980672dc3fb85a6
   React-RCTActionSheet: 910163b6b09685a35c4ebbc52b66d1bfbbe39fc5
   React-RCTAnimation: 9a883bbe1e9d2e158d4fb53765ed64c8dc2200c6
   React-RCTBlob: 39cf0ece1927996c4466510e25d2105f67010e13
@@ -393,6 +398,7 @@ SPEC CHECKSUMS:
   React-RCTText: 1b6773e776e4b33f90468c20fe3b16ca3e224bb8
   React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
+  RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
   RNGestureHandler: 7a5833d0f788dbd107fbb913e09aa0c1ff333c39
   RNReanimated: 89f5e0a04d1dd52fbf27e7e7030d8f80a646a3fc
   RNScreens: b748efec66e095134c7166ca333b628cd7e6f3e2

jest.config.js

@@ -24,4 +24,10 @@ module.exports = {
     '<rootDir>/test/setupJest.js',
   ],
   moduleFileExtensions: [ 'ts', 'tsx', 'js', 'jsx', 'json', 'node' ],
+  // https://github.com/react-navigation/react-navigation/issues/7950#issuecomment-615220412
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
 }

package.json

@@ -20,8 +20,8 @@
     "postinstall": "pod-install ios"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/toolbar-android": "0.1.0-rc.2",
-    "@react-navigation/drawer": "^5.9.0",
     "@react-navigation/material-bottom-tabs": "^5.2.16",
     "@react-navigation/native": "^5.7.3",
     "@react-navigation/stack": "^5.9.0",
@@ -30,7 +30,7 @@
     "react-native": "0.63.2",
     "react-native-gesture-handler": "^1.8.0",
     "react-native-reanimated": "^1.13.0",
-    "react-native-safe-area-context": "^3.1.7",
+    "react-native-safe-area-context": "^3.1.8",
     "react-native-screens": "^2.10.1",
     "react-native-vector-icons": "^7.1.0",
     "reanimated-bottom-sheet": "^1.0.0-alpha.22"
@@ -55,8 +55,10 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-react-native": "^3.9.1",
+    "eslint-plugin-simple-import-sort": "^5.0.3",
     "husky": "^4.3.0",
     "jest": "^26.4.2",
+    "jest-transform-stub": "^2.0.0",
     "jetifier": "^1.6.6",
     "metro-react-native-babel-preset": "^0.63.0",
     "npm-run-all": "^4.1.5",

src/App.tsx

@@ -1,20 +1,19 @@
 import React from 'react'
 import { NavigationContainer } from '@react-navigation/native'
-import { createDrawerNavigator } from '@react-navigation/drawer'
+import { createStackNavigator } from '@react-navigation/stack'
 
 import HomeScreen from './screens/HomeScreen'
 import SearchScreen from './screens/SearchScreen'
-
 import Screens from './lib/screens'
 
-const Drawer = createDrawerNavigator()
+const Stack = createStackNavigator()
 
 const App = () => (
   <NavigationContainer>
-    <Drawer.Navigator>
-      <Drawer.Screen name={Screens.Home} component={HomeScreen} />
-      <Drawer.Screen name={Screens.Search} component={SearchScreen} />
-    </Drawer.Navigator>
+    <Stack.Navigator headerMode="none">
+      <Stack.Screen name={Screens.Home} component={HomeScreen} />
+      <Stack.Screen name={Screens.Search} component={SearchScreen} />
+    </Stack.Navigator>
   </NavigationContainer>
 )
 

src/components/BackButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Text, StyleSheet, TouchableOpacityProps } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import { TouchableOpacity } from 'react-native-gesture-handler'
+
+import Colours from '../themes/colours'
+
+type BackButtonProps = {
+  /**
+   * Value back button should display
+   */
+  label?: string,
+} & Omit<TouchableOpacityProps, 'onPress' | 'children'>
+
+const styles = StyleSheet.create( {
+  label: {
+    color: Colours.Blue,
+    fontSize: 16,
+  },
+} )
+
+const BackButton = ( { label = 'Cancel', ...props }: BackButtonProps ) => {
+  const navigation = useNavigation()
+
+  const goBack = () => navigation.goBack()
+
+  return (
+    <TouchableOpacity onPress={goBack} {...props}>
+      <Text style={styles.label}>{label}</Text>
+    </TouchableOpacity>
+  )
+}
+
+export default BackButton

src/components/Container.tsx

@@ -1,24 +1,46 @@
 import React, { ReactNode } from 'react'
-import { Platform, Dimensions, StyleSheet, View, ViewProps } from 'react-native'
+import {
+  StyleSheet,
+  View,
+  SafeAreaView,
+  ViewProps,
+  ColorValue,
+} from 'react-native'
 
-const { height: deviceHeight } = Dimensions.get( 'window' )
+import Colours from '../themes/colours'
 
 const styles = StyleSheet.create( {
   main: {
     flex: 1,
-    height: Platform.OS === 'ios' ? deviceHeight : deviceHeight - 20,
-    backgroundColor: 'white',
+    backgroundColor: Colours.White,
+  },
+  safeArea: {
+    flex: 0,
   },
 } )
 
 type ContainerProps = {
   children: ReactNode,
+  /**
+   * Color value for Status Bar
+   */
+  statusBarColor?: ColorValue,
 } & ViewProps
 
-const Container = ( { children, ...props }: ContainerProps ) => (
-  <View style={styles.main} {...props}>
-    {children}
-  </View>
+const Container = ( {
+  children,
+  statusBarColor = Colours.White,
+  style,
+  ...props
+}: ContainerProps ) => (
+  <>
+    <SafeAreaView
+      style={[ styles.safeArea, { backgroundColor: statusBarColor } ]}
+    />
+    <View style={[ styles.main, style ]} {...props}>
+      {children}
+    </View>
+  </>
 )
 
 export default Container

src/components/Search.tsx

@@ -2,16 +2,27 @@ import React from 'react'
 import { View, StyleSheet, TextInput } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
+import { OS } from '../lib/consts'
+import Colours from '../themes/colours'
+import { mx } from '../themes/utils'
+
 const styles = StyleSheet.create( {
   searchBar: {
-    padding: 10,
+    ...( OS.android && { paddingLeft: 10 } ),
+    ...( OS.ios && { padding: 10 } ),
     flexDirection: 'row',
+    borderRadius: 10,
+    backgroundColor: Colours.DarkGray,
+  },
+  searchIcon: {
+    ...mx,
   },
   searchInputBox: {
     flex: 1,
     fontSize: 22,
     marginLeft: 5,
     fontFamily: 'OpenGurbaniAkhar-Black',
+    ...mx,
   },
 } )
 
@@ -21,7 +32,7 @@ type SearchBarProps = {
 
 const SearchBar = ( { handleTextChanges }: SearchBarProps ) => (
   <View style={styles.searchBar}>
-    <Icon name="magnify" size={25} />
+    <Icon name="magnify" size={25} style={styles.searchIcon} />
     <TextInput
       placeholder="Koj"
       style={styles.searchInputBox}

src/components/ShortcutDrawer/Icons.android.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
+import Colours from '../../themes/colours'
+
 import { IconProps, IconsType } from './Icons.types'
 
 const styles = StyleSheet.create( {
@@ -13,7 +15,7 @@ const styles = StyleSheet.create( {
 
 const iconProps = {
   size: 30,
-  color: 'rgb(47, 124, 246)',
+  color: Colours.Blue,
 }
 
 type StyledIconProps = IconProps & { name: string }

src/components/ShortcutDrawer/Icons.ios.tsx

@@ -2,9 +2,10 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 import { createIconSetFromFontello } from 'react-native-vector-icons'
 
-import { IconProps, IconsType } from './Icons.types'
-
 import fontelloConfig from '../../../assets/fonts/fontello-icons.json'
+import Colours from '../../themes/colours'
+
+import { IconProps, IconsType } from './Icons.types'
 
 const Icon = createIconSetFromFontello( fontelloConfig )
 
@@ -17,7 +18,7 @@ const styles = StyleSheet.create( {
 
 const iconProps = {
   size: 20,
-  color: 'rgb(47, 124, 246)',
+  color: Colours.Blue,
 }
 
 type StyledIconProps = IconProps & { name: string }