The React Native SDK is currently being worked on and an updated version will be released shortly. We strongly recommend waiting until the updated version is completed before integration. Please email developers@human-id.org with any questions you may have.
Copy yarn add @human-id/react-native-humanid react-native-device-info
Copy npm i @human-id/react-native-humanid react-native-device-info
Copy import {configureHumanID} from "@human-id/react-native-humanid";
import AppLogo from "path/your-app-logo";
configureHumanID({
appName: "Your application NAme",
clientSecret: "APP_SECRET",
clientId: "APP_ID",
Icon: AppLogo // Icon is JSX.Element
});
AppRegistry.registerComponent(appName, () => App);
Copy import {HumanIDProvider} from "@human-id/react-native-humanid";
const App = () => {
return (
<View>
<HumanIDProvider />
</View>
);
};
export default App;
Copy import {logIn} from "@human-id/react-native-humanid";
const HomeScreen = () => {
const handleLogin = () => {
logIn();
};
return <Button title="Login" onPress={handleLogin} />;
}
export default HomeScreen;
We suggest put this method into lifecycle that only live once on your screen, example: componentDidMount if you use class component, otherwise you can use useEffect
Copy import {onCancel, onSuccess, onError} from "@human-id/react-native-humanid";
const HomeScreen = () => {
React.useEffect(() => {
const unsubscribeSuccess = () => onSuccess((exchangeToken) => {
console.log("exchangeToken", exchangeToken)
});
const unsubscribeError = () => onError(() => {
console.log("error")
});
const unsubscribeCancel = () => onCancel(() => {
console.log("canceled")
});
unsubscribeSuccess();
unsubscribeError();
unsubscribeCancel();
return () => {
unsubscribeSuccess();
unsubscribeError();
unsubscribeCancel();
}
}, []);
}
export default HomeScreen;