I'm just trying to make a ReactNative app that will display a simple webpage. But all I can see is a blank screen in my browser (Google) and my Expo Go says Network response timed out. Could somebody help me out, please?
I have given my code below:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import {WebView} from 'react-native-webview';
export default function App() {
const GOOGLE = "https://www.google.com/"
return (
<View style={styles.container}>
<View>
<WebView
source = {{uri : GOOGLE}}
/>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Blank screen image...
I have done npm install react-native-webview
you cant npm install react-native-webview because it has native dependencies.
You need to install it through expo by going
expo install react-native-webview
you can read this for more
https://docs.expo.dev/versions/latest/sdk/webview/
Related
I created a react native app with expo. However, when I run it using expo start I get a fully white screen with nothing else displayed.
Screenshot:
Code :
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is usually a network error. Try using npx expo start --offline
If you are running it on device, it might be because of styling of Text. Try giving some style to it:
<Text style={{color: "black"}}>Open up App.js to start working on your app!</Text>
I simply created a react-native-project using expo and added react-native-tts and tried to use the speak function but it is giving Native module cannot be null.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import Tts from 'react-native-tts';
export default function App() {
return (
<View style={styles.container}>
<Button
onPress = {() => {Tts.speak("Hello, world!")}}
title = "voice"
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is an expo project and react-native-tts is not made for expo. So for text to speech I need to use expo-speech or eject the project from expo.
I am new to React Native.
I am using Android Emulator from Android Studio, and I did not change anything at all from any .json file... Whenever the emulator is running it's always a blank screen... It does not display any single error by the way...
App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
Just press R two times... that simple, yes...
I made webview method by react native.
The webview homepage is loaded well using 'expo-cli'.
But the problem is the webview doesn't be rotate by landscapde mode of my device.
How can I solve this problem? Thank you so much.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native';
export default function App() {
return <WebView source={{ uri: 'http://111.111.111.111/web' }} />;
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
You should check your app.json file. Blank apps created with Expo get the value orientation: portrait by default. You can change it to default.
Expo docs: https://docs.expo.io/versions/latest/workflow/configuration/#orientation
I get this error and it's driving me insane, I cannot even start a simple application on React Native. I am using the most basic example, with a fresh project and still throws this error.
I use react-navigation v3xx
Someone please help because I am losing my mind, thank you.
Here is the code I have:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
class Home extends React.Component {
static navigationOptions = {
title: "Home",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
</View>
);
}
}
class AboutMeMe extends React.Component {
static navigationOptions = {
title: "All Me",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
</View>
);
}
}
const AppScreens = createStackNavigator({
Home: Home,
About: AboutMeMe
})
const App = createAppContainer(AppScreens);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
Hellow
As react navigation now depends on gesture so you must install an additional library to go after you have installed the react-navigation library
Run this command inside your project from your terminal
npm install --save react-native-gesture-handler
Then run this one
react-native link react-native-gesture-handler
These instructions are well explained here
https://reactnavigation.org/docs/en/getting-started.html#installation
for new react navigation version
Best regards
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler