0

I`m developing an APP for a championship and I have a HomeScreen where the Manager should LOGIN so he/she can update the results.

My problems is: I have a Drawer Navigator and a static password. How can I get the prop isAdmin to the other screens??

Situation Example: Screen named 'Points' has a Text Input which enabled status will depend on a function that evaluates if isAdmin= true.

HomeScreen:

export default function Login(){
    const [senha, setSenha] = useState('');
    var isAdmin = false;


    function passCheck(pass){
        if(pass == 'Adminlaje'){
            isAdmin=true;
            alert('Signed In !')
        }
        else
             alert('Wrong password !');
        
    }
    
    return(
         <SafeAreaView>
        
                <TextInput
                value = {senha}
                onChangeText = { (senha) => setSenha(senha) }
                />
                
                <TouchableOpacity onPress = {() => passCheck(senha)}>
                    <Text>Entrar</Text>
                </TouchableOpacity>

                
        </SafeAreaView>
    );
}

My Drawer:

const Screens = ({navigation}) =>{
  return(
    <Stack.Navigator>
    
      <Stack.Screen name = 'HomeScreen' component ={Login}
        options={{
          headerLeft: () =>(
            <TouchableOpacity style = {styles.button} onPress = {()=> navigation.toggleDrawer()}>
              <Entypo name="menu" size={35} color="black" />
            </TouchableOpacity>
          )
        }}>
      </Stack.Screen>
      
      <Stack.Screen name = 'Points' component ={Points}
        options={{
          headerLeft: () => (
            <TouchableOpacity style = {styles.button} onPress = {()=> navigation.toggleDrawer()}>
              <Entypo name="menu" size={35} color="black" />
          </TouchableOpacity>
          ),
        }}
      >
      </Stack.Screen>
     </Stack.Navigator>
  );
};

const DrawerContent = (props) => {
  return(
    <DrawerContentScrollView {...props}>
      <SafeAreaView>
        <DrawerItem
          label='HomeScreen'
          onPress = {() => props.navigation.navigate('Login')}
       
        />
        <DrawerItem
          label='Points'
          onPress = {() => props.navigation.navigate('Points')}
        />
     </SafeAreaView>
  </DrawerContentScrollView>
  )
}

export default () => {
  return(
      <Drawer.Navigator
       initialRouteName = 'Login'
       drawerContent={props => <DrawerContent {...props}/>}
    >
      <Drawer.Screen name = 'Screens' component ={Screens}/>
    </Drawer.Navigator>
  );
};

1 Answers1

0

The answer might depend on what versions of react-navigation and react-navigation-drawer you are using. On a project using "react-navigation": "^4.0.10", and "react-navigation-drawer": "^2.3.3" this is what works for me:

 .............

 import { NavigationEvents, NavigationActions } from 'react-navigation';

 export default class HomeScreen extends Component {

 ..........

    constructor(props){
    super(props)

            this.state = {language: 'English', menuOpen: false};

     }

  ...................

  render(){

  const { navigation } = this.props;

  const setParamsAction = NavigationActions.setParams({
  params: { isAdmin: this.state.isAdmin },
  key: 'PointsScreen',
  });

  const setParamsTwo = NavigationActions.setParams({
  params: { isAdmin: this.state.isAdmin },
  key: 'OtherScreen',
  });

  return(
   <View style={styles.container}>
    <NavigationEvents
    onDidBlur={payload => {this.setState({menuOpen: true})}}
    onWillFocus={payload => {this.setState({menuOpen: false});    
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => 
     {

      this.props.navigation.dispatch(setParamsAction);
      this.props.navigation.dispatch(setParamsTwo);
      this.props.navigation.navigate('PointsScreen');
      return true;
    })}}
   />

In this example I'm sending the info to other screens when I hit backhandler, but it works the same way for any other navigation event. So for example if you want to add this to your drawer open button you would just substitute this.props.navigation.openDrawer(); for this.props.navigation.navigate('PointsScreen');.

In other screens I have:

 .............
 render(){

 const { navigation } = this.props;
 const isAdmin = navigation.getParam('isAdmin') || '';

In the drawer screen I have:

 render(){

 const { navigation } = this.props;
 const pointsProps = navigation.getChildNavigation('PointsScreen');
 const isAdmin = pointsProps.getParam('isAdmin') || "";
Charlotte_Anne
  • 344
  • 5
  • 17
  • hi, Thanks for your answer! I'm using Navigation 5, but I might have get the point of what you're doing... will try something like it! Also i'm not using a class, so gonna need to use react Hooks – Vitor Bernstorff Clemes Aug 06 '20 at 23:34