How do I reset the selected value of a Picker in React Native - react-native

Question

I have a custom component class that displays a select list using React Native Picker in an app. This component is imported by one of the screens that I have created using createBottomTabNavigator() of react navigation.
The screen that uses this class has a form. The user fills the form and on submission the user is directed to another screen. What I am struggling at is that when the user returns to the same form screen instead of Picker list been resetted to its default value I am seeing the list with the previous selected value. How do I reset it when the form is submitted from the class
the Picker list component is as follows
import React from "react";
import {View, Text, StyleSheet, Picker} from "react-native";
import PropTypes from "prop-types";
import {connect} from "react-redux";
import {savePostJobType} from "../reducer.js";
//import store from "../store.js";
class SelectList extends React.Component {
static propTypes = {
selectionMesg : PropTypes.string,
data : PropTypes.array,
}
state = {
pickerColorFlag : "#C7C7CD",
val : "",
}
componentDidMount() {
console.log("List Mounted")
}
render(){
return(
<Picker
selectedValue={this.state.val}
style = {styles.picker}
onValueChange={(itemValue, itemIndex) => {
//this.removeErrorMsg()
if(itemValue !== "0")
{
/*POTENTIAL BUG:The this.state.val shows the value of previous selected value in here*/
this.setState({
val: itemValue,
pickerColorFlag : "black"})
/*SAVE THE SELECTED VALUE IN STORE
**THIS IS WHAT YOU NEED TO EDIT IF REUSING THIS COMPONENT** */
this.props.saveJobType(itemValue)
}
else
{
this.setState({pickerColorFlag : "#C7C7CD"})
}
}
}>
<Picker.Item label={this.props.selectionMesg} value="0" color = "#C7C7CD" />
{
this.props.data.map((value, key) =>(
<Picker.Item key = {key} label={value} value= {value} />
))
}
</Picker>
)
}
}
const styles = StyleSheet.create({
container : {
flex : 1,
justifyContent : "center",
alignItems : "center",
backgroundColor : "blue",
},
picker : {
width: "60%",
marginTop : "5%",
},
})
// const test = (state) => ({
// selection : state.postJobData.type
// })
export default connect(null, {saveJobType : savePostJobType})(SelectList)
I am importing this component to a screen class as follows
import SelectList from "./customComponent/selectList.js";
class ScrrenTab extends React.Component {
render(){
<SelectList
selectionMesg = "Select Job Type"
data = {["electrician", "plumber", "carpenter", "painter"]}/>
<Button title = "Submit"/>
}
}

Answer 1

I was trying to update the list component from the screen component but all I had to do was to send the navigation prop to the list component from the screen component and add a listener to it and make changes when the list was in focus
in screen component
<SelectList
navigation={this.props.navigation}
selectionMesg = "Select Job Type"
data = {["electrician", "plumber", "carpenter", "painter"]}/>
and in the SelectList i had to just add these methods
componentDidMount() {
this._unsubscribe = this.props.navigation.addListener('focus', () => {
console.log("List Mounted")
this.setState({val : ""})
});
}
componentWillUnmount() {
this._unsubscribe();
}