我如何将以下代码 class 转换为 function 组件

Question

here I have imported some other files from my store folder this screen is for pin authentication purpose.

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import AppStore from "../../stores/AppStore";
import Theme from "../../utils/Theme";
import { Observer } from "mobx-react";
import Iconpack from "../../utils/Iconpack";
import FastImage from "react-native-fast-image";
import { Screen } from "../CommonComponent/Screen";
import PinAuthenticationStore from "../../stores/PinAuthenticationStore";
import Toast from "react-native-simple-toast";
import Header from "../CommonComponent/Header";

const hRem = AppStore.screenHeight / 812;
const wRem = AppStore.screenWidth / 375;

class PinAuthentication extends Component {
  constructor(props) {
    super(props);
    this.state = {
      passcode: ["", "", "", ""],
      pin: "",
      confirmThePin: false,
      reconfirmPin: "",
    };
  }

  showToast = () => {
    // ToastAndroid.show("Pick Enter Valid Pin !", ToastAndroid.SHORT);
    Toast.show("Please Enter Valid Pin !", Toast.LONG);
  };

  onPressNumber = (num) => {
    let tempCode = this.state.passcode;
    for (var i = 0; i < tempCode.length; i++) {
      if (tempCode[i] == "") {
        tempCode[i] = num;
        if (this.state.confirmThePin) {
          this.setState({ reconfirmPin: this.state.reconfirmPin + num });
        } else {
          this.setState({ pin: this.state.pin + num });
        }
        break;
      } else {
        continue;
      }
    }
    this.setState({ passcode: tempCode });
  };

  onPressCancel = () => {
    let tempCode = this.state.passcode;
    for (var i = tempCode.length - 1; i >= 0; i--) {
      if (tempCode[i] != "") {
        tempCode[i] = "";
        this.setState({
          pin: this.state.pin.slice(0, i),
          reconfirmPin: this.state.reconfirmPin.slice(0, i),
        });
        break;
      } else {
        continue;
      }
    }
    // if(tempCode.length==0){
    console.log("cancel", tempCode);
    // }
    this.setState({ passcode: tempCode });
  };

  reset = () => {
    this.setState({
      passcode: ["", "", "", ""],
      confirmThePin: false,
      reconfirmPin: "",
      pin: "",
    });
  };

  confirmPin = () => {
    if (AppStore.idExist) {
      if (this.state.pin == AppStore.userPin) {
        this.props.navigation.navigate("MainAdd");
        this.reset();
        // AppStore.setFields("isNewUserPin", true);
      } else {
        this.showToast();
        this.setState({ passcode: ["", "", "", ""], pin: "" });
        // AppStore.setFields("isNewUserPin", false);
      }
    } else if (this.state.pin == this.state.reconfirmPin) {
      // console.log("new user");
      PinAuthenticationStore.setPinForNewUser(this.state.reconfirmPin);
      // PinAuthenticationStore.setUserPin(this.state.reconfirmPin)
      PinAuthenticationStore.setStringIsLoggedIn("true");
      this.reset();
      this.props.navigation.navigate("MainAdd");
      // AppStore.setFields("isNewUserPin", true);
    } else if (
      this.state.pin != this.state.reconfirmPin &&
      this.state.reconfirmPin.length > 0
    ) {
      this.setState({
        passcode: ["", "", "", ""],
        confirmThePin: false,
        reconfirmPin: "",
        pin: "",
      });
      this.showToast();
      // AppStore.setFields("isNewUserPin", false);
    } else {
      if (this.state.pin.length == 4 && !this.state.confirmThePin) {
        this.setState({ passcode: ["", "", "", ""], confirmThePin: true });
      } else if (this.state.reconfirmPin.length == 4) {
        this.setState({ passcode: ["", "", "", ""] });
      }
      // AppStore.setFields("isNewUserPin", false);
    }

    console.log("confirm pin", this.state.pin, AppStore.userPin);
  };

  render() {
    let numbers = [
      { id: 1 },
      { id: 2 },
      { id: 3 },
      { id: 4 },
      { id: 5 },
      { id: 6 },
      { id: 7 },
      { id: 8 },
      { id: 9 },
      {
        id: 10,
      },
      { id: 0 },
      {
        id: 11,
      },
    ];
    return (
      <Observer>
        {() => (
          <>
            {/* <Screen
              style={{ flex: 1 }}
              statusBar={"light-content"}
              variant={true}
              showMenu={false}
              onNavigate={this.props.navigation}
            > */}
            <FastImage
              style={styles.container}
              source={Iconpack.PIN_SCREEN_BG}
              resizeMode={FastImage.resizeMode.cover}
            />
            <Header
              headerText="Set new PIN"
              onPress={() => {
                this.props.navigation.navigate("WalkThrough");
              }}
            />
            <View>
              <Text style={styles.pinConfirmationText}>
                {AppStore.idExist
                  ? `Enter current PIN`
                  : this.state.confirmThePin
                  ? `Re-confirm PIN`
                  : `Enter new PIN`}
              </Text>
            </View>
            <View style={styles.codeContainer}>
              {this.state.passcode.map((p, i) => {
                console.log("xxxx", p);
                let style = p != "" ? styles.inputBox1 : styles.inputBox;
                let passMask = p != "" ? "*" : "";
                return (
                  <View style={style} key={i}>
                    <Text style={styles.inputText}>{passMask}</Text>
                  </View>
                );
              })}
            </View>

            <View style={styles.mod0}>
              <View style={styles.numberContainer}>
                {numbers.map((num, numb) => {
                  return (
                    <>
                      {num.id == 10 ? (
                        <TouchableOpacity
                          key={num.id.toString()}
                          onPress={() => this.onPressCancel()}
                          style={
                            AppStore.isiOS ? styles.number : styles.number2
                          }
                        >
                          <Image
                            style={styles.img}
                            source={Iconpack.PIN_CANCEL}
                          />
                        </TouchableOpacity>
                      ) : num.id == 11 ? (
                        <TouchableOpacity
                          key={num.id.toString()}
                          onPress={() => {
                            this.confirmPin();
                          }}
                          style={
                            AppStore.isiOS ? styles.number : styles.number2
                          }
                        >
                          <Image
                            style={styles.img}
                            source={Iconpack.PIN_CHECK}
                          />
                        </TouchableOpacity>
                      ) : (
                        <TouchableOpacity
                          key={num.id.toString()}
                          onPress={() => this.onPressNumber(num.id.toString())}
                          style={
                            AppStore.isiOS ? styles.number : styles.number2
                          }
                        >
                          <Text style={styles.numberText}>
                            {num.id.toString()}
                          </Text>
                        </TouchableOpacity>
                      )}
                    </>
                  );
                })}
              </View>
            </View>
            {/* </Screen> */}
          </>
        )}
      </Observer>
    );
  }
}

export default PinAuthentication;

const styles = StyleSheet.create({
  mod0: { alignItems: "center", justifyContent: "center" },
  container: {
    flex: 1,
    position: "absolute",
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    backgroundColor: "#021831",
  },
  pinConfirmationText: {
    textAlign: "center",
    marginTop: hRem * 44,
    color: "white",
    ...Theme.encodeSansMed3,
    lineHeight: hRem * 19.07,
  },
  borderStyleBase: {
    width: 30,
    height: 45,
  },

  borderStyleHighLighted: {
    borderColor: "#707070",
  },

  underlineStyleBase: {
    width: wRem * 62,
    height: 45,
    borderWidth: 0,
    borderBottomWidth: 1,
  },

  underlineStyleHighLighted: {
    borderColor: "#FFFFFF",
  },
  number: {
    borderRadius:
      Math.round(
        Dimensions.get("window").width + Dimensions.get("window").height
      ) / 2,
    width: Dimensions.get("window").width * 0.2,
    height: Dimensions.get("window").width * 0.2,
    backgroundColor: "#000000",
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: wRem * 12,
    marginVertical: hRem * 9,
  },
  number2: {
    borderRadius:
      Math.round(
        Dimensions.get("window").width + Dimensions.get("window").height
      ) / 2,
    width: Dimensions.get("window").width * 0.2,
    height: Dimensions.get("window").width * 0.2,
    backgroundColor: "#000000",
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: wRem * 12,
    marginVertical: hRem * 9,
    shadowColor: "rgba(27, 100, 206, 0.8)",
    shadowOffset: {
      width: 1,
      height: 5,
    },
    shadowOpacity: 1.5,
    shadowRadius: 5,

    elevation: 10,
  },
  numberContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: hRem * 99,
    alignItems: "center",
    justifyContent: "center",
    shadowColor: Theme.shadow_Button,
    shadowOffset: {
      width: 1,
      height: 1,
    },
    shadowOpacity: 1.5,
    shadowRadius: 5,

    elevation: 3,
  },

  numberText: {
    ...Theme.encodeSansMed4,
    // lineHeight: hRem * 16,
    // position: "absolute",
    textAlign: "center",
    color: Theme.white_color,
  },
  codeContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginHorizontal: wRem * 49,
    marginTop: hRem * 50,
  },
  inputBox: {
    width: wRem * 62,
    borderBottomWidth: 1,
    borderColor: "#707070",
    alignItems: "center",
    justifyContent: "space-between",
  },
  inputBox1: {
    width: wRem * 62,
    borderBottomWidth: 1,
    borderColor: "#FFFFFF",
    alignItems: "center",
    justifyContent: "space-between",
  },
  inputText: {
    color: "white",
    ...Theme.encodeSansMed3,
    marginBottom: hRem * 21,
  },
  img: {
    width: wRem * 30,
    height: hRem * 22,
  },
});

here I have uploaded my whole code which is needed to be converted in class component to function component, sry for the whole code I am new to the react-native pls guide me and help me out, thanks in advance

Answer 1

In order to convert class components to functional components, you need to detatch class and prop behaviours and instead use "hooks".

I will give you some examples rather than manually change your entire solution;

PinAuthentication = (props) => {

const [passcode, setPasscode] = useState('')

const showToast = () => Toast.show('Please enter a valid pin', Toast.LONG)

return (
    <Observer>
    {() => (
        <>
            <FastImage ... />
            ...
        </>
    )}
  )
}

So if you want to keep using state, use UseState. Fully declare your methods with either "function" or "const". And remove all instances of this , just use the scoped variable name.

Answer 2

Take a look at the Functional Component documentation .

• Wherever you're using this.state you want to convert it to React.useState .
• You don't need the render as you just need to return a renderable object (jsx/ null / React.Fragment ).
• Your functions are pretty much already there, just add const and reference them without the this prefix.

Then you'll be 90% of the way there.

Answer 3

import React, { Component, useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import AppStore from "../../stores/AppStore";
import Theme from "../../utils/Theme";
import { Observer } from "mobx-react";
import Iconpack from "../../utils/Iconpack";
import FastImage from "react-native-fast-image";
import { Screen } from "../CommonComponent/Screen";
import PinAuthenticationStore from "../../stores/PinAuthenticationStore";
import Toast from "react-native-simple-toast";
import Header from "../CommonComponent/Header";

const hRem = AppStore.screenHeight / 812;
const wRem = AppStore.screenWidth / 375;

function PinAuthentication(props) {
  const [state, setState] = useState({
    passcode: ["", "", "", ""],
    pin: "",
    confirmThePin: false,
    reconfirmPin: "",
  });

  const showToast = () => {
    // ToastAndroid.show("Pick Enter Valid Pin !", ToastAndroid.SHORT);
    Toast.show("Please Enter Valid Pin !", Toast.LONG);
  };

  const onPressNumber = (num) => {
    let tempCode = state.passcode;
    for (var i = 0; i < tempCode.length; i++) {
      if (tempCode[i] == "") {
        tempCode[i] = num;
        if (state.confirmThePin) {
          setState({ ...state, reconfirmPin: state.reconfirmPin + num });
        } else {
          setState({ ...state, pin: state.pin + num });
        }
        break;
      } else {
        continue;
      }
    }
    setState({ ...state, passcode: tempCode });
  };

  const onPressCancel = () => {
    let tempCode = state.passcode;
    for (var i = tempCode.length - 1; i >= 0; i--) {
      if (tempCode[i] != "") {
        tempCode[i] = "";
        setState({
          ...state,
          pin: state.pin.slice(0, i),
          reconfirmPin: state.reconfirmPin.slice(0, i),
        });
        break;
      } else {
        continue;
      }
    }
    // if(tempCode.length==0){
    console.log("cancel", tempCode);
    // }
    setState({ ...state, passcode: tempCode });
  };

  const reset = () => {
    setState({
      passcode: ["", "", "", ""],
      confirmThePin: false,
      reconfirmPin: "",
      pin: "",
    });
  };

  const confirmPin = () => {
    if (AppStore.idExist) {
      if (state.pin == AppStore.userPin) {
        props.navigation.navigate("MainAdd");
        reset();
        // AppStore.setFields("isNewUserPin", true);
      } else {
        showToast();
        setState({ ...state, passcode: ["", "", "", ""], pin: "" });
        // AppStore.setFields("isNewUserPin", false);
      }
    } else if (state.pin == state.reconfirmPin) {
      // console.log("new user");
      PinAuthenticationStore.setPinForNewUser(state.reconfirmPin);
      // PinAuthenticationStore.setUserPin(this.state.reconfirmPin)
      PinAuthenticationStore.setStringIsLoggedIn("true");
      reset();
      props.navigation.navigate("MainAdd");
      // AppStore.setFields("isNewUserPin", true);
    } else if (
      state.pin != state.reconfirmPin &&
      state.reconfirmPin.length > 0
    ) {
      setState({
        passcode: ["", "", "", ""],
        confirmThePin: false,
        reconfirmPin: "",
        pin: "",
      });
      showToast();
      // AppStore.setFields("isNewUserPin", false);
    } else {
      if (state.pin.length == 4 && !state.confirmThePin) {
        setState({ ...state, passcode: ["", "", "", ""], confirmThePin: true });
      } else if (state.reconfirmPin.length == 4) {
        setState({ ...state, passcode: ["", "", "", ""] });
      }
      // AppStore.setFields("isNewUserPin", false);
    }

    console.log("confirm pin", state.pin, AppStore.userPin);
  };

  let numbers = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 },
    {
      id: 10,
    },
    { id: 0 },
    {
      id: 11,
    },
  ];

  return (
    <Observer>
      {() => (
        <>
          {/* <Screen
              style={{ flex: 1 }}
              statusBar={"light-content"}
              variant={true}
              showMenu={false}
              onNavigate={this.props.navigation}
            > */}
          <FastImage
            style={styles.container}
            source={Iconpack.PIN_SCREEN_BG}
            resizeMode={FastImage.resizeMode.cover}
          />
          <Header
            headerText="Set new PIN"
            onPress={() => {
              this.props.navigation.navigate("WalkThrough");
            }}
          />
          <View>
            <Text style={styles.pinConfirmationText}>
              {AppStore.idExist
                ? `Enter current PIN`
                : this.state.confirmThePin
                ? `Re-confirm PIN`
                : `Enter new PIN`}
            </Text>
          </View>
          <View style={styles.codeContainer}>
            {this.state.passcode.map((p, i) => {
              console.log("xxxx", p);
              let style = p != "" ? styles.inputBox1 : styles.inputBox;
              let passMask = p != "" ? "*" : "";
              return (
                <View style={style} key={i}>
                  <Text style={styles.inputText}>{passMask}</Text>
                </View>
              );
            })}
          </View>

          <View style={styles.mod0}>
            <View style={styles.numberContainer}>
              {numbers.map((num, numb) => {
                return (
                  <>
                    {num.id == 10 ? (
                      <TouchableOpacity
                        key={num.id.toString()}
                        onPress={() => this.onPressCancel()}
                        style={AppStore.isiOS ? styles.number : styles.number2}
                      >
                        <Image
                          style={styles.img}
                          source={Iconpack.PIN_CANCEL}
                        />
                      </TouchableOpacity>
                    ) : num.id == 11 ? (
                      <TouchableOpacity
                        key={num.id.toString()}
                        onPress={() => {
                          this.confirmPin();
                        }}
                        style={AppStore.isiOS ? styles.number : styles.number2}
                      >
                        <Image style={styles.img} source={Iconpack.PIN_CHECK} />
                      </TouchableOpacity>
                    ) : (
                      <TouchableOpacity
                        key={num.id.toString()}
                        onPress={() => this.onPressNumber(num.id.toString())}
                        style={AppStore.isiOS ? styles.number : styles.number2}
                      >
                        <Text style={styles.numberText}>
                          {num.id.toString()}
                        </Text>
                      </TouchableOpacity>
                    )}
                  </>
                );
              })}
            </View>
          </View>
          {/* </Screen> */}
        </>
      )}
    </Observer>
  );
}

export default PinAuthentication;

const styles = StyleSheet.create({
  mod0: { alignItems: "center", justifyContent: "center" },
  container: {
    flex: 1,
    position: "absolute",
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    backgroundColor: "#021831",
  },
  pinConfirmationText: {
    textAlign: "center",
    marginTop: hRem * 44,
    color: "white",
    ...Theme.encodeSansMed3,
    lineHeight: hRem * 19.07,
  },
  borderStyleBase: {
    width: 30,
    height: 45,
  },

  borderStyleHighLighted: {
    borderColor: "#707070",
  },

  underlineStyleBase: {
    width: wRem * 62,
    height: 45,
    borderWidth: 0,
    borderBottomWidth: 1,
  },

  underlineStyleHighLighted: {
    borderColor: "#FFFFFF",
  },
  number: {
    borderRadius:
      Math.round(
        Dimensions.get("window").width + Dimensions.get("window").height
      ) / 2,
    width: Dimensions.get("window").width * 0.2,
    height: Dimensions.get("window").width * 0.2,
    backgroundColor: "#000000",
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: wRem * 12,
    marginVertical: hRem * 9,
  },
  number2: {
    borderRadius:
      Math.round(
        Dimensions.get("window").width + Dimensions.get("window").height
      ) / 2,
    width: Dimensions.get("window").width * 0.2,
    height: Dimensions.get("window").width * 0.2,
    backgroundColor: "#000000",
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: wRem * 12,
    marginVertical: hRem * 9,
    shadowColor: "rgba(27, 100, 206, 0.8)",
    shadowOffset: {
      width: 1,
      height: 5,
    },
    shadowOpacity: 1.5,
    shadowRadius: 5,

    elevation: 10,
  },
  numberContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: hRem * 99,
    alignItems: "center",
    justifyContent: "center",
    shadowColor: Theme.shadow_Button,
    shadowOffset: {
      width: 1,
      height: 1,
    },
    shadowOpacity: 1.5,
    shadowRadius: 5,

    elevation: 3,
  },

  numberText: {
    ...Theme.encodeSansMed4,
    // lineHeight: hRem * 16,
    // position: "absolute",
    textAlign: "center",
    color: Theme.white_color,
  },
  codeContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginHorizontal: wRem * 49,
    marginTop: hRem * 50,
  },
  inputBox: {
    width: wRem * 62,
    borderBottomWidth: 1,
    borderColor: "#707070",
    alignItems: "center",
    justifyContent: "space-between",
  },
  inputBox1: {
    width: wRem * 62,
    borderBottomWidth: 1,
    borderColor: "#FFFFFF",
    alignItems: "center",
    justifyContent: "space-between",
  },
  inputText: {
    color: "white",
    ...Theme.encodeSansMed3,
    marginBottom: hRem * 21,
  },
  img: {
    width: wRem * 30,
    height: hRem * 22,
  },
});

Answer 4

Your Component will now be this..

import React, { useState } from "react";
import {
     StyleSheet,
     Text,
     View,
     Image,
     TouchableOpacity,
     Dimensions,
     } from "react-native";
import AppStore from "../../stores/AppStore";
import Theme from "../../utils/Theme";
import { Observer } from "mobx-react";
import Iconpack from "../../utils/Iconpack";
import FastImage from "react-native-fast-image";
import PinAuthenticationStore from "../../stores/PinAuthenticationStore";
import Toast from "react-native-simple-toast";
import Header from "../CommonComponent/Header";

const hRem = AppStore.screenHeight / 812;
const wRem = AppStore.screenWidth / 375;

function PinAuthentication (props) {
  const [state, setState] = useState({
     passcode: ["", "", "", ""],
     pin: "",
     confirmThePin: false,
     reconfirmPin: "",
 })


 const showToast = () => {
   // ToastAndroid.show("Pick Enter Valid Pin !", ToastAndroid.SHORT);
   Toast.show("Please Enter Valid Pin !", Toast.LONG);
 };

 const  onPressNumber = (num) => {
  let tempCode = state.passcode;
  for (var i = 0; i < tempCode.length; i++) {
    if (tempCode[i] == "") {
      tempCode[i] = num;
      if (state.confirmThePin) {
      setState({...state, reconfirmPin: state.reconfirmPin + num });
    } else {
      setState({...state, pin: state.pin + num });
    }
    break;
   } else {
       continue;
   }
 }
    setState({...state, passcode: tempCode });
 };

const onPressCancel = () => {
let tempCode = state.passcode;
for (var i = tempCode.length - 1; i >= 0; i--) {
  if (tempCode[i] != "") {
    tempCode[i] = "";
    setState({
      ...state,
      pin: state.pin.slice(0, i),
      reconfirmPin: state.reconfirmPin.slice(0, i),
    });
    break;
  } else {
    continue;
  }
 }
// if(tempCode.length==0){
console.log("cancel", tempCode);
// }
setState({...state, passcode: tempCode });
};

const reset = () => {
  setState({
    ...state,
    passcode: ["", "", "", ""],
    confirmThePin: false,
    reconfirmPin: "",
    pin: "",
   });
 };

 const confirmPin = () => {
 if (AppStore.idExist) {
  if (state.pin == AppStore.userPin) {
    props.navigation.navigate("MainAdd");
    reset();
    // AppStore.setFields("isNewUserPin", true);
  } else {
    showToast();
    setState({...state, passcode: ["", "", "", ""], pin: "" });
    // AppStore.setFields("isNewUserPin", false);
  }
  } else if (state.pin == state.reconfirmPin) {
  // console.log("new user");
  PinAuthenticationStore.setPinForNewUser(state.reconfirmPin);
  // PinAuthenticationStore.setUserPin(this.state.reconfirmPin)
  PinAuthenticationStore.setStringIsLoggedIn("true");
  reset();
  props.navigation.navigate("MainAdd");
  // AppStore.setFields("isNewUserPin", true);
} else if (
  state.pin != state.reconfirmPin &&
  state.reconfirmPin.length > 0
) {
  setState({
    ...state,
    passcode: ["", "", "", ""],
    confirmThePin: false,
    reconfirmPin: "",
    pin: "",
  });
  showToast();
  // AppStore.setFields("isNewUserPin", false);
 } else {
  if (state.pin.length == 4 && !state.confirmThePin) {
    setState({...state, passcode: ["", "", "", ""], confirmThePin: true 
  });
  } else if (state.reconfirmPin.length == 4) {
    setState({...state, passcode: ["", "", "", ""] });
  }
  // AppStore.setFields("isNewUserPin", false);
  }

    console.log("confirm pin", state.pin, AppStore.userPin);
  };

 const numbers = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 6 },
  { id: 7 },
  { id: 8 },
  { id: 9 },
  {
    id: 10,
  },
  { id: 0 },
  {
    id: 11,
  },
];
return (
  <Observer>
    {() => (
      <>
        <FastImage
          style={styles.container}
          source={Iconpack.PIN_SCREEN_BG}
          resizeMode={FastImage.resizeMode.cover}
        />
        <Header
          headerText="Set new PIN"
          onPress={() => {
            props.navigation.navigate("WalkThrough");
          }}
        />
        <View>
          <Text style={styles.pinConfirmationText}>
            {AppStore.idExist
              ? `Enter current PIN`
              : state.confirmThePin
              ? `Re-confirm PIN`
              : `Enter new PIN`}
          </Text>
        </View>
        <View style={styles.codeContainer}>
          {state.passcode.map((p, i) => {
            console.log("xxxx", p);
            let style = p != "" ? styles.inputBox1 : styles.inputBox;
            let passMask = p != "" ? "*" : "";
            return (
              <View style={style} key={i}>
                <Text style={styles.inputText}>{passMask}</Text>
              </View>
            );
          })}
        </View>

        <View style={styles.mod0}>
          <View style={styles.numberContainer}>
            {numbers.map((num, numb) => {
              return (
                <>
                  {num.id == 10 ? (
                    <TouchableOpacity
                      key={num.id.toString()}
                      onPress={() => onPressCancel()}
                      style={
                        AppStore.isiOS ? styles.number : styles.number2
                      }
                    >
                      <Image
                        style={styles.img}
                        source={Iconpack.PIN_CANCEL}
                      />
                    </TouchableOpacity>
                  ) : num.id == 11 ? (
                    <TouchableOpacity
                      key={num.id.toString()}
                      onPress={() => {
                        confirmPin();
                      }}
                      style={
                        AppStore.isiOS ? styles.number : styles.number2
                      }
                    >
                      <Image
                        style={styles.img}
                        source={Iconpack.PIN_CHECK}
                      />
                    </TouchableOpacity>
                  ) : (
                    <TouchableOpacity
                      key={num.id.toString()}
                      onPress={() => onPressNumber(num.id.toString())}
                      style={
                        AppStore.isiOS ? styles.number : styles.number2
                      }
                    >
                      <Text style={styles.numberText}>
                        {num.id.toString()}
                      </Text>
                    </TouchableOpacity>
                  )}
                </>
              );
            })}
          </View>
        </View>
        {/* </Screen> */}
      </>
    )}
    </Observer>
  );
 }

  export default PinAuthentication;

  const styles = StyleSheet.create({
    mod0: { alignItems: "center", justifyContent: "center" },
     container: {
      flex: 1,
      position: "absolute",
      top: 0,
      right: 0,
      left: 0,
      bottom: 0,
      backgroundColor: "#021831",
    },
   pinConfirmationText: {
   textAlign: "center",
   marginTop: hRem * 44,
   color: "white",
   ...Theme.encodeSansMed3,
   lineHeight: hRem * 19.07,
},
 borderStyleBase: {
   width: 30,
   height: 45,
 },
 borderStyleHighLighted: {
   borderColor: "#707070",
 },
 underlineStyleBase: {
   width: wRem * 62,
   height: 45,
   borderWidth: 0,
   borderBottomWidth: 1,
 },
 underlineStyleHighLighted: {
   borderColor: "#FFFFFF",
 },
 number: {
  borderRadius:
  Math.round(
    Dimensions.get("window").width + Dimensions.get("window").height
     ) / 2,
   width: Dimensions.get("window").width * 0.2,
   height: Dimensions.get("window").width * 0.2,
   backgroundColor: "#000000",
   justifyContent: "center",
   alignItems: "center",
   marginHorizontal: wRem * 12,
   marginVertical: hRem * 9,
 },
 number2: {
   borderRadius:
     Math.round(
       Dimensions.get("window").width + Dimensions.get("window").height
     ) / 2,
   width: Dimensions.get("window").width * 0.2,
   height: Dimensions.get("window").width * 0.2,
   backgroundColor: "#000000",
   justifyContent: "center",
   alignItems: "center",
   marginHorizontal: wRem * 12,
   marginVertical: hRem * 9,
   shadowColor: "rgba(27, 100, 206, 0.8)",
   shadowOffset: {
     width: 1,
     height: 5,
   },
   shadowOpacity: 1.5,
   shadowRadius: 5,
   elevation: 10,
 },
 numberContainer: {
   flexDirection: "row",
   flexWrap: "wrap",
   marginTop: hRem * 99,
   alignItems: "center",
   justifyContent: "center",
   shadowColor: Theme.shadow_Button,
   shadowOffset: {
     width: 1,
     height: 1,
   },
   shadowOpacity: 1.5,
   shadowRadius: 5,

   elevation: 3,
 },

 numberText: {
...Theme.encodeSansMed4,
// lineHeight: hRem * 16,
// position: "absolute",
textAlign: "center",
   color: Theme.white_color,
  },
  codeContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginHorizontal: wRem * 49,
    marginTop: hRem * 50,
  },
  inputBox: {
    width: wRem * 62,
    borderBottomWidth: 1,
    borderColor: "#707070",
    alignItems: "center",
    justifyContent: "space-between",
   },
    inputBox1: {
    width: wRem * 62,
    borderBottomWidth: 1,
    borderColor: "#FFFFFF",
    alignItems: "center",
    justifyContent: "space-between",
  },
 inputText: {
    color: "white",
    ...Theme.encodeSansMed3,
    marginBottom: hRem * 21,
  },
  img: {
    width: wRem * 30,
    height: hRem * 22,
  },
});