I'm working on a small react-native app. It's nearly only a container for showing my webapp, so nearly everthing is running cool.
The problem is, the user needs to rotate the screen on some of the webapp-sites. With my implementation this works very good on android, but not on iOS. The funny thing is, when I start the app on iOS via EXPO GO, it also works.
I've searched a lot but I can not find a solution for this. Do you have any idea how to change that behavior on iOS?
This is my App.js
import React from "react";
import { StyleSheet, View } from "react-native";
import WebView from 'react-native-webview';
const WEBSITE = 'https://www.google.com'
export default function App() {
return (
<View style={styles.container}>
<View style={{ width: '100%', height: '100%' }}>
<WebView
source={{ uri: WEBSITE }}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "flex-start",
},
});
I would first check your xcode project settings and ensure that the orientations you are looking for are enabled. If you open up xcode and check the orientations you should have all the orientations selected that you want to support. The project below has only portrait enabled therefore I'd suggest you enable the landscape orientations and hopefully this should resolve your problem.
Related
I've got a react native app -> I've currently noticed that the text on my screen overlaps on iphone 10+ devices. How would I create a safearea for the new devices?
I've tried to add a tag to wrap my stack.navigator for the home screen but had no luck so far.
Is this something I would target on my react native or in xcode?
enter image description here
use
import { SafeAreaView } from 'react-native';
to handle safe area I have shown in below code how to handle safe area for iPhone 10 plus device
in below code I have divided the safe area in two-part one is for top safe area and another is the bottom safe area and you place your all component in bottom safe area
render() {
return (
<View style={{flex: 1} >
<SafeAreaView style={{flex: 0}} />
<SafeAreaView style={{flex: 1}}>
//here you can place your component
</SafeAreaView>
</View>
)
}
I am developing a react-native app using expo.
On my signIn screen I do have two TextInputs (with textContentType username and password).
I do have multiple places where I'm calling Keyboard.dismiss() (from a wrapping Touchable, from other Buttons etc.) which works fine for most usecases.
My problem is that after I successfully used password autofill on iOS (via fingerprint) first the keyboard hides and reshows automatically (fireing all the usual keyboard events) which looks strange but is acceptable but afterwards the keyboard is no longer reacting to any Keyboard.dismiss() calls untill I focus another TextInput.
There seems to be a similar issue with the "use strong password" keyboard overlay.
Here my versions:
"expo": "^34.0.1",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
Running in the Expo client on iOS 13.2.3
Thank you in advance for any help.
Edit:
I stripped down the problem to the most basic version. The dismiss button works fine untill I use the password autofill on the iOS device.
https://github.com/SebastianRoese/tryouts/tree/master/keyboard-dismiss-problem
import React from 'react'
import { View, Button, TextInput, StyleSheet, Keyboard } from 'react-native'
const App = () => {
return (
<View style={styles.screen}>
<TextInput style={styles.textinput} textContentType="username" />
<TextInput style={styles.textinput} secureTextEntry textContentType="password" />
<Button title="Dismiss Keyboard" onPress={() => Keyboard.dismiss()} />
</View>
)
}
const styles = StyleSheet.create({
screen: {
width: '100%',
height: '100%',
paddingVertical: '15%',
backgroundColor: '#1e1e1e',
alignItems: 'center',
},
textinput: {
marginVertical: 10,
padding: 10,
width: '70%',
height: 40,
backgroundColor: '#ababab',
},
})
export default App
After upgrading from Expo SDK 34 to Expo SDK 38 the problem is no longer reproducable.
Seems like it was an issue in al least Expo SDK Version 34.
I am creating a simple video app using the react native for IOS. But the problem is that when i play the video the video is played in the full screen mode, even if I set the property allowsInlineMediaPlayback to true but still no impression. Please can anyone tell why we use the allowsInlineMediaPlayback property and how to enable the inline video mode in IOS?
Even i added the webkit-playsinline attribute to the HTML video tag as well but which is documented (as following) on the react native website but still not working.
NOTE:
In order for video to play inline, not only does this property need to
be set to true, but the video element in the HTML document must also
include the webkit-playsinline attribute.
Please take a look at the following links:
Documentation Reference For WebView.allowsInlineMediaPlayback.
Working Source Code.
Thanks !!!
Simply remove webkit prefix from webkit-playsinline because webkit prefix is no longer required nor it is supported.
Following is the correct and modified code snippet of your code you shared in the question:
import React, { Component } from 'react';
import { WebView, View } from 'react-native';
export default class MyVideoApp extends React.Component{
render(){
return(
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}>
<WebView
source={{
html: '<video playsinline controls autoplay src="https://www.w3schools.com/html/mov_bbb.mp4" ></video>'
}}
useWebKit={true}
originWhitelist={['*']}
allowsInlineMediaPlayback={true}
style={{
height: 600,
width: 400,
}}/>
</View>
);
}
}
enter "playsInline" in your video tag
I'm building a podcasting app with react native and I would like to implement the mini player you see at bottom of screen in most podcasting/music apps. See image below. I want to make the mini player stick no matter which screen you navigate to. Any idea how to implement this in react native? I'm using react navigation as the main navigator right now https://reactnavigation.org/.
The best way to do this is use the magic of flexbox.
Think about your app as combination of two major screens.
1) The part with header, navigation menus and the playlist (inside etc.)
2) The player
Try this layout
<View style={styles.container}>
<View style={styles.firstBox}>
1)
</View>
<View style={styles.secondBox}>
2)
</View>
</View>
Now all you have to do is assign proper styles
const styles = {
container: {
flex: 1,
},
firstBox: {
flex: 8
},
secondBox: {
flex: 2
}
}
This is enough for the basic structure. You can design accordingly.
I am currently working on my very first react-native application and am wondering how that slide in effect of a new view can be achieved and where that "hidden" view should be placed.
My Application is currently build like this:
<View style={{flex:1}}>
<View style={{flex:.8, justifyContent:'center'}}>
.. some login Form
</View>
<View style={{flex:.2, justifyContent:'center', alignItems:'center'}}>
<TouchableHighlight onPress={this._toggleRegistryView}>
<Text> or register here </Text>
</TouchableHighlight>
</View>
</View>
As you can see in this basic code I want to slide-in the Registration View as soon as the touchable component is pressed.
Do I need to store the view "invisible" with a width of 0 and height of 100% on one side and then animate it to the full device width?
Right now I have no idea besides a whole new view render when the state changes
render(){
return({this.state.view == 'login' ? <LoginView /> : <RegistryView />});
}
Unfortunately this triggers a "hard" view change and not a smooth right to left or left to right animation where the view slides in.
If my question was unclear please inform me - I'll gladly try to specify it :) Thank you for your help
You should split your application into multiple scenes (screens) and use the Navigator component to transition between the scenes.
Here is a tutorial from the TaskRabbit blog to get you started.
Once you have you scenes set up, you can experiment with different SceneConfigs for different types of transition animations.
A transition from a page to another is nothing else but navigation.
In order to navigate from a page to another in React Native, you will want a navigation library.
The default Navigator component from React Native might work, but it's got a lot of limitations and issues, and the default solution most people turn to (and which after 3yrs of RN I strongly recommend), is React Navigation. If you are using Expo, it also ships by default, so you can jump right into it, and define your screens like so:
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Login: {
screen: LoginView,
},
Register: {
screen: RegisterView,
},
});
export default createAppContainer(AppNavigator);
If not, here's a quick start guid to using it outside of Expo.