React Native Update picker value except a component with ref - reactjs

Question

I'm new to React/Native, I've being breaking my head with this issue. I'm using a library called react-native-image-picker-form which is so good, it let's use your phone camera or you can choose a picture from your album.
Let me show you the code
import React, {Component} from 'react'
import {Text, View, TouchableOpacity, Picker} from 'react-native'
import t from 'tcomb-form-native'
import ImageFactory from 'react-native-image-picker-form';
const Form = t.form.Form;
const DocumentFormStruct = t.struct({
image: t.String
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
form: null,
value: null,
language: 'PERMISO ESPECIAL',
options: {
fields: {
image: {
config: {
title: 'Select image',
options: ['Open camera', 'Select from gallery', 'Cancel'],
// Used on Android to style BottomSheet
style: {
titleFontFamily: 'Roboto'
}
},
error: 'No image provided',
factory: ImageFactory
}
}
},
changed: false
};
}
onPress = () =>{
if (this.form == undefined){
console.log("UNDEFINED");
}else {
console.log(this.form.getValue());
}
}
componentDidMount() {
// var value = this.form.getValue();
// console.log(value);
}
shouldComponentUpdate(nextProps, nextState) {
return false;
}
render() {
return (
<View>
<Form
ref={(ref: any) => {
this.form = ref
}}
type={DocumentFormStruct}
value={this.state.value}
options={this.state.options}
/>
<Picker
selectedValue={this.state.language}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label="PERMISO ESPECIAL"
value="PERMISO ESPECIAL"/>
<Picker.Item label="PERMISO HOJA CLARO" value="HOJA CLARO"/>
<Picker.Item label="COORDINAR CON PROPIETARIO"
value="COORDINA CON PROPIETARIO"/>
</Picker>
{this.state.language == 'HOJA CLARO'
?
<View>
<Text>Hello World!</Text>
</View>
:
null
}
<TouchableOpacity
onPress={this.onPress}
>
<Text> Touch Here </Text>
</TouchableOpacity>
</View>
)
}
}
I know that with shouldcomponentupdate, you can prevent unnecessary re renders. The thing is that this library has to use this ref property that when on state change of any other value the selected picture gets a null. Is there a way or workaround for this. If I use the shouldcomponentupdate then the pickers value wont change but at least I'm getting the current value of the image-picker.

Answer 1

An workaround would be to take advantage of onChange props of Form. (See docs)
<Form
ref={(ref: any) => {
this.form = ref
}}
type={DocumentFormStruct}
value={this.state.value}
options={this.state.options}
onChange={this.onChange}
/>
In your onChange method, save the value in local state.
onChange = (value) => {
this.setState({value});
}
Now, even if it reinitialized as you said, it will get the value from local state and will not become null.