react-native-webview don't supported Window? - react-native

I use EXPO SDK 38 and react-native-webview:10.9.0,I run the code
<View style={styles.mapView} >
<WebView
source={{ uri: 'https://www.google.com' }}
onLoad={console.log('success')}
onLoadStart={console.log('start')}
style={{width:'100%',height:'100%'}}
/>
</View>
Android and IOS is OK, but Web is not OK. I check the react-native-webview website,it supported Windows.

Related

react native application not bundling

I'm trying to run my application from Xcode version 10.3 and react native version 0.57.8
open a terminal Running Metro Bundler on port 8081. and it's done but the simulation did not bundle project brings an older version.
I tried to delete node_modules again install and same way for pod file but it's still not working also I tried clear bundle but still not bundle my project?
any idea?
Try adding overflow: 'hidden' as below
const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
<View style={{ height: SCREEN_HEIGHT , width: SCREEN_WIDTH ,overflow:'hidden' }}>
<WebView
source={{ uri: 'https://github.com/facebook/react-native' }}
scalesPageToFit={true}
/>
</View>

React native webview files are not loading in ios device, but loading fine in simulator

Im storing the local file in xcode,files are loading in simulator but not loading in ios device
im using react-native-webview version 5.0.1, in my webview im passing sourse as {uri: 'ICF-Package/ICFPackage/index.html'}
<WebView
source={Platform.OS === 'ios' ?
{uri: 'ICF-Package/ICFPackage/index.html'} :
{ uri: 'file:///android_asset/ICF-Package/ICFPackage/index.html' }
}
ref={(webView) => this.webView = webView}
originWhitelist={'["*"]'}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
useWebKit = {true}
//scalesPageToFit={true}
scrollEnabled={false}
onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={true}
/>
im not getting any error message but files are not loading in real device
Maybe that helps you to debug WebViews a bit deeper if running at your Device: https://stackoverflow.com/a/48572797/1256697
But as little Workaround for local files, you could try to use the 'html' parameter instead the 'uri' Parameter for IOS:
const myHTML = require('./ICF-Package/ICFPackage/index.html');
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
Also see: https://aboutreact.com/load-local-html-file-url-using-react-native-webview/
But maybe the cleanest way to solve it for IOS is to put a copy of your html-File in Project > resources > index.html and link it like that with your Webview:
<WebView
style={{flex: 1}}
originWhitelist={['*']}
source={'./resources/index.html'}
javaScriptEnabled={true}
domStorageEnabled={true}
/>

React Native WebView does not scroll horizontally on android

Here is my code:
<View style={{ height: this.state.height, ...props.style }}>
<WebView
ref="child"
{...this.props}
scalesPageToFit={false}
scrollEnabled={true}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
onMessage={ this.handleMessage.bind(this) }
source={{ html }}
/>
</View>
This works fine on iOS build (Scrolls horizontally) but does not work on Android.
react native WebView has been deprecated you should now use
https://github.com/react-native-community/react-native-webview
First answer is right, you should use react-native-webview now.
And, your problem may be related with your View wrapper I think.

How to open deep link in React Native app?

How to open link like viber://chat... & tg://... in React Native with standard Linking.
<TouchableOpacity onPress={() => { Linking.openURL(`viber://chat?number=0123456789`); }}>
<View style={styles.messengerBlock} >
<Image source={{ uri: 'viber' }} style={styles.messengerIcon} resizeMode={'contain'} />
<Text style={styles.messengerText}>Viber</Text>
</View>
On Viber you can only open these links: https://developers.viber.com/docs/tools/deep-links/
If you want to open another app in your app, you can use react-native-app-link.
If you want your app be opened with deep linking, such as:
myApp://case/1
then take a look at this article.

How to show <Image /> in React Native in a good way

I'm using react-native-camera library. But I'm not sure if the problem is the library or the react native self. The problem occurs only on Android
I'm using react native version 0.39 and the android version is 6.1.
The problem is when I try to take a few pictures in a row, after fifth taken image the app crashes. I'm not getting any errors of warnings.
It crashes also if the camera is opened and if I wait for about 15-20 seconds with camera opened, without taking photo.
On newer, better phone (s8 galaxy) and newer android versions (7) it works as expected, but on this one it isn't working. Thus, I suppose that it has something to do with memory issues. But I'm not sure.
I've added largeMemoryHeap to the manifest file.
In android studio I get log file as follows:
Thus, no errors, nothing. But the app doesn't work.
The stuck of code where those photos are rendered is as follows:
<ScrollView removeClippedSubviews={true}>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
<Zoom visible={this.state.zoomVisible} close={() => this.setState({zoomVisible: false})} image={this.state.zoomImage} imageIndex={this.state.zoomIndex} pictures={this.state.zoomPictures} remove={this.onRemoveImage.bind(this)} />
<View style={{width: width, height: 1, backgroundColor: '#ddd'}} />
<View style={styles.container}>
{cards}
</View>
</ScrollView>
And one card is as follows, and I have a stuck of 10:
<TouchableHighlight onPress={this.props.onPress} style={styles.card} underlayColor={s.color}>
<View style={styles.innerCard}>
<View style={styles.innerImageContainer}>
<Image contain='contain' style={styles.innerImage} source={this.props.image}/>
</View>
<View style={[styles.innerTitle, {borderBottomWidth: 4, borderBottomColor: this.props.mandatory ? this.props.noImage ? s.paletteMandatory : s.success : '#fff'}]}>
<Text style={styles.textTitle} allowFontScaling={false} numberOfLines={1} ellipsizeMode={'tail'}>{this.props.title}</Text>
</View>
</View>
</TouchableHighlight>);
I found somewhere that i need to add removeClippedSubviews={true} to scroll view, but it does not help.
On IOS it works just fine.
I would be infinitely grateful if someone has an idea?