Making ImageInput with blue btn and image array above

src/app/components/ImageInput.js

@@ -68,31 +68,44 @@ const launchImageLibrary = async (onChangeImage, callBack) => {
   }
 };
 
+function addNewImageBtn() {
+  return (
+    <View style={styles.addBtn}>
+      <MaterialCommunityIcons color={colors.white} name="camera" size={20} />
+      <Text style={{ color: colors.white, marginLeft: 10, fontSize: 14 }}>
+        CÂMERA
+      </Text>
+    </View>
+  );
+}
+
 function ImageInput({ imageUri, onChangeImage }) {
   const [modalVisible, setModalVisible] = useState(false);
 
   return (
     <View>
-      <TouchableWithoutFeedback
-        onPress={() => {
-          !imageUri
-            ? setModalVisible(true)
-            : removeImgage(imageUri, onChangeImage);
-        }}
-      >
-        <View style={styles.container}>
-          {!imageUri && (
-            <MaterialCommunityIcons
-              color={colors.medium}
-              name="camera-plus"
-              size={40}
-            />
-          )}
-          {imageUri && (
+      {imageUri && (
+        <TouchableWithoutFeedback
+          onPress={() => {
+            removeImgage(imageUri, onChangeImage);
+          }}
+        >
+          <View style={styles.container}>
             <Image source={{ uri: imageUri }} style={styles.image} />
-          )}
-        </View>
-      </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      )}
+
+      {!imageUri && (
+        <TouchableOpacity
+          onPress={() => {
+            setModalVisible(true);
+          }}
+        >
+          {addNewImageBtn()}
+        </TouchableOpacity>
+      )}
+
       <View>
         <Modal
           style={styles.centeredView}
@@ -214,6 +227,16 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     height: 35,
   },
+  addBtn: {
+    marginVertical: 10,
+    borderRadius: 6,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: colors.primary,
+    height: 42,
+    width: "100%",
+  },
 });
 
 export default ImageInput;

src/app/components/ImageInputList.js

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { View, StyleSheet, ScrollView } from "react-native";
+import { View, StyleSheet, ScrollView, Button } from "react-native";
 import ImageInput from "./ImageInput";
 
 function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) {
@@ -21,9 +21,9 @@ function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) {
               />
             </View>
           ))}
-          <ImageInput onChangeImage={(uri) => onAddImage(uri)} />
         </View>
       </ScrollView>
+      <ImageInput onChangeImage={(uri) => onAddImage(uri)} />
     </View>
   );
 }