(also posted in https://github.com/facebook/react-native/issues/27583)
Update: a day passed and I started my app again. Didn't change anything since posting the question. Now it works fine. No idea what happened...
From the fact that two people marked this question as useful, I understand that I am not the only one having this problem...
I am running a very basic 'app' (a single file, a single component) for which the code is attached below, using React native 0.61.
Developing for android, on windows 10 with genymotion.
Fast Refresh is turned on, but it doesn't seem to work, for example, when:
I am changing the 'Posts' string to 'New Posts'
When I remove the posts button
Only the debug menu's "reload" refreshes the app and renders the changes.
Any idea why?
Here is the code:
import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
export const App = () => {
const [resource, setResource] = useState('todos');
return (
<View style={{ flex: 1, alignItems: 'center', marginTop: 30 }}>
<View style={{ flexDirection: 'row', marginTop: 0,
alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity onPress={() => (setResource('posts'))}>
<View style={styles.button}>
<Text style={styles.buttonText}>
Posts
</Text>
</View>
</TouchableOpacity>
<View style={{ width: 20 }} />
<TouchableOpacity onPress={() => setResource('todos')}>
<View style={styles.button}>
<Text style={styles.buttonText}>
Todos
</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
buttonText: {
color: 'black',
fontSize: 20
},
button: {
backgroundColor: '#a8a',
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 5,
paddingHorizontal: 10,
borderRadius: 2
}
});
I've found that sometimes the Metro Bundler gets 'stuck'. That would explain why when you ran it the next day, it worked fine.
When things get weird for (seemingly) no apparent reason, I do:
yarn start --reset-cache
In my case I ran watchman watch-del-all and suddenly I lost fast reload.
Re-installing node_modules and clear & rebuilding app did not help me.
Update: a day passed and I started my app again. Didn't change anything since posting the question. Now it works fine. No idea what happened...
Got a hint from this and restarted my computer. Now it works fine.
I had the same issue few minutes back. Fast refresh was not working even though it was enabled. I closed the metro bundle and started the new instance. Worked for me.
I am creating a getstream feed app in react native, and have been trying to debug this error for the past couple hours but with no success. Other's have posted about it on stack overflow but not with using the <StreamApp></StreapApp> component from react-native-activity-feed.
Here is my code
import config from '../../config';
class Feed extends Component {
render(){
return(
<SafeAreaView
style={[{ flex: 1 }, { backgroundColor: '#FFFFFF' }]}
forceInset={{ top: 'always' }}
>
<StreamApp
apiKey={config.stream.app.key}
appId={config.stream.app.id}
token={this.state.token}>
<FlatFeed
feedGroup="timeline"
options={{
limit: 10,
}}
notify
navigation={this.props.navigation}
Activity={(props) => (
<TouchableOpacity
onPress={() => this._onPressActivity(props.activity)}
>
<Activity
{...props}
Footer={
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<LikeButton {...props} />
<ReactionIcon
icon={ReplyIcon}
labelSingle="comment"
labelPlural="comments"
counts={props.activity.reaction_counts}
kind="comment"
/>
</View>
}
/>
</TouchableOpacity>
)}
/>
</StreamApp>
</SafeAreaView>
);
}
}
I am importing the key and id from a config file located in my root directory. I have also tried storing the id and key in a .env file but both efforts result in the same error. The Token I am getting server-side, I don't include the code for retrieving it from AsyncStorage so I don't clutter the post.
Also, here is the exact error:
The problem is how you acquire the token. The error comes up if you store the token in the state, whereas if you import it from the same spot as you import the key and ID the app will load correctly.
I have installed react-native-gridview and after that I am getting this error.
The line number shown in error is Media.js:134. It contains the following code.
<GridView data={this.state.dataList} itemsPerRow={2}
renderItem={(item) => {
return (
<View style={{ flex: 1, backgroundColor: '#8F8', borderWidth: 1, margin: 8 }}>
<Image style={styles.imageThumbnail} source={{ uri: item.path}} />
</View>
);
}}/>
I can't understand why I am getting this error. I am not using any ListView
Please Help. Thanks.
The problem is that react-native-gridview is using Listview in their library as you can see here.
And now react-native stopped giving support to Listviews, rather now you
can use FlatList, SectionList and modify them as per your requirement, as they have more features and stability.
That's why you are getting the above error.
I have the following section of code. When I put quotes (either single quotes around the integer values in the sections of code marked with Issue n my app crashes without any apparent error message. As soon as I navigate to that page I get a popup box that says: "Unfortunately ExampleApp has stopped." with an "OK" button.
Adding quotes to any of the four marked sections below causes the app to crash. However, if I add quotes around the flex integer, I get a proper error thrown and a red screen is displayed on my phone with the message: Invariant Violation: Invalid prop 'flex' of type 'string' supplied to 'StyleSheet container', expected 'number'.
render(){
const styles = StyleSheet.create({
container: {
flex: 0, //No Issue
padding: 8, //Issue 1
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#C1C1C1',
},
button: {
margin: 5 //Issue 2
}
});
return(
<View style={styles.container}>
<View>
<TouchableOpacity onPress={()=> this.goHome()} style={{marginRight: 20}}> //Issue 3
<Image source={require('../images/pic001.png')} style={{width: 30, height: 30}} /> //Issue 4
</TouchableOpacity>
</View>
<View style={styles.button}>
<Button title="Select" onPress={() => this.selectItem()} />
</View>
</View>
)
}
Is there a reason that quotes would cause my app to crash unexpectedly like this? Why do I get a proper error when the flex value is quoted, but do not get a proper error in any of the other situations.
If it helps, I am developing on Windows 10, connecting to my Android phone (with USB cable for the initial connection).
See also this page for a similar problem.
I am trying to implement react native webview component in my application, but the web view is not loading any url its just showing the white page.
var React = require('react-native');
var{
View,
Text,
StyleSheet,
WebView
} = React;
module.exports = React.createClass({
render: function(){
return(
<View style={styles.container}>
<WebView source={{uri: 'https://m.facebook.com'}} style= {styles.webView}/>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#ff00ff'
},webView :{
height: 320,
width : 200
}
});
Below is the screenshot of the output .
I had this issue. WebView would render when it was the only component returned, but not when nested in another View component.
For reasons I'm not entirely sure of the issue was resolved by setting a width property on the WebView component.
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<WebView
source={{uri: 'https://www.youtube.com/embed/MhkGQAoc7bc'}}
style={styles.video}
/>
<WebView
source={{uri: 'https://www.youtube.com/embed/PGUMRVowdv8'}}
style={styles.video}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'space-between',
},
video: {
marginTop: 20,
maxHeight: 200,
width: 320,
flex: 1
}
});
I'm facing same issue. What I observed is that WebView doesn't work if it's nested. If component returns just WebView, then everything is fine.
Using the answers from other users, I was able to get my react native with webview working both inside a view and outside a view. My problem came down to two things. Being on the android emulator and behind a proxy, I just had to go to my browser (chrome) in the android emulator and sign in to the corporate proxy. Secondly, some sites work and others will not work. Whether the webview was nested or not inside of a View tag, some sites like cnn.com and slack.com etc will work fine, but no matter what settings I tried for google.com it wouldn't work (even though the proxy will definitely allow google.com) Lastly, when I rebuild my application and push to the emulator the new app, sometimes it took an inordinately long time to load any site. But once the site was loaded, the links are quick and responsive. So if you don't at first see something after a build, also be patient. Hope this helps someone else.
My final app.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Dimensions
} from 'react-native';
import { WebView } from 'react-native';
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{flex:1}}>
<WebView
style={styles.webview}
source={{uri: 'https://www.slack.com'}}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={false}
scalesPageToFit={true} />
</View>
);
}
}
const styles = StyleSheet.create({
webview: {
flex: 1,
backgroundColor: 'yellow',
width: deviceWidth,
height: deviceHeight
}
});
WebView works well on Android. However you need to enable javascript and dom storage for some web pages.
<WebView style={styles.webView}
source={{uri: 'https://google.com/'}}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
>
</WebView>
If you want the component to render the entire page, you need to wrap it with View that has flex: 1. The code below works for me:
<View style={{flex:1, alignItems: 'flex-end'}}>
<WebView
source={{uri: this.state.webContentLink}}
startInLoadingState={true}
scalesPageToFit={true} />
</View>
WebView is being moved to react-native-webview
.
None of the other answers worked except this method:
npm install --save react-native-webview
Then use it as follows:
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<WebView
source={{
uri: 'https://www.yahoo.com',
}}
startInLoadingState={true}
scalesPageToFit={true}
style={{
width: 320,
height: 300,
}}
/>
</View>
<View>
<WebView
source={{uri: this.props.link}}
style={styles.webview}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
/>
</View>
and style as follows:
const React = require('react-native');
const { Dimensions } = React;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
export default {
webview: {
width: deviceWidth,
height: deviceHeight
}
};
All this to deal with bad webview dimension, so just set a specific height and specific width too (deviceHeight and deviceWidth as the example above).
As of June 2020 (noting the date because React Native answers seem to become out-of-date quickly), the simplest solution to this appears to be:
import React from 'react'
import { View, StyleSheet } from 'react-native'
import { WebView } from 'react-native-webview'
export const ComponentWithWebView = () => {
return (
<View style={styles.view}>
<WebView source = {{uri: 'https://www.google.com/'}} />
</View>
)
}
const styles = StyleSheet.create({
view: {
alignSelf: 'stretch',
flex: 1,
}
}
This results in a WebView filling the available space and being nested within a View. I believe the typical problems faced when placing a WebView within a View is that View expects children to force the View to expand (that is, a Text component would take up some amount of width and height which the View then accommodates). WebView, on the other hand, expands to the size of the parent component unless a style is passed specifying the width. Therefore, a simple <View><WebView /></View> results in a 0 width and nothing shown on the screen. The earlier solutions of setting the WebView width work well but require either the device dimensions to be fetched (which might not be the desired width) or for the View to have an onLayout function AND have some way to expand the View to the desired space. I found it easiest to just apply the flex: 1 and alignSelf: 'stretch' for the View to fill the space as desired and then WebView to automatically follow suit.
Hope this helps someone before it becomes obsolete!
I ran into the same issue recently. And I found that
alignment: 'center'
was causing the issue for me. I commented it and the webView got loaded immediately.
I found the solution here :
https://github.com/facebook/react-native/issues/5974
'brunocvcunha's' response worked for me.
Let me give the simplest example which will work seamlessly:
import React from 'react';
import { WebView } from 'react-native';
export default class App extends React.Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
/>
);
}
}
Do not add your WebView component within a view that created problem and webview url is not rendered rather styles of view will be shown.
I had the same issue and spent a day attempting to fix it. I copied in the UIExplorer webview example, and that didn't work.
I ultimately ended up upgrading react and creating a new react-native project and copying the files in there, and that fixed it.
I wish I had a better answer as to why that fixed it, but hopefully that helps
Below is piece of the code which worked for me.
render: function(){
return(
<View style={styles.container}>
<WebView url={'https://m.facebook.com'} style= {styles.webView}/>
</View>
);
}
I am doing React Native Webview, Could you please suggest me how to makeWebview loading the uri
render() {
return (
<Modal
animationType="slide"
ref={"webModal"}
style={{
justifyContent: 'center',
borderRadius: Platform.OS === 'ios' ? 30 : 0,
width: screen.width,
height: screen.height,borderColor:'red',
borderWidth: 5
}}
position='center'
backdrop={false}
onClosed={() => {
// alert("Modal closed");
}}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, top: 10 }} >
<Text style={{ fontSize: 24, fontWeight: '700' }}>
Interests
</Text>
<Icon name="ios-close" size={40} color='purple' onPress={() => { this.refs.webModal.close() }} />
</View>
<WebView
source={{ uri: this.state.link }}
style={{ marginTop: 20,borderColor:'green',
borderWidth: 5 }}
/>
</Modal>
);
}
}
import { WebView } from 'react-native'; is deprecated
use below line instead
npm install react-native-render-html#4.1.2 --save
then
import HTML from 'react-native-render-html';
react-native-render-html starting with version 4.2.0, react-native-webview is now a peer dependency. As a result, you need to install it yourself.
Try
<WebView
source={{ uri: "https://inhall.in/" }}
style={Styles.webView}
javaScriptEnabled={true}
scalesPageToFit />
javaScriptEnabled={true} might help