This `SelectImage` component is another screen for completing the user's profile in

a React Native application. It allows the user to select a profile image from
predefined options or provide a custom image URL.

---

### **1. Import Statements**

```javascript
import {
StyleSheet,
Text,
View,
SafeAreaView,
TextInput,
Image,
Pressable,
} from 'react-native';
import React, {useEffect, useState} from 'react';
import MaterialCommunityIcons from
'react-native-vector-icons/MaterialCommunityIcons';
import {useNavigation} from '@react-navigation/native';
import {
getRegistrationProgress,
saveRegistrationProgress,
} from '../registrationUtils';
```

- **React Native Components:**

- **React Hooks:**
- `useState`: Manages the selected image URL.
- `useEffect`: Executes when the component loads, fetching saved data.

- **Navigation Hook:**
- `useNavigation`: Provides navigation between screens.

- **Utility Functions:**
- `getRegistrationProgress`: Retrieves saved progress for the "Image" step.
- `saveRegistrationProgress`: Saves the user's selected image to local storage or
a database.

- **MaterialCommunityIcons:**
- Adds an icon for the back button.

---

### **2. `SelectImage` Component**

#### **State Initialization**

```javascript
const [image, setImage] = useState();
const images = [
{
id: '0',
image: 'https://cdn-icons-png.flaticon.com/128/16683/16683469.png',
 },
{
id: '0',
image: 'https://cdn-icons-png.flaticon.com/128/16683/16683439.png',
},
{
id: '0',
image: 'https://cdn-icons-png.flaticon.com/128/4202/4202835.png',
},
{
id: '0',
image: 'https://cdn-icons-png.flaticon.com/128/3079/3079652.png',
},
];
```

- **`image`:** Stores the selected image URL.

---

#### **Load Progress on Mount**

```javascript
useEffect(() => {
getRegistrationProgress('Image').then(progressData => {
if (progressData) {
setImage(progressData.image || '');
}
});
}, []);
```

- **Purpose:**
- Retrieves previously saved image data when the component loads.

- **How It Works:**
1. Calls `getRegistrationProgress('Image')` to fetch saved progress.
2. If progress data exists:
- Updates `image` with the saved URL (or an empty string if none).

---

#### **Save and Navigate**

```javascript
const saveImage = () => {
if (image.trim() !== '') {
saveRegistrationProgress('Image', {image});
}
navigation.navigate('PreFinal');
};
```

- **Purpose:**
- Saves the selected image and navigates to the next screen ("PreFinal").

- **Steps:**
1. **Validation:**
 - Ensures `image` is not empty:
```javascript
if (image.trim() !== '')
```
2. **Save Data:**
- Calls `saveRegistrationProgress` with the selected image URL.
3. **Navigate:**
- Moves to the "PreFinal" screen using `navigation.navigate`.

---

### **3. Rendered UI**

#### **Safe Area and Back Button**

```javascript
<SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
<View style={{marginHorizontal: 10}}>
<MaterialCommunityIcons
onPress={() => navigation.goBack()}
name="arrow-left-circle"
size={45}
color="green"
/>
</View>
```

- **SafeAreaView:** Ensures content doesn't overlap with the device's notches or

---

#### **Title and Description**

```javascript
<View style={{marginHorizontal: 10, marginVertical: 15}}>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>
Complete Your Profile
</Text>

<Text style={{marginTop: 10, color: 'gray'}}>

- Prompts the user to complete their profile and select an image.

---

#### **Profile Image Preview**

```javascript
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Image
style={{
width: 100,
 height: 100,
borderRadius: 50,
borderColor: 'green',
borderWidth: 2,
resizeMode: 'cover',
}}
source={{uri: image ? image : images[0]?.image}}
/>
</View>
```

- Displays the currently selected image or a default image from the `images` array.
- Styled as a circular preview with a green border.

---

#### **Image Options**

```javascript
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginVertical: 25,
justifyContent: 'center',
}}>
{images?.map((item, index) => (
<Pressable
onPress={() => setImage(item?.image)}
style={{margin: 10, gap: 10}}
key={index}>
<Image
style={{
width: 70,
height: 70,
borderRadius: 35,
borderColor: image == item?.image ? 'green' : 'transparent',
borderWidth: 2,
resizeMode: 'contain',
}}
source={{uri: item.image}}
/>
</Pressable>
))}
</View>
```

- **Image Options:**
- Maps through the `images` array to render a circular image for each option.
- When an image is pressed:
- Updates the `image` state with the selected image URL.
- Adds a green border to the currently selected image.

---

#### **Custom Image Input**

```javascript
<Text style={{textAlign: 'center', color: 'gray', fontSize: 17}}>OR</Text>
<View style={{marginHorizontal: 20, marginVertical: 20}}>
<Text style={{fontSize: 16, color: 'gray'}}>Enter Image link</Text>
<TextInput
value={image}
onChangeText={setImage}
placeholder="Image link"
style={{
padding: 18,
borderColor: '#D0D0D0',
borderWidth: 1,
borderRadius: 10,
marginTop: 10,
}}
/>
</View>
```

- **Purpose:** Allows the user to manually enter an image URL.

---

#### **Next Button**

```javascript
<Pressable
onPress={saveImage}
style={{
backgroundColor: '#07bc0c',
marginTop: 'auto',
marginBottom: 30,
padding: 15,
marginHorizontal: 10,
borderRadius: 4,
}}>
<Text
style={{
textAlign: 'center',
color: 'white',
fontSize: 15,
fontWeight: '500',
}}>
NEXT
</Text>
</Pressable>
```

- **Purpose:**
- Calls `saveImage` when pressed to save progress and navigate to the next
screen.

- **Styling:**
- A green button with white text and rounded corners.

---

### **4. Summary of Functionality**

1. **Screen Purpose:**
 - Lets the user select a profile image or provide a custom image URL.

2. **Data Persistence:**
- Retrieves saved image data on load.
- Saves the selected or entered image URL when "NEXT" is pressed.

3. **User Experience:**
- Provides a circular preview of the selected image.
- Offers predefined options and a manual input field for flexibility.

4. **Navigation:**
- Includes a back button and navigates to the "PreFinal" screen on completion.

---

Let me know if you'd like to refine or extend any part of this explanation!