cosmetic changes

App.tsx

@@ -1,15 +1,5 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * Generated with the TypeScript template
- * https://github.com/react-native-community/react-native-template-typescript
- *
- * @format
- */
-
 import React from 'react';
-import {SafeAreaView, Text, View} from 'react-native';
+import {SafeAreaView, View} from 'react-native';
 import data from './src/data/templateData.json';
 import userData from './src/data/userData.json';
 import RenderingEngine from './src/components/formRenderingEngine';
@@ -21,7 +11,6 @@ import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import Widget from './src/components/form';
 import {navigationRef} from './src/components/utlis/navigationUtlis';
-import {GenericStyles} from './RN-UI-LIB/src/styles';
 import FullScreenLoader from './RN-UI-LIB/src/components/FullScreenLoader';
 
 function HomeScreen() {

src/components/form/components/ImageUpload.tsx

@@ -1,4 +1,11 @@
-import {Image, StyleSheet, Text, View} from 'react-native';
+import {
+    Image,
+    ImageBackground,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+} from 'react-native';
 import React, {useEffect} from 'react';
 import {Control, Controller} from 'react-hook-form';
 import CameraClickPicture from '../../../../RN-UI-LIB/src/components/camera_click_picture/CameraClickPicture';
@@ -9,6 +16,8 @@ import {useState} from 'react';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../../store/store';
 import ErrorMessage from './ErrorMessage';
+import DeleteIcon from '../../../../RN-UI-LIB/src/Icons/DeleteIcon';
+import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors';
 
 interface IImageUpload {
     questionType: string;
@@ -44,7 +53,7 @@ const ImageUpload: React.FC<IImageUpload> = props => {
     }
     return (
         <View style={[GenericStyles.mt12]}>
-            <Text>
+            <Text style={GenericStyles.mb12}>
                 {question.text}{' '}
                 {question.type === 'mandatory' && (
                     <Text style={GenericStyles.redText}>*</Text>
@@ -69,8 +78,13 @@ const ImageUpload: React.FC<IImageUpload> = props => {
                 />
             ) : (
                 <View>
-                    <Text onPress={() => setImage('')}>delete</Text>
-                    <Image style={styles.image} source={{uri: image}} />
+                    <ImageBackground style={styles.image} source={{uri: image}}>
+                        <Pressable
+                            onPress={() => setImage('')}
+                            style={styles.deleteButton}>
+                            <DeleteIcon />
+                        </Pressable>
+                    </ImageBackground>
                 </View>
             )}
             <ErrorMessage show={error?.[sectionId]?.[questionId]} />
@@ -86,6 +100,19 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         borderColor: 'red',
     },
+    deleteButton: {
+        position: 'absolute',
+        right: 8,
+        top: 8,
+        backgroundColor: COLORS.BACKGROUND.PRIMARY,
+        height: 28,
+        width: 28,
+        borderRadius: 14,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: COLORS.BORDER.PRIMARY,
+    },
 });
 
 export default ImageUpload;

src/components/form/index.tsx

@@ -1,3 +1,4 @@
+import ArrowBackSolidIcon from '../../../RN-UI-LIB/src/Icons/ArrowBackSolidIcon';
 import React, {useState} from 'react';
 import {useForm} from 'react-hook-form';
 import {Pressable, ScrollView, StyleSheet, View} from 'react-native';
@@ -178,11 +179,14 @@ const Widget = (props: any) => {
                     paddingHorizontal: 16,
                 }}>
                 <View style={[GenericStyles.row]}>
-                    <Pressable onPress={()=> navigateToScreen('Home')}>
+                    <Pressable onPress={() => navigateToScreen('Home')}>
                         <CloseIcon color="#ffffff" />
                     </Pressable>
                     <View style={{marginLeft: 16}}>
-                        <Heading type={'h5'} bold style={[GenericStyles.whiteText]}>
+                        <Heading
+                            type={'h5'}
+                            bold
+                            style={[GenericStyles.whiteText]}>
                             Add feedback for Kunal
                         </Heading>
                         <Text light>Communication address</Text>
@@ -229,9 +233,15 @@ const Widget = (props: any) => {
                     GenericStyles.p16,
                     styles.borderTop,
                 ]}>
-                <Button title="Go Back" onPress={goBack} />
                 <Button
-                    title={isLeaf ? 'Submit' : 'next'}
+                    variant={'secondary'}
+                    style={styles.fb45}
+                    title={'Back'}
+                    onPress={goBack}
+                />
+                <Button
+                    style={styles.fb45}
+                    title={isLeaf ? 'Submit' : 'Next'}
                     onPress={
                         isLeaf
                             ? handleSubmit(handleSubmitJourney, onError)
@@ -251,6 +261,9 @@ const styles = StyleSheet.create({
         borderTopColor: COLORS.BORDER.PRIMARY,
         borderTopWidth: 1,
     },
+    fb45: {
+        flexBasis: '45%',
+    },
 });
 
 export default Widget;