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
Related
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/
I am testing the vibrate feature for ios using expo and it seems pretty straight forwared on the docs. For some reason though I can not get the iphone to vibrate. I can get it to console log at the time of vibrate call. Any ideas on how I can get this working?
app.js toy example
import * as React from 'react';
import { Text, View, StyleSheet, Vibration, TouchableOpacity } from 'react-native';
export default function App() {
const startVibration = () => {
console.log('start vibration')
Vibration.vibrate()
}
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => startVibration()}>
<Text>Vibrate Once</Text>
</TouchableOpacity>
</View>
)}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#efefef',
padding: 8,
},
});
I went into the settings on an iphone and toggled vibrate on silent and vibrate on ring and now the vibrate works.
I want to make an app that shows the URL I passes. I tried react native web view and it got some issues while deep linking and others. I found expo webbrowser and I find that solves my problem.
The code I tried is the following
import React, { useState } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import Constants from 'expo-constants';
export default function App() {
const [result, setResult] = useState(null);
const _handlePressButtonAsync = async () => {
let result = await WebBrowser.openBrowserAsync('https://expo.io');
setResult(result);
};
return (
<View style={styles.container}>
<Button title="Open WebBrowser" onPress={_handlePressButtonAsync} />
<Text>{result && JSON.stringify(result)}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
It's the demo code from the expo webbrowser site. I want to remove the address bar on the top and launch the website without clicking the button. The following code didn't work
let result = await WebBrowser.openBrowserAsync('https://expo.io',{showTitle:false});
....
return (_handlePressButtonAsync);
Expo Webbrowser
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...