Fingerprint and Touch ID custom component not working on app

[Faisal10886]

I’ve created an Biometric custom component and published it privately. When I used this custom component on my adalo app and created an apk of it. The apk isn’t working perfectly, as it is crashed on start of the app and there is no error message shown.
Even I try to run on dev mode through scan QR on physical device but the functionality of biometric scanning isn’t wroking.

I’ve used same code on react native boiler plate and it’s working fine. I’m using react-native-biometrics library.

Here is the code of index.js file

import React, { useState, useEffect } from "react";
import {
  Text,
  View,
  Image,
  StyleSheet,
  Button,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import ReactNativeBiometrics, { BiometryTypes } from "react-native-biometrics";
const windowWidth = Dimensions.get("window").width;

const windowHeight = Dimensions.get("window").height;

const AdaloBiometric = (props) => {
  const { color, text, icon, backgroundColor } = props;
  const [success, setSuccess] = useState(false);
  const rnBiometrics = new ReactNativeBiometrics();

  useEffect(() => {
    CheckFingerprint();
  }, []);

  const CheckFingerprint = async () => {
    rnBiometrics.isSensorAvailable().then((resultObject) => {
      const { available, biometryType } = resultObject;

      if (available && biometryType === BiometryTypes.TouchID) {
        console.log("TouchID is supported");
      } else if (available && biometryType === BiometryTypes.FaceID) {
        console.log("FaceID is supported");
      } else if (available && biometryType === BiometryTypes.Biometrics) {
        console.log("Biometrics is supported");
        CheckBiometricKey();
      } else {
        console.log("Biometrics not supported");
      }
    });
  };

  const CheckBiometricKey = async () => {
    rnBiometrics.biometricKeysExist().then((resultObject) => {
      const { keysExist } = resultObject;
      console.log(keysExist);

      if (keysExist) {
        console.log("Keys exist");
      } else {
        console.log("Keys do not exist or were deleted");
        CreateBiometricKey();
      }
    });
  };

  const CreateBiometricKey = async () => {
    rnBiometrics.createKeys().then(async (resultObject) => {
      const { publicKey } = resultObject;
      console.log(publicKey);
    });
  };

  const AuthenticateBiometric = async () => {
    rnBiometrics
      .simplePrompt({ promptMessage: "Confirm fingerprint" })
      .then((resultObject) => {
        const { success } = resultObject;

        if (success) {
          setSuccess(true);
          console.log("successful biometrics provided");
        } else {
          console.log("user cancelled biometric prompt");
        }
      })
      .catch(() => {
        console.log("biometrics failed");
      });
  };

  return (
    <View style={{ backgroundColor }}>
      <Image source={icon} style={styles.tinyLogo} />
      {success ? (
        <View style={styles.successContainer}>
          <TouchableOpacity
            onPress={() => setSuccess(!success)}
            style={styles.successSubContainer}
          >
            <Text style={styles.text}>You're LoggedIn Successfully!</Text>
          </TouchableOpacity>
        </View>
      ) : (
        <Button
          title="LOGIN"
          color={color}
          onPress={() => {
            AuthenticateBiometric();
          }}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  tinyLogo: {
    width: 200,
    height: 200,
  },
  button: {
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  text: { color: "white", fontWeight: "700", fontSize: 18 },

  successContainer: {
    width: windowWidth,
    height: windowHeight,
    alignItems: "center",
    justifyContent: "center",
  },

  successSubContainer: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: "#6DCCB1",
    borderRadius: 8,
  },
});

export default AdaloBiometric;

Here is my manifes.json file

{
  "displayName": "Adalo Biometric",
  "defaultWidth": 160,
  "defaultHeight": 24,
  "components": "./index.js",
  "icon": "./example-thumbnail.png",
  "props": [
    {
      "name": "text",
      "displayName": "Text",
      "type": "text",
      "default": "Happy Hacking"
    },
    {
      "name": "color",
      "displayName": "Color",
      "type": "color",
      "default": "#00A898"
    },
    {
      "name": "icon",
      "displayName": "Icon",
      "type": "image/png",
      "default": "https://img.icons8.com/?size=256&id=62176&format=png"
    },
    {
      "name": "backgroundColor",
      "displayName": "Background Color",
      "type": "color"
    }
  ]
}

Here is my package.json file:

{
  "name": "adalo-biometric",
  "description": "",
  "version": "1.0.2",
  "main": "index.js",
  "license": "ISC",
  "author": "",
  "scripts": {
    "start": "adalo dev",
    "login": "adalo login",
    "publish": "adalo publish"
  },
  "adalo": {
    "logo": "./logo.png",
    "displayName": "Adalo Biometric",
    "components": [
      {
        "name": "AdaloBiometric",
        "manifest": "./src/components/AdaloBiometric/manifest.json"
      }
    ],
    "iosInstallScript": "./scripts/install_ios.sh",
    "androidInstallScript": "./scripts/install_android.sh"
  },
  "devDependencies": {
    "@adalo/cli": "^0.0.57",
    "react": "^16.9.0",
    "react-art": "^16.6.0",
    "react-dom": "^16.9.0",
    "react-native-web": "^0.9.5"
  },
  "dependencies": {
    "react-native-biometrics": "^3.0.1"
  }
}