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
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 am developing a react-native app. I have a bunch of SVG files locally in my project. I would like to use my custom component to render Text and SVG image.
Here is my custom component which is supposed to render a Text and a Image for static SVG file:
import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
<Image source={svgFile} />
<Text>{text}</Text>
</View>)
}
In my screen I try to show several MyComponent each renders a specific SVG image:
<View>
<MyComponent
svgFile={require('../assets/images/tiger.svg')}
text="tiger"
/>
<MyComponent
svgFile={require('../assets/images/elephant.svg')}
text="elephant"
/>
...
</View>
But only text is shown, the image is not shown. How to show a SVG file with a Image component ? I need to have it work on both Android and iOS.
The Image component in React Native doesn't support SVG rendering. I would suggest utilizing react-native-svg to render your SVGs in your custom component. Import your svg file into the component, and render it using <SvgXml />:
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
<SvgXml xml={svgFile} />
<Text>{text}</Text>
</View>)
}
I would like to open a link "in-app" without leaving a React Native app. The idea would be to open a webview on top of the application when clicking the link like Gmail or Messenger do.
Is there a way to do this in React Native?
Yes. You can create a new screen, with a rendered WebView inside.
You may refer to this link: https://docs.expo.io/versions/latest/react-native/webview/#__next
In your router, (if you're using react-navigation) you can just use "modal" for your navigation's mode.
this is very simple
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}}
/>
);
}
}
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
How to hide status bar in Android w/ React Native?
https://facebook.github.io/react-native/docs/statusbarios.html#content
You no longer need to install a dependency to hide the status bar in react-native. The following should work for both Android and iOS.
To hide the StatusBar you can use the component straight from react-native. It is listed in the documentation here.
You can use it in two different ways. One as a component, and the other imperatively. For both you import it from react-native.
import { StatusBar } from 'react-native';
Component
In side your render:
render() {
return (
<View style={styles.container}>
<StatusBar hidden={true} /> // <- you could set this from a value in state
...
</View>
);
}
Imperatively
This allows you to hide it via a function call.
componentDidMount () {
// doesn't have to be in the componentDidMount it could be in some other function call.
StatusBar.isHidden(true);
}
<StatusBar backgroundColor={'transparent'} translucent={true} />
:D
You can try react-native-android-statusbar
.
var StatusBarAndroid = require('react-native-android-statusbar');
StatusBarAndroid.hideStatusBar()