disable touchableOpacity in React native-CodePudding

I have develop an barcode scanner apps, the first module is Scan and get the data from the barcode and it is compulsory to do this if the user wanted to process with another module so I plan to use disabled attribute in touchableOpacity. Home screen will show the data of the user scan by using route.params && route.params.variableNames

example:

So i wish to implement a function that will disable the second module on the home screen which is Start Job if the user did not scan the barcode on login module

code that i have tried

export default function Home ({route}){
  
    
    const navigation = useNavigation()
    const [status,setstatus]=useState(true)
     useEffect(()=>{
     {route.params && route.params.userid !==''? setstatus(false):setstatus(true)}
    },[]);
 
    return(
        <View style={styles.container1}>
          
          <Text style={styles.design1} >UserID</Text>        
          <TextInput
          style={styles.design}
          placeholder={route.params && route.params.userid}
          editable={false}
          />        
           <TouchableOpacity  onPress={()=> navigation.navigate('Scanlogin')} style={styles.design2} >
             <Text style={{color:'darkslateblue',fontSize:20,fontWeight:'bold',textAlign:'center'}}>LOGIN</Text>
             </TouchableOpacity> 
           <Text style={styles.design6}>SCAN YOUR BADGE BEFORE YOU PROCEED TO START JOB</Text>
           <TouchableOpacity disabled={status} onPress={()=> navigation.navigate('Start',{userid:route.params && route.params.userid})} style={styles.design4}>
             <Text style={{color:'darkslateblue',fontSize:20,fontWeight:'bold',textAlign:'center'}}>START JOB</Text>
     
          <StatusBar style="auto"/>
          
        </View>
 
      
    );

     
  
     
}

the start job get disable all the time when i implemented the attribute disabled. hope u guys helps. Thanks

CodePudding user response：

If the useEffect factor is set to empty, the function inside only triggered on mount. You can set variable(s) as the factor(s), so the useEffect will listen on that variable, route.params.userid, and the mount of the element.

     useEffect(()=>{
     {route.params && route.params.userid !==''? setstatus(false):setstatus(true)}
    },[route.params.userid]);

Extra: I don't have the complete code, you may change the factor as keeping the above concept in mind