I want to create touch id local authentication in react native. I used
npm react-native-touch-id
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';
var LocalAuth = require('react-native-touch-id')
var YourComponent = React.createClass({
_pressHandler() {
LocalAuth.authenticate({
reason: 'this is a secure area, please authenticate yourself',
falbackToPasscode: true, // fallback to passcode on cancel
suppressEnterPassword: true // disallow Enter Password fallback
})
.then(success => {
AlertIOS.alert('Authenticated Successfully')
})
.catch(error => {
AlertIOS.alert('Authentication Failed', error.message)
})
},
render() {
return (
<View>
...
<TouchableHighlight onPress={this._pressHandler}>
<Text>
Authenticate with Touch ID / Passcode
</Text>
</TouchableHighlight>
</View>
)
}
})
but it says nothing, i followed this link
https://github.com/ElekenAgency/react-native-touch-id-android
Came here because I've got the same question, but looking at your code I assume you've got lost in mixing libs.
Looking at the line:
var LocalAuth = require('react-native-touch-id')
You're importing LocalAuth which I believe is a part of react-native-local-auth library built on top of react-native-touch-id, while following a tutorial for 3-rd library which is react-native-touch-id-android.
According to their example in the repo, your import should look like this:
import Finger from 'react-native-touch-id-android'
My guess for the reason it's not crashing on you is because you've installed react-native-local-auth somewhere in the process befor trying out react-native-touch-id-android.
Better start all over - go to package.json and remove the above mentioned libraries, then run npm install and then follow the step-by-step guide in the repo you've posted.
I'd be glad if you come back afterwards and report on whether it worked out or not. Good luck.
use this code it worked for me !
import TouchID from 'react-native-touch-id';
TouchID.authenticate('Authentication')
.then(success => {
// Success code
})
.catch(error => {
// Failure code
});
Related
I upgraded native-base library from 2.13.14 to 3.0.3 and wrapped my App.js content in NativeBaseProvider. Here is the error I got after doing this:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
--
My Code:
import React, {useEffect} from 'react';
import {I18nManager, ActivityIndicator} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {NativeBaseProvider, Container} from 'native-base';
import TrackPlayer from 'react-native-track-player';
import {PlayerContextProvider} from './contexts/PlayerContext';
import MainStackNavigator from './Navigators/MainStackNavigator';
const App = () => {
const [isReady, setIsReady] = React.useState(false);
useEffect(() => {
TrackPlayer.setupPlayer().then(() => {
console.log('player is setup');
TrackPlayer.updateOptions({
capabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
TrackPlayer.CAPABILITY_STOP,
TrackPlayer.CAPABILITY_JUMP_BACKWARD,
TrackPlayer.CAPABILITY_JUMP_FORWARD,
],
jumpInterval: 30,
});
setIsReady(true);
});
}, []);
return (
<NativeBaseProvider>
<Container>
{isReady ? (
<PlayerContextProvider>
<NavigationContainer>
<MainStackNavigator />
</NavigationContainer>
</PlayerContextProvider>
) : (
<Container>
<ActivityIndicator />
</Container>
)}
</Container>
</NativeBaseProvider>
);
};
I18nManager.forceRTL(true);
export default App;
I did found the root cause of this problem (in my case). The approach was to go down the navigator structure (in your case start with MainStackNavigator) and replace the rendered component with the example code from https://docs.nativebase.io/setup-provider until it breaks:
function Test() {
return (
<Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
<Text>Open up App.js to start working on your app!</Text>
</Box>
)
}
In my case it lead me to a component which was using deprecated native-base elements from v2. Sadly there is no good deprecation guide or migration guide which tells you how to upgrade from v2 to v3.
So following this approach might lead out of this situation (the error message is not really helpful). Keep an eye on the following deprecated components or functions and replace them as follows:
Header -> use HStack docs.nativebase.io/3.0.0/migration/Header
Body -> use Box or Container (not documented)
Left -> use Center or remove (not documented)
Right -> use Center or remove (not documented)
getTheme -> use extendTheme docs.nativebase.io/setup-provider#add-custom-theme-optional
StyleProvider -> use NativeBaseProvider docs.nativebase.io/setup-provider
This is my list of deprecated components so far. In addition here are some update guides for
Icon docs.nativebase.io/3.0.0/migration/Icon
Button docs.nativebase.io/3.0.0/migration/Button
and there are a lot more to be found on this index page https://docs.nativebase.io/3.0.0/migration/
I hope It helps you solving this problem.
Have a try to move the forceRTL method inside the useEffect of the app initialization.
like :
useEffect(() => {
I18nManager.forceRTL(true); // here..
TrackPlayer.setupPlayer().then(() => {
Might it will help you.
When I am using Navigator from react native I am getting an error. The error is:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at App.js:11.
My code is:
import React, { Component } from 'react';
import {
Text,
Navigator,
TouchableHighlight
} from 'react-native';
export default class App extends Component {
render() {
return (
<Navigator
initialRoute={{ title: 'Awesome Scene', index: 0 }}
renderScene={(route, navigator) => (
<Text>Hello {route.title}!</Text>
)}
style={{ padding: 100 }}
/>
);
}
}
I followed this tutorial: https://reactnative.dev/docs/0.43/navigator
Can someone please help me in this. Is there something wrong in documentation?
This code example is from react doc version 0.43. After that "Navigator" was removed.
If you do not care about backward compatibility then I would suggest following current documentation (0.63). In the latest version, there is more simple solution is given.
I am facing a very weird issue with an app which has been working fine and after upgrading to react-navigation v2 has started to have the issue.
Anywhere within the app, the Back Button on Android closes the app and moves it back to the suspended apps.
I have tried many things in terms of handling the back behaviour manually, downgrading some of the packages etc but none of them worked.
Here is my package.json file:
I had the same issue and these are what I found:
https://github.com/react-navigation/react-navigation/issues/4329
and
https://github.com/expo/expo/issues/1786
A temporary solution is mentioned, which is to downgrade firebase to 5.0.3, which works for me.
The issue is with the npm firebase package. There are two ways to fix this.
As mentioned in the other answers, downgrade firebase to 5.0.3
Change the way in which you import firebase. This method will be a lot
easier.
Use:
import firebase from "#firebase/app";
import "firebase/auth";
import "firebase/database";
Don't use import * as firebase from "firebase"; or import firebase from "firebase";
See this GitHub issue for more details.
The solution of downgrading Firebase worked for me too but I had to downgrade to Firebase 4.13.1 as with 5.0.3 I was still facing the issue.
If you are using react-navigation v2, take a look this documentation.
You can also use react-navigation-backhandler for an easy-to-use solution.
Converting this import statement fixed my issue
import Firebase from '#firebase/app' // The issue got fixed after adding #
import 'firebase/auth'
import 'firebase/database'
import 'firebase/storage'
Without the # the backbutton was exiting the user from application
I have faced the same issue, it seems like the implementation of Backhandler.android.js is not correct, you can find the file here node_modules/react-native/Libraries/Utilities/BackHandler.android.js , in this file const subscriptions = Array.from(_backPressSubscriptions.values()).reverse(); piece of code always returns an array of length 0, that's why the invokeDefault variable always stays true and closes the app, you can fix it by handling the back button behavior via your own implementation.
In Navigation Service add this method
import { NavigationActions, StackActions } from 'react-navigation';*
let navigator;
function setTopLevelNavigator(navigatorRef) {
navigator = navigatorRef;
}
function pop() {
navigator.dispatch(StackActions.pop());
}
export default {
pop,
setTopLevelNavigator
};
You need to set the top level navigator in your app.js, like this int render method's return statement
<AppNavigator //Replace it with your navigator
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
onNavigationStateChange={(prevState, currentState) => {
this.setState({ currentState });
}}
/>
To handle the Back button functionality add these things in your app.js
import NavigationService also
import {
BackHandler,
DeviceEventEmitter
} from 'react-native';
In componentDidMount add these
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleHardwareBack);
}
In componentWillUnmount add these
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress',this.handleHardwareBack);
}
Now handling the hardware back button
handleHardwareBack = () => {
if (!isUndefined(this.state.currentState)) {
const mainRouteIndex = this.state.currentState.index;
const mainRoute = this.state.currentState.routes[mainRouteIndex];
const subRouteIndex = mainRoute.index;
if (subRouteIndex === 0) {
console.log(
'the screen name is ----> ',
mainRoute.routes[subRouteIndex].routeName
);
this.toggleExitModal(); //you can place any dialog if you want to show
return true;
}
NavigationService.pop();
return true;
}
console.log('Back Button is handled in the respective page seperately');
};
return true tell that we are going to handle the back button functionality manually, return false will lead to exits the app as by default it is Hardware back button closes the app :(
Hope this will help you
Well i am using firebase 5.5.5 i don't have any problem with navigation , I think you need to create your stack navigator to use the back butoon properly , I have given a example of it. pages are imported also i have not attached the screen importing code
import { createSwitchNavigator, createStackNavigator } from 'react-navigation';
const Drawer = createDrawerNavigator(
{
BrowseQuestion: BrowseQuestion,
BrowseCategory: BrowseCategory,
}
);
const Loginstack = createStackNavigator({
Login: LoginScreen,
Forgot: ForgotPassword,
Signup: SignupScreen,
})
export default createSwitchNavigator({
Login : Loginstack,
Account: Drawer,
},
{
initialRouteName: 'Login'
}
);
I'm trying to run my project in android emulate, It show error red screen, but iOS run perfectly.
My screen just have a View that contain a text
import React, { Component } from 'react'
import {
View,
Text,
} from 'react-native'
const Test = ({navigation}) => {
return(
<View>
<Text>Hola</Text>
</View>
)
}
export default Test
and in the index.js call de screen
import { AppRegistry } from 'react-native';
import Test from "./src/test"
AppRegistry.registerComponent('SanSilvestre', () => Test);
A screen shot
Attempted to redefine property 'padding'. (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:65166)
Attempted to redefine property 'padding'. (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:65166)
screen shot
thanks
You probably have a syntax error in your code where you are defining padding twice in the same object.
i am creating a very simple app for android and iphone/ipad that uses only webview.
How can i store username and password so the user would not have to type them in every single time. Thanks in advance.
import React, { Component } from 'react';
import {
AppRegistry,
WebView
} from 'react-native';
export default class myapp extends Component {
render() {
return (
<WebView
source={{uri: 'https://mysecretappurl.com'}}
/>
);
}
}
AppRegistry.registerComponent('myapp', () => myapp);
Thank you Fabian for a quick response.
I got it solved with injectedJavascript and the data persist even if i close and relaunch the app both on android and ios. I got stuck as at first as tried to go with asyncstorage and reactnativ-webview-bridge but i failed to implement them due to my lack of knowledge.
import React, { Component } from 'react';
import {
AppRegistry,
WebView
} from 'react-native';
export default class myapp extends Component {
render() {
let jsCode = `
var cookie={};
document.cookie.split('; ').forEach(function(i){cookie[i.split('=')[0]]=i.split('=')[1]});
document.querySelector('#email').value=cookie['email'] || '';
document.querySelector('#password').value=cookie['password'] || '';
document.querySelector('#login button').onclick = function(){
document.cookie = 'email='+document.querySelector('#email').value;
document.cookie = 'password='+document.querySelector('#password').value;
};
`;
return (
<WebView
source={{uri: 'https://mysecretappurl.com'}}
injectedJavaScript={jsCode}
/>
);
}
}
AppRegistry.registerComponent('myapp', () => myapp);
I don't know if I understand you correctly:
You are writing a "minified browser" with react native only to show your webpage and you want to prefill the login form on that page?
If it's true you are searching for a possibility to exchange data from your React Native app with your page in the WebView component. Take a look at this tutorial of react-native-webview-bridge .
I would try the following:
Communicate with your Webpage and establish a listener for your login form to pass the credentials to your RN app
Use a module like react-native-simple-store to store the credentials in your RN app
If you start the app the next time check your storage and if the credentials are not empty send them to your webpage via bridge/injected javascript