I need to customize my WebView in React Native with header and footer. but WebView does not load URL when put inside View. How can I achieve this functionality?
<View style={styles.mainSection}>
<WebView
source={{uri: this.props.mediaItem.source}}
style={{marginTop: 20}}
/>
</View>
I think your problem is related to the size of the WebView component. Try to put flex: 1 into your WebView style.
Related
I am displaying images in my react native app.
Here is how I am displaying the image:
<Image style={styles.image} source={{ uri: this.props.img }}
My image is not displayed, but when I put the url directly into the image I works fine
What is happening
You don't have to put this in elements, please remove it before props and use directly as below
<Image style={styles.image} source={{ uri: props.img }}
Make sure, if there is an image in your props that you've passed. console.log that prop.
Also, add this keyword only when you're using the class approach.
I can't seem to manage this simple layout and all the tricks I find for ScrollView don't match my case.
My content has a header and a footer that should "stick" to it.
But when my content becomes too big, the header should be naturally stuck at the top of the screen, the footer at the bottom of the screen, and the middle part is taken by the content which should be scrollable.
Here is the code for the layout and I join some screens.
Red: screen
Blue: content header
Green: content (Scrollview)
Yellow: content footer
<View style={styles.screen}>
<View style={styles.contentHeader}>
{contentHeader}
</View>
<ScrollView style={styles.content}>
{content}
</ScrollView>
<View style={styles.contentFooter}>
{contentFooter}
</View>
</View>
My problem is that the ScrollView should take only the height required by its content but it does not.
Any suggestions ?
You can use FlatList and use its ListFoooterComponent and ListHeaderComponent for rendering your header and footer you can also render these with ScrollView but its recommended to use FlatList for more performant and support.
Have a look at this to FlatList
https://reactnative.dev/docs/flatlist
Otherwise, you can use stickyHeaderIndices prop for rendering header in ScollView and place your footer outside of the ScrollView with these styles.
This will work
<View style={styles.screen}>
<ScrollView style={styles.content} stickyHeaderIndices={[0]}>
<View style={styles.contentHeader}>
{contentHeader}
</View>
{content}
</ScrollView>
<View style={[styles.contentFooter, {position: 'absolute, bottom: 0}]}>
{contentFooter}
</View>
</View>
I'm using the Overlay component from react-native-elements which is supposed to be built over the underlying react-native Modal component. I have tried to place a simple ScrollView within the Overlay but the content just renders till the end of the Overlay and truncates the rest of it.
I suspect it might be a style issue but I have looked through all the possible props without luck.
<Overlay style={{height: height - 20, width: width}}>
<ScrollView>
... Content longer than screen ...
</ScrollView>
</Overlay>
I also have faced the same issue. using the below code.
<Overlay
isVisible={this.props.visible}
onBackdropPress={this.props.onClose}
overlayStyle={styles.overlayStyle}>
<ScrollView contentContainerStyle={{flex:1}}>
... Content longer than screen ...
</ScrollView>
</Overlay>
I solved this by removing the flex:1 from the contentContainerStyle props.
Working code
<Overlay
isVisible={this.props.visible}
onBackdropPress={this.props.onClose}
overlayStyle={styles.overlayStyle}>
<ScrollView>
... Content longer than screen ...
</ScrollView>
</Overlay>
Does the WebView work in IOS simulator?
The code below does not return an error, but also doesn't display anything.
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyTest extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
export default MyTest;
Thanks
WebView work well in my simulator. My code:
<WebView
useWebKit={true}
style={{flex:1}}
source={{uri:url}}
startInLoadingState={true}
renderLoading={()=>(<ActivityIndicator size='large' color={COLOR_STANDARD}
style={{marginTop:100}} />)}>
</WebView>
I want to contribute here for those getting white screen on ios. First the webview is inside scrollview because I have other content. I know it is adviced for webview not to be inside any component. I was battling this for weeks until I came upon James Liu's. I was running it on expo client (ios) and was getting white screen. Here is my code before I saw his answer.
contentContainerStyle={{
flexGrow: 1,
}}>
<WebView
ref={ref => (this.webview = ref)}
source={{uri: currentSite}}
style={{ height:550}}
scrollEnabled={true}
startInLoadingState={true}
onNavigationStateChange={this._onNavigationStateChange.bind(this)}
javaScriptEnabled = {true}
domStorageEnabled = {true}
startInLoadingState={false}
onLoad={() => this.hideSpinner()}
injectedJavaScript={jsCode}
onMessage={event => {
//Html page
const wishData = event.nativeEvent.data;
this._getProductName(wishData);
this._getProductPrice(wishData);
}}
/>
</ScrollView>
All I needed to add is useWebKit={true} and from the documentation it says:
useWebKit->If true, use WKWebView instead of UIWebView. And this props is ios specific. Furthermore, I googled and found that WKWebView is more recent than UIWebView ( I don't know more about this).
For me, the solution was to wrap my component that returned my WebView in a View with a set height OUTSIDE the file with the component that returns my WebView.
The wrapper View with the height should be in the file that component with the WebView was imported into.
It took several takes and prayer but I finally found it out muahahaha!
The real problem is in the property startInLoadingState, you have to set this to true:
<WebView
startInLoadingState={true} />
I would like to disable only the copy and cut options in a WebView with a contenteditable div. Users should still be able to select, lookup, paste and etc. How should I do this for a React Native app?
If there are no other touchables(buttons etc) in your webview then you can do this. I was able to disable zooming, text selection and other pointer events on the React Native side, by wrapping WebView in a View and setting a few props:
<View pointerEvents="none">
<WebView
source={{ uri: webviewUrl }}
scrollEnabled={false}
/>
</View>