Problem to detect active screen in React Native

I have currently built a navigation bar using react-native-navigation, with the createStackNavigator function. The problem is that I need to change the color of the icon image when the user navigates to that screen. I tried changing the state when detecting an onPress, but the state is deleted when navigating to another page. The solution I think is to detect the active page and save it in the state. But how is this done? I have made some attempts but it just gives me notification of the screen change, but it does not give me information about the change. This occurs with addListener What would be the appropriate way to get information from the active screen?

I need help in this. This is the code of my navigation bar, the idea is to not use the tab navigation of react-native-navigation.

export default class Navbar extends Component {

/** Navigation functions by clicking on the icon (image) */
_onPressHome() {
    this.props.navigation.navigate('Main');
}

_onPressSearch() {
this.props.navigation.navigate('Main');
}

render() {
    const { height, width } = Dimensions.get('window');
    return (
        <View style={{ flexDirection: 'row', height: height * .1, justifyContent: 'space-between', padding: height * .02 }}>
            /** Icon section go Home screen */
            <View style={{ height: height * .06, alignItems: 'center' }}>
                <TouchableOpacity
                    onPress={() => this._onPressHome()}
                    style={styles.iconStyle}>
                    <Image
                        source={HOME_ICON}
                        style={{ width: height * .04, height: height * .04, }} />
                    <Text style={[styles.footerText, { color: this.state.colorA }]}>Inicio</Text>
                </TouchableOpacity>
            </View>
            /** Icon section go Search screen */
            <View style={{ height: height * .06, alignItems: 'center' }} >
                <TouchableOpacity
                    onPress={() => this._onPressSearch()}
                    style={styles.iconStyle}>
                    <Image
                        source={SEARCH_ICON}
                        style={{ width: height * .04, height: height * .04, opacity: .6 }} />
                    <Text style={[styles.footerText, { color: this.state.colorB }]}>Inicio</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}
}

Any ideas on how to do it?