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
Related
I am creating an android app using React Native. I am using the web view to load the website, the website is having a login page to enter the username and password and we are able to login into the website from the login page. Is it possible to save that username and password details on the webpage or somewhere? so that the next time when the user goes to the login page, he can see the username and password details on the page and the user only needs to click on the login button to login into the website.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { WebView } from 'react-native-webview';
export default class Accountscreen extends Component {
render() {
return (<WebView source={{ uri: '<site_url>/login'}} style={{ marginTop: 24 }} />);
}
}
Thanks in advance.
You can communicate between WebView and your rect application https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
For example when the user login the first time you can send this data with window.ReactNativeWebView.postMessage from your website to RN side and save it.
Next time when you open this page and have login data you can inject JS to your page with injectedJavaScript
I have a react-native app (expo managed) and in this app I need to open a couple of webviews ( that are hosted on my website url). The issue is that when I update the content on the website, react-native webview still has the old website's content.
For example, react-native opens a webview page with a title Library, I've updated the title to Libraries and deployed the changes to my website, when I open the website (though phone/desktop) I see the title Libraries, but when I open the same page as the webview from the react-native app the title is still Library. If I delete and reinstall the react-native app then I see Libraries, I can't seem to figure out what may cause this issue.
This is my code:
import React, {useRef, useEffect} from 'react';
import { WebView } from 'react-native-webview';
const webViewRef = useRef();
useEffect(() => {
webViewRef.current.reload();
}, []);
WebView
bounces={false}
ref={(ref) => (webViewRef.current = ref)}
source={{uri: "mywebsite"}}
/>
Any advise or help is greatly appreciated
I was able to fix this issue by passing a vavlue to the url,
import React, {useRef, useEffect, **useState**} from 'react';
import { WebView } from 'react-native-webview';
const webViewRef = useRef();
**const [value, setValue] = useState()**
useEffect(() => {
webViewRef.current.reload();
*setValue(Math.random)*
}, []);
WebView
bounces={false}
ref={(ref) => (webViewRef.current = ref)}
source={{uri: **`mywebsite?var=${value}`**}}
This allows webview url to refresh on page load
I've built a simple application that loads a page using Webview and, even though I've allowed cookies and cache, once the app is closed, the user is logged out from the website. PS.: This only happens in iOS devices, not in Android.
import React from 'react';
import WebView from 'react-native-webview';
import { useNavigation } from '#react-navigation/native';
const WebViewPage = () => {
const { navigate } = useNavigation();
return (
<WebView
source={{ uri: 'my-url' }}
onError={() => navigate('Error')}
thirdPartyCookiesEnabled
allowFileAccess
cacheEnabled
sharedCookiesEnabled
/>
);
};
export default WebViewPage;
I've found solutions for Flutter applications, but not for React-native.
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
});
I have a mobile site and I want to make an android browser app where I want to open my site.
I have tried and react-native-browser. Something like..
import {
processColor, // make sure to add processColor to your imports if you want to use hex colors as shown below
} from 'react-native';
// at the top of your file near the other imports
var Browser = require('react-native-browser');
class SampleApp extends Component {
render() {
return (
<View style={{paddingTop:20, flex:1}}>
{Browser.open('https://google.com/')}
</View>
);
}
}
But got no success...
I just want to make a browser that opens my mobile site..
Is there any better way of doing this or if someone has any idea how to use react-native-browser ?
Thanks in advance
Looking at the source code, it seems this browser is only available on iOS.
you must search in this web https://js.coach/react-native?search=browser for example https://github.com/d-a-n/react-native-webbrowser
Why are you trying to look for an external library while there is a WebView Component already integrated with react-native itself?
WebView renders web content in a native view. You can use this
component to navigate back and forth in the web view's history and
configure various properties for the web content.
You can just add a WebView and open up the desired web url.
Example
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
You can use https://www.npmjs.com/package/react-native-webbrowser
Install:
npm i react-native-webbrowser --save
Use:
class SampleApp extends Component {
render() {
return (
<View style={{paddingTop:20, flex:1}}>
<Webbrowser
url="https://your-url.com"
hideHomeButton={true}
hideToolbar={true}
hideAddressBar={true}
hideStatusBar={true}
foregroundColor={'#efefef'}
backgroundColor={'#333'}
/>
</View>
);
}
Set all the hide's props to true to make your app display only the site