CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Kryphon
Kryphon

Reputation: 115

Detect active screen in React Native

Sorry for my bad English. I have built a navigation bar without using Tab Navigation from React Navigation, everything works fine except when I try to set an 'active' icon, I have handled it with states but the state restarts when I navigate to another window and render the bar again navigation.

I think I have complicated it a bit, but I need to capture the active screen to pass it as status and change the color of the icon to 'active' and the others disabled. I have tried with Detect active screen and onDidFocus but I only received information about the transition, I require the name or id of the screen.

I leave my code (this component is exported to each page where I wish to have the navigation bar). Please, the idea is to not use Tab Navigation from 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>
    )
}
}

For the navigation I used createStackNavigator and also

const drawerNavigatorConfig = {
contentComponent: props => <CustomDrawerContentComponent {...props} 
/>,
};

const AppDrawer = createDrawerNavigator(drawerRouteConfig, 
drawerNavigatorConfig);

I do not know if createDrawerNavigator is interfering with something, I read that it generates additional keys. Please help me with this.

Upvotes: 2

Views: 14092

Answers (2)

Gustavo Jose
Gustavo Jose

Reputation: 77

import { useIsFocused } from '@react-navigation/native';

function Profile() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

check documentation https://reactnavigation.org/docs/use-is-focused/

Upvotes: 8

Haider Ali
Haider Ali

Reputation: 1285

You can use this inViewPort library for checking the view port of the user. This is how you can user the library

render(){
    <InViewPort onChange={(isVisible) => this.checkVisible(isVisible)}>
      <View style={{flex: 1, height: 200, backgroundColor: 'blue'}}>
        <Text style={{color: 'white'}}>View is visible? {this.state.visible </Text>
      </View>
    </InViewPort>
}

Upvotes: 1

Related Questions