How do I prevent data in all other component views on a page from being cleared(rerendering) whenever I start to enter data in other view components? - react-native

Question

On a gallery page, I have a text input field that allows the user to describe the kind of pictures and submit or share with a friend.
When I start to type in the text input field, the images in the gallery are cleared(the page re-renders) and all other input fields or component holding data are cleared.
I need help, how to prevent all data from other components from getting cleared whenever I start to enter data in view component on the page.
I am using functional components in my react native app.
export default function EvidenceSubmission ({route, navigation,navigation:{setParams}}){
//Incidence
const [state, setState]= useState({
selectedIncidence: 'select incidence',
photos:[],
});
/**
*clears images in async storage
*/
const clearStorage= async() =>{
try{
await AsyncStorage.clear();
} catch(exception){
console.log('error clearing items');
}
console.log('items cleared (Evidence Page)');
}
useEffect(()=> {
/*Get images from async storage*/
const getData = async () => {
try {
const value = await AsyncStorage.getItem('photos')
if(value !==null){
setState({
photos: (JSON.parse(value)).reverse(),
})
}
}catch(e){
console.log('error with async getData');
}
}
getData();
}, []);
/navigates to photo preview page/
const navigateToPhotoPreview = (path) =>{
navigation.navigate('PhotoPreviewer',
{
transferredImageItem: path,
})
}
return(
<SafeAreaView style= {globalStyle.MainContainer}>
<StatusBar barStyle="light-content" backgroundColor="#174060"/>
<View flexDirection='column' flex={0.456} marginTop={30}
marginRight ={5}
marginLeft ={5}
borderWidth={0.5}
borderRadius={3}
borderColor='#7E7E7E'>
<View>
<FlatList
data= {state.photos}
keyExtractor={(item, index)=> index}
renderItem={ ({ item}) => (
<TouchableOpacity onPress={() => navigateToPhotoPreview(item) }>
<Image
style={{ width:70, height:75,margin:0.5, resizeMode:'cover'}}
source = {{ uri: "file://"+ item}}
// source = {{ uri: item}}
//source = {{ uri: item.node.image.uri}}
/>
</TouchableOpacity>
)
}
numColumns = {5}
/>
</View>
</View>
<TouchableOpacity style={styles.addPhotoButton}
onPress={()=>{navigation.goBack()}}>
<Add
name={'add'}
size={30}
color="white"
/>
</TouchableOpacity>
<View style={{justifyContent: 'center', margin:5 ,flex: 1.2}}>
<View style={{borderWidth: 1,
borderColor:'#C4C4C4',
borderRadius:5,
width: 270,
marginLeft: 5,
marginBottom: 0,
marginTop: 15}}>
<Picker
selectedValue ={state.selectedIncidence}
style={{height:45, width: 270,
fontFamily:'roboto',
fontStyle:'normal',
fontWeight:'normal'}}
onValueChange={(itemValue, itemIndex) =>
setState({selectedIncidence: itemValue})
}
>
<Picker.Item label="Non-Compliance" value="Non-Compliance"/>
<Picker.Item label="Logistics" value="Logistics"/>
<Picker.Item label="Harassment" value="Harassment"/>
</Picker>
</View>
<View marginBottom={0} marginLeft={5} marginTop={15}>
<Text style={styles.textStyle}>
Description
</Text>
</View>
<View style={{flexDirection:'row'}} >
<View>
<TextInput
style={{height: 70,
width: 270,
borderRadius: 8,
borderColor:'#C4C4C4',
borderWidth: 1, marginLeft: 5}}
onChangeText={(text) => setState({text})}
value={state.text}
multiline={true}
enablesReturnKeyAutomatically={true}>
</TextInput>
</View>
<TouchableOpacity style={styles.microphoneButton}>
<Microphone name="microphone"
size={21}
color='white'
/>
</TouchableOpacity>
</View>
<View marginBottom={0} marginLeft={0} marginTop={15} marginBottom={15} >
<View style={{flexDirection: 'row'}}>
<Text style={{margin:10,marginRight:20,
fontFamily:'roboto', fontSize: 14,
fontWeight:'bold',
}}>
Submit as
</Text>
<View style={styles.radioCircumference}>
<TouchableOpacity style={styles.radioButton}></TouchableOpacity>
</View>
<Text style={{marginLeft: 5, marginRight: 0, marginTop: 10}}>anonymous</Text>
<Text style={{marginLeft: 10, marginRight: 10, marginTop: 10, fontWeight:'bold'}}> or </Text>
<View style={styles.radioCircumference}>
<TouchableOpacity style={styles.radioButton}></TouchableOpacity>
</View>
<Text style={{marginTop: 10,marginLeft: 5, marginRight: 0}}>Sign In</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={()=>clearStorage()}
>
<Text style={{color:'white',
alignSelf:'center',
fontSize: 18,
}}>
Next
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}

Answer 1

Ok, so the first issue here is that you are mutating the state of setState. You are using the same state for your TextInput and Picker components. There are two ways to go about this.
1.Using the same state as u are doing.
const [formState, setFormState] = useState({
selectedIncidence: 'select incidence',
text: "",
photos: [],
});
In this case, when your onChangeText and onValueChange will be
onValueChange = {
(itemValue, itemIndex) =>
setFormState(formState => ({
...formState,
selectedIncidence: itemValue
}))
}
onChangeText = {
(text) => setFormState(formState => ({
...formState,
text
}))
}
2.The second approach is to use different states for each field.
const [selectedIncidence, setSelectedIncidence] = useState('select incidence');
const [text, setText] = useState("");
const [photos, setPhotos] = useState([]);
In this case, when your onChangeText and onValueChange will be
onValueChange = {
(itemValue, itemIndex) =>
setSelectedIncidence(itemValue)
}
onChangeText = {
(text) => setText(text)
}
I hope you find this helpful.