Having Trouble getting react-native oauth2 login flow working in react native. I have a ssl server on heroku handling the server auth, and the auth flow works in the browser. However, in react-native webview, I figured it would follow the redirect automatically. Instead I get this issue an ssl error
Is there something im missing? Can't find anything online to help with this issue.
I just have a simple webview implementation.
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class SfLogin extends Component {
constructor(props) {
super(props);
this.state = {
uri: 'https://testendpoint/shouldredirectwhenhit'
}
}
render() {
return (
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: this.state.uri}}
style={{marginTop: 20}}
scalesPageToFit={true}
/>
);
}
}
Thanks in advance
Related
I am trying with react native web view and connected the embed link. Url opens the finger print authenticator when using webpage. But after connecting to react native it never opens the fingerprint authentication part. How can I get the finger print authentication by app calling phone framework
import React,{useState} from 'react'
import{View,Text,StyleSheet} from 'react-native'
import{WebView} from 'react-native-webview'
const App=()=> {
//const {url,setUrl} =useState("https://www.google.com/");
return(
<View style={styles.Container}>
<WebView
source={{uri:"https://whatpwacando.today/authentication"}}
onLoadEnd={(events)=>{
const{nativeEvent}=events;
console.log(nativeEvent.loading)
}}
onLoad={(events)=>{
const{nativeEvent}=events;
console.log(nativeEvent.loading)
}}
javaScriptEnabled={true}
thirdPartyCookiesEnabled={true}
/>
</View>
)
}
export default App
const styles= StyleSheet.create({
Container:{
flex:1,
}
})
I'm attempting to build a website using React Native Web,
and have been stuck on trying to display my website using Expo.
My expectation is that I will be able to see it when I click "Run in web browser"
(it should open a blank page with an intro text)
but it only returns back to the Expo page.
What am I doing wrong?
You can use WebView to display web pages on React Native Expo apps.
First, install react-native-webview by this command.
expo install react-native-webview
Then you could add this WebView as shown below.
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
style={styles.container}
source={{ uri: 'https://expo.dev' }}
/>
);
}
You can also insert custom web (html) page like this:
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
style={styles.container}
originWhitelist={['*']}
source={{ html: '<h1><center>Hello world</center></h1>' }}
/>
);
}
To know more you can read this doc expo webview
I’ve successfully managed to send a message from React Native (RN) to a WebView.
What I’m struggling with, is getting the message back from the WebView to RN. There’s no errors showing - it’s just that the message never gets through.
Here is the code which I’m using:
React Native code
<WebView
source={Platform.OS === 'ios' ?
{ uri: RNFS.LibraryDirectoryPath + "/offlineplayer/index.html" } :
{ uri: 'file:///android_asset/offlineplayer/index.html' }
}
ref={(webView) => this.webView = webView}
originWhitelist={["*"]}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
useWebKit={true}
//scrollEnabled={false}
onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
allowingReadAccessToURL={RNFS.LibraryDirectoryPath}
onMessage={this.onMessage}
/>
onMessage(event) {
alert(event.nativeEvent.data);
}
WebView Code
window.postMessage("Post message from web", "*");
The only way to communicate the web with react native is by using window.ReactNativeWebView.postMessage and the onMessage prop.
but window.ReactNativeWebView.postMessage only accepts one argument, which must be a string.
So change window.postMessage to window.ReactNativeWebView.postMessage to fix your issue.
For more information check this sample code
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const html = `
<html>
<head></head>
<body>
<script>
setTimeout(function () {
window.ReactNativeWebView.postMessage("Hello!")
}, 2000)
</script>
</body>
</html>
`;
return (
<View style={{ flex: 1 }}>
<WebView
source={{ html }}
onMessage={event => {
alert(event.nativeEvent.data);
}}
/>
</View>
);
}
}
Hope this helps you. Feel free for doubts.
I am trying to learn the basics of react native and have started with the basic tab template. I am trying to create a social media sharing screen, where you get the list of apps and airdrop on iOS to display but unfortunately this is not working. The code I have displays an empty view and I was expecting the share dialog to appear over the top. I get the view but no sharing options.
Here is the code
`
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Share } from 'react-native';
var ActionSheetIOS = React;
export default class ShareScreen extends React.Component {
static navigationOptions = {
title: 'Share',
};
showShareActionSheet() {
ActionSheetIOS.showShareActionSheetWithOptions({
url: 'https://www.someurl.org',
});
}
render() {
return (
<View style={styles.container}>
this.showShareActionSheet();
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#000000',
},
});
`
any ideas why this isn't working?
You need to wrap your this.showShareActionSheet(); with brackets to get it working.
<View style={styles.container}>
{this.showShareActionSheet()}
</View>
Otherwise it's gonna be considered as plain text and not as an instruction
You can use this package https://www.npmjs.com/package/react-native-share for sharing, This package will help you share the content to WhatsApp, FB, and other social apps.
I am working with react native, and I am using a video component from the expo. during this how I can change the value for URI attribute dynamically
(As you mentioned in the comment that you already solved the problem and want to play youtube videos)
You can use WebView to play Youtube video.
Working demo: https://snack.expo.io/Syhzx-VvX
Here is the sample code:
import React, { Component } from 'react';
import { StyleSheet, View, WebView, Platform } from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={{ height: 300 }}>
<WebView
style={ styles.WebViewContainer }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/YE7VzlLtp-4' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
WebViewContainer: {
marginTop: (Platform.OS == 'android') ? 20 : 0,
}
});
Otherwise if you don't want to use WebView, use a third party package like react-native-youtube