Fix issue with images not rendering

ios/Podfile

@@ -65,6 +65,8 @@ post_install do |_installer|
                    '_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules', '_initializeModules:(NSArray<Class> *)modules')
   find_and_replace('../node_modules/react-native/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm',
                    'RCTBridgeModuleNameForClass(module))', 'RCTBridgeModuleNameForClass(Class(module)))')
+  find_and_replace('../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m',
+                   '_currentFrame.CGImage;', '_currentFrame.CGImage ;} else { [super displayLayer:layer];')
 end
 
 def find_and_replace(dir, findstr, replacestr)

ios/Podfile.lock

@@ -427,6 +427,6 @@ SPEC CHECKSUMS:
   SDWebImageWebPCoder: d0dac55073088d24b2ac1b191a71a8f8d0adac21
   Yoga: 02036f6383c0008edb7ef0773a0e6beb6ce82bd1
 
-PODFILE CHECKSUM: eb37df8267dd7a43f431c689a61309d62782ea09
+PODFILE CHECKSUM: e9c5b4bdcdc84edc44f3a2bd5f1c5d4c1ddd89b4
 
 COCOAPODS: 1.10.1

src/contexts/ListingContext.js

@@ -1,24 +1,22 @@
-import React, { createContext, useReducer } from 'react';
+import React, {createContext, useReducer} from 'react';
 
 export const ListingContext = createContext({});
 
 const initialState = {
   fetchingListing: true,
   listing: {},
-}
+};
 
 const reducer = (state, action) => {
   switch (action.type) {
     case 'GET_LISTING': {
       return {
         ...state,
-        fetchingListing: true
+        fetchingListing: true,
       };
     }
     case 'GET_LISTING_SUCCESS': {
-      const {
-        listing,
-      } = action;
+      const {listing} = action;
       return {
         ...state,
         listing,
@@ -28,10 +26,10 @@ const reducer = (state, action) => {
     case 'GET_LISTING_FAILURE':
       return {
         ...state,
-        fetchingListing: false
+        fetchingListing: false,
       };
     case 'NO_LISTING': {
-      return { ...state, listing: {}, fetchingListing: false };
+      return {...state, listing: {}, fetchingListing: false};
     }
     default:
       return state;
@@ -45,4 +43,4 @@ export const ListingProvider = props => {
       {props.children}
     </ListingContext.Provider>
   );
-}
+};

src/navigators/NewOrderStack.js

@@ -2,7 +2,6 @@ import React from 'react';
 import {Icon} from 'react-native-ui-kitten';
 import {TouchableOpacity} from 'react-native';
 import {createStackNavigator} from 'react-navigation-stack';
-import {Header, HeaderBackButton} from 'react-navigation-stack';
 
 import NewOrder from '../screens/NewOrder';
 import CameraOrder from '../screens/CameraOrder';
@@ -52,8 +51,10 @@ export default createStackNavigator({
     screen: CameraRollSelect,
     navigationOptions: {
       headerStyle: {
+        backgroundColor: '#0079BF',
         elevation: 0,
       },
+      headerTintColor: '#fff',
     },
   },
 });

src/screens/CameraRollSelect.js

@@ -1,8 +1,11 @@
 import React, {useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
 import CameraRollPicker from 'react-native-camera-roll-picker';
+import {Icon} from 'react-native-ui-kitten';
 
-const CameraRollSelect = () => {
+const MAX = 3;
+
+const CameraRollSelect = ({navigation}) => {
   const [selectedImages, setSelectedImages] = useState([]);
   const [num, setNum] = useState(0);
 
@@ -19,13 +22,14 @@ const CameraRollSelect = () => {
   return (
     <View style={styles.container}>
       <View style={styles.content}>
-        <Text style={styles.text}>
-          <Text style={styles.bold}> {num} </Text> images has been selected
+        <Text style={styles.bold}>
+          {' '}
+          {num}/{MAX} selected
         </Text>
       </View>
       <CameraRollPicker
         groupTypes="All"
-        maximum={3}
+        maximum={MAX}
         selected={selectedImages}
         imagesPerRow={3}
         callback={getSelectedImages}
@@ -35,30 +39,40 @@ const CameraRollSelect = () => {
   );
 };
 
+CameraRollSelect.navigationOptions = ({navigation}) => {
+  return {
+    headerRight: () => (
+      <TouchableOpacity onPress={() => navigation.navigate('NewOrderScreen')}>
+        <Icon
+          name="checkmark-outline"
+          fill="#fff"
+          width={35}
+          height={35}
+          style={{marginRight: 20}}
+        />
+      </TouchableOpacity>
+    ),
+  };
+};
+
 export default CameraRollSelect;
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F6AE2D',
+    backgroundColor: '#0079BF',
   },
   content: {
-    marginTop: 15,
     height: 50,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    flexWrap: 'wrap',
   },
-  text: {
+  text: {},
+  bold: {
+    fontWeight: 'bold',
     fontSize: 16,
     alignItems: 'center',
     color: '#fff',
   },
-  bold: {
-    fontWeight: 'bold',
-  },
-  info: {
-    fontSize: 12,
-  },
 });

src/screens/NewOrder.js

@@ -1,10 +1,5 @@
 import React, {useEffect, useContext, useState} from 'react';
-import {
-  StyleSheet,
-  ActivityIndicator,
-  View,
-  TouchableOpacity,
-} from 'react-native';
+import {StyleSheet, ActivityIndicator, TouchableOpacity} from 'react-native';
 import {StackActions} from 'react-navigation';
 import normalize from 'json-api-normalizer';
 import build from 'redux-object';