Until typing everything is ok. However after starting typing page scrolls down(shifting). I am not able to solve this whatever i do...
<ImageBackground
source={bgSrc}
style={styles.background}
resizeMode="cover">
<StatusBar hidden={true} />
<KeyboardAwareScrollView
showsVerticalScrollIndicator={false}
enableOnAndroid
>
{screenToShow}
</KeyboardAwareScrollView>
</ImageBackground>
const styles = StyleSheet.create({
container: {
width: '100%',
height: height,
backgroundColor: '#555',
},
background: {
flex: 1,
width: null,
height: null,
justifyContent: 'center',
alignItems: 'center'
}
});
before typing, it's looking perfect
After typing in the password field page moves down as u see:
after typing, it scroll down
This library is always a bit janky. Try a configuration like this:
<KeyboardAwareScrollView
style={{ backgroundColor:
themeColors.boxPrimaryBackground, flexGrow: 1 }}
contentContainerStyle={{ width: '100%', margin: 0 }}
scrollEnabled={true}
extraScrollHeight={-125}
extraHeight={10}
keyboardOpeningTime={Number.MAX_SAFE_INTEGER}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps={'handled'}
>
// add scroll content here
</ KeyboardAwareScrollView>
The thing you really need to add is the keyboardOpeningTime={Number.MAX_SAFE_INTEGER}. It has something to do with the animation inside the library. Good luck hope this helps.
I have seen your question on github as well, and its been a long time since that is in open state there.
I have the above problem resolved using KeyboardAvoidingView from react-native
import {KeyboardAvoidingView} from 'react-native'
I have replaced KeyboardAwareScrollView with KeyboardAvoidingView and this is working as needed.
Here is an app link that does this. You can download and see it's login page.
I am having a lot of trouble working with a scroll view and flex dimensions. Basically the initial screen of the app should show a top side "banner" while the bottom is the "content".
The content is going to contain many "cards" that each contain information, and users will be able to scroll down to see the next card, and the next, and etc.
However, the flex property does not seem to be working at all, and I am not even able to create the proper sizes for the "banner" section and the "content" section.
This is my code:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
TextInput
{ from 'react-native';
import RestaurantCard from './common/RestaurantCard';
export default class MemberArea extends Component<Props> {
constructor(props){
super(props);
this.state = {
searchText: ''
}
}
render() {
return (
<ScrollView contentContainerStyle = {styles.contentContainer}>
<View style={styles.banner}>
<TextInput style={styles.search}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Search for Restaurants"
textAlign= 'center'
textAlignVertical='center'
returnKeyType="search"
/>
</View>
<Text style={styles.dropdown}>
{"What's nearby V"}
</Text>
<View style={styles.cards}>
<RestaurantCard />
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
contentContainer:{
flexGrow: 1,
flexDirection: 'column'
},
cards:{
flex:3,
backgroundColor:'#000000'
},
banner: {
flex:15,
backgroundColor: '#F36B45',
paddingBottom: 80
},
search:{
marginTop: 20,
paddingBottom: 5,
paddingTop: 5,
height: 30,
marginHorizontal: 40,
borderRadius: 20,
backgroundColor: 'rgb(255,255,255)'
},
dropdown:{
color: 'black',
fontWeight:'900',
fontSize:24,
margin:30
}
});
UPDATE: As seen in the comments below, I surrounded my scrollview with another view. I gave the Parent view Flex:1. The problem I run into now is as follows:
If I give the scrollview contentcontainerstyle flexGrow: 1, then the scrolling works as normal, but I cannot give the children sections of the scrollview space dimensions with flex values. However, if I give the scrollview flex:1 (rather than flexGrow), then I can give space dimensions to the children sections, but the scrolling function is disabled. Any help would be greatly appreciated!
Issue you have is you set content inside memberArea to grow according to the content but outside the memberArea, it's fixed. Add flex: 1 style to View in App.
<View style={{flex: 1}}> // App
Then you don't need to set contentContainerStyle for the ScrollView
Why do you set flex: 15? Check the doc first.
Here's the codesandbox
Read the React-Native Docs on Flexbox properly.
[https://facebook.github.io/react-native/docs/flexbox.html][1]
You cannot set Higher values to child Views of the Parent Views.
If you want to divide the Parent's Flex: 1, into 2 children - you can do Flex:0.5 and Flex:0.5 to the two children.
If you want every child to have their own space, assign Flex: 1 to each of them.
Check the Docs and other articles on it for more details.
I have a Picker component with two language choices: French and Korean. I would like to add an icon/picture of a flag next to each Text Component. Something that would like something like this:
I don't see anything about adding an icon in the documentation Other than installing something like react-native-modal-dropdown is there a way that this can be done? I would like to avoid installing any additional stuff.
Since i was looking for a solution myself, i tried the solution that i referenced in my previous comment but i couldn't make it work for the default RN picker.What i found instead, is that you can use Unicode emojis (thanks to a comment by hippietrail found here). So just copy the flag emoji you want from somewhere (i used emojipedia) and put it inside the label prop.Here is a very simple example of how this works
export default class App extends Component {
state = {
language: ''
};
render() {
return (
<View style={styles.container}>
<Picker
selectedValue={this.state.language}
style={{ height: 50, width: 200 }}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label="🇰🇷 South Korea" value="ko" />
<Picker.Item label="🇫🇷 France" value="fr" />
</Picker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
where 🇰🇷 and 🇫🇷 are the unicode emojis i copied from emojipedia.And this is how it looks like in Android (looks similar in iOS)
Background
I have an image placed on a screen meant to show when the screen loads other content.
I want to center the image so it is always center on all devices.
Problem
Currently the image shows up top center. I would like it to be aligned vertically as well. Also to be sure that it will always look the same on all devices.
Question
What is the solution to make sure the image is always centered and the right size for all devices?
Example,
My current code,
In Photoshop
Image is 300 Resolution
Height is 776 px
Width is 600 px
I want the image to be centered horizontally and vertically in all devices and look good without pixelating. Natively I know I need to set the image sizes. But from my understanding in React Native I can use on image but then use JSX to handle it being responsive.
import React from 'react';
import {
StyleSheet,
View,
Image,
} from 'react-native';
const logo = require('../images/logo.jpg');
const LoadingScreen = () => (
<View>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
logo: {
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 400,
},
});
export default LoadingScreen;
You need to set the style of <View> for justifyContent and alignItems for centering the <Image>.
Should be like this :
const LoadingScreen = () => (
<View style={styles.container}>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
},
logo: {
width: 300,
height: 400,
},
});
Or you can use alignSelf on the <Image> to make it center, but it will still need to add justifyContent on <View> to make it center vertically.
The View container should have styling as
flexDirection: 'column'
justifyContent: 'center'
alignItems: 'center'
height: '100%'
The height makes sure it spans throughout the page, thus making the image become both vertically and horizontally aligned.
For the image size, I think using percentage will do the trick instead of defining definite width/height.
Set in view:
justifycontent:center
And in child:
alignself:center
And perform in task.
Set in parent view:
justifycontent:center
And in child set:
alignself:center
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