Android back button handling react native

Question

I have a dropdown on my screen A with its default state set. As I select new value from dropdown, the state gets update and moves to new screen with data fetched on basis of new state updated in last screen. Now in my new screen, I get back button in screen header, and also have my android device's back button.

When I click either the android back button or header back button, it goes back to previous screen (default functionality). What I want to add it to that when it goes back to previous screen, it resets the state value of dropdown. The dropdown options should come back to original default option.

class DropdownSales extends Component {

    constructor(props) 
    {
        super(props)

        this.state = {

            oem : 'all',
            oem_type : [],
            pickerSelection: 'OEM Wise',
            pickerDisplayed: false,

        }
    }

fetch_default = () => 
    {           
        var headers = {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Headers': 'x-access-token',
            'x-access-token': this.state.id
        }

        axios.post('http://**********************', {
            oem: this.state.oem
        }, {headers: headers})
        .then((res) => 
        {

            let TotalSales = res.data.data[0].TotalSales;

            })
        .catch(err => {
            console.log(err)
        });
    }


    setPickerValue = (newValue) => 
    {

        this.props.navigation.navigate('OemLevelTwo', {value: newValue});
        this.setState({
          pickerSelection: newValue
        });

        this.togglePicker();           
    }

      togglePicker = () => {
        this.setState({
          pickerDisplayed: !this.state.pickerDisplayed
        })
      }


render() {
return (
            <View>
                <View style={{flexDirection:'row', justifyContent:'space-between'}}>

                <TouchableOpacity onPress={() => this.togglePicker()} style={{flexDirection:'row', marginTop:10, marginLeft: 10}}>

                    <Text>
                        { this.state.pickerSelection }
                    </Text>
                    <Icon name="arrow-drop-down" color='#000' size={20}/>
                </TouchableOpacity>
                    <Modal 
                        visible={this.state.pickerDisplayed} 
                        animationType={"fade"} 
                        transparent={true}
                        onRequestClose={ () => {
                        this.setState({
                            pickerDisplayed: !this.state.pickerDisplayed
                        })
                    }}>
                        <View style={{ margin: 15, padding: 20,
                            backgroundColor: '#efefef',
                            bottom: 60,
                            alignItems: 'center',
                            position: 'absolute' }}>

                            { oem_type.map((value, index) => {
                            return <TouchableOpacity key={index} onPress={() => this.setPickerValue(value)} style={{ paddingTop: 4, paddingBottom: 4 }}>
                                <Text>{ value }</Text>
                                </TouchableOpacity>
                            })}

                        </View>
                    </Modal>                       
                </View>
            )
    }
}

For now my initial placeholder text in modal dropdown is 'OEM Wise' .

When I select some value from dropdown, the state pickerSelection shows the new option selected; for example say, 'model A '. I want it to show 'OEM Wise' in pickerSelection when I come back from new screen.

Any help appreciated.

Answer 1

You can subscribe to updates to the navigation life-cycle by using addListener . And your screen will have this in addition. The rest should remain unchanged.

constructor(props) {
    super(props)

    /* Your already existing code */

    this.didFocusSubscription = this.props.navigation.addListener('didFocus', () => {
        this.setState({ /* Your new state */ })
    });
}

componentWillUnmount() {
    this.didFocusSubscription.remove();
}

You can read more about it here :