I have created pin code lock screen using react native. you can see the code with emulator here - https://snack.expo.dev/@codewithbanchi/pincode

default pin is 1234 and it is assigned to an array. Then I take the inputs from user and assign it to an another array. Then I wrote this for checking if the user entered pin is equal to the default pin.

if(passcode===defaultCode){
        alert("Login sucssesfull");
      }else{
        alert("Login failed");
      }

but each time user touched on a button, alert comes up "Lofin failed'' What went wrong here I am defining my complete code here and also You can go to above expo link to watch it with the emulator.

import React from "react";
import { Alert, StyleSheet, Text, Touchable, TouchableHighlight, TouchableOpacity,useState, View } from "react-native";
import Loading from './Loading';

const Buttons = () => {

    const defaultCode = React.useState(['1','2','3','4']) 
    const [passcode , setPasscode] = React.useState(['','','',''])
    const presControl = num =>{
      let tempCode = [...passcode];
      for(var i = 0; i<tempCode.length;i  ){
        if(tempCode[i] == ''){
             tempCode[i] = num;
               break;
        }else{
               continue;
        }
      }
       
      setPasscode(tempCode);
    }
        if(passcode===defaultCode){
            alert("Login sucssesfull");
          }else{
            alert("Login failed");
          }
      
const clearPress = () =>{
      let tempCode = [...passcode]
      for(var i = tempCode.length-1;i>=0;i--){
        if(tempCode[i] != ''){
          tempCode[i]='';
          break;
        }else{
          continue;
        }
      }
      setPasscode(tempCode);
    };
    
    let nopad = [
      {id:1},
      {id:2},
      {id:3},
      {id:4},
      {id:5},
      {id:6},
      {id:7},
      {id:8},
      {id:9},
      {id:0}
    ]; 
    return(
        <View >
        <View style={styles.boxcontaner} >
        {passcode.map(p =>{
          return  <View style={p !=''? styles.box2:styles.box1}></View>
        })}       
        </View>
            <View style={styles.noBox}>
            {nopad.map(num =>{
              return(
                        <TouchableOpacity style={styles.box}
                           key={num.id}
                           onPress={()=>presControl(num.id)} >
                            <Text style={styles.title}>{num.id}</Text>
                        </TouchableOpacity>        
              );      
              
            })} 
            </View>
            <TouchableOpacity onPress={clearPress} style={styles.deleter} >
                        <Text style={styles.title}> x
                        </Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
 
  title: {
   fontSize:40,
   justifyContent:'center',
   marginTop:5,
   
  },
    box1: {
    width:13,
    height:13,
    borderRadius:13,
    borderWidth:1,
    borderColor:'gray'
  },
  box2: {
    width:13,
    height:13,
    borderRadius:13,
    borderWidth:1,
    borderColor:'gray',
    backgroundColor:'red'
  },
  box: {
    width:70,
    height:70,
    borderRadius:70,
    borderWidth:1,
    borderColor:'green',
    alignItems:'center',
    backgroundColor:'#F2F3F4',
    justifyContent:'center',

  },

  boxcontaner:{
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
    marginLeft:40,
    marginRight:40,
    marginTop:10,
  },

  noBox:{
    alignItems:'center',
    justifyContent:'center',
    marginTop:100,
    flexDirection:'row',
    flexWrap:'wrap',
    marginLeft:20,
    width:270,
    height:200,
  },

  deleter:{
    width:70,
    height:70,
    borderRadius:70,
    borderWidth:1,
    borderColor:'green',
    alignItems:'center',
    backgroundColor:'#F2F3F4',
    marginLeft:190,
    marginTop:10
  }

});

export default Buttons;

CodePudding user response：

arrays are reference types , read this link please - https://masteringjs.io/tutorials/fundamentals/compare-arrays , you can use this code :

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [1, 2, 3];

function arrayEquals(a, b) {
  return Array.isArray(a) &&
    Array.isArray(b) &&
    a.length === b.length &&
    a.every((val, index) => val === b[index]);
}

arrayEquals(a, b); // false
arrayEquals(a, c); // true

https://snack.expo.dev/lmKFsz5J6 finished example