How to open deep link in React Native app? - react-native

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.

Related

How to show two Camera previews in React Native?

I would like to use two previews of the same camera(just front or just back) in the same view, with React Native, but i wasn't able to do that.
Basically like this:
<Camera />
<Text>some text...</Text>
<Camera />
For the camera I've tried to used both expo-camera and react-native-vision-camera
I've tried to copy the Camera with ViewShot from "react-native-view-shot", but it is too slow, and there is a very annoying flickering when updating the image.
<SafeAreaView>
<ViewShot onCapture={onCapture} captureMode="continuous" style={dimension}>
<Camera style={styles.camera} type={type} ref={ref => {setCameraRef(ref); }}>
</ViewShot>
<Image fadeDuration={0} source={source} style={dimension} />
</SafeAreaView>
Has anybody had the same issue and solved it? Thanks.

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 i make TouchableHightLight (checkbox) in React Native Accessibility?

I work on accessibility for an ios app.
I use TouchableHightLight on checkboxes.
I need the screen reader of ios, the VoiceOver to know how to announced to the user if a checkbox has been checked or unchecked.
<View style={styles.rememberMeContainer}>
<TouchableHighlight
underlayColor="transparent"
accessibilityLabel={props.rememberMeText}
accessible={true}
style={styles.rememberMeCheckBox}
onPress={() => {props.setRememberMe(!props.rememberMe)}}>
<Image style={styles.checkBoxImage}
source={props.rememberMe ?
require("../../../images/general/v_icon_purple.png") : null}/>
</TouchableHighlight>
<Text accessible={false} style={styles.rememberMeCheckBoxlabelStyle}>
{props.rememberMeText}
</Text>
</View>)
I read:
https://facebook.github.io/react-native/docs/accessibility.html
, but i don't find anything about it, or I missed something.
How can I do it accessible?
accessible={true}
style={styles.rememberMeCheckBox}
onPress={() => {props.setRememberMe(!props.rememberMe)}}>
<Image style={styles.checkBoxImage}
source={props.rememberMe ?
require("../../../images/general/icon_unchecked.png") : require("../../../images/general/icon_checked.png")}/>
</TouchableHighlight>
Currently (0.59), React Native doesn't support a switch or checkbox for accessibilityRole.
But there's a PR open adding support for it. https://github.com/facebook/react-native/pull/24095
Hopefully, it will land in version 0.60.

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?

React Native Touchable Highlight, open link on press.

Simple question, I'm trying to get a link to open whenever the user presses a button, the relevant bits of code are:
_linkPressed: function(url){
LinkingIOS.openURL(url);
},
<View style={styles.contactBox}>
<TouchableHighlight
onPress = {()=> this._linkPressed('www.google.com')}
>
<View style={styles.contactRow}>
<Image
source={{uri: 'email.png'}}
resizeMode='contain'
style={styles.contactIcon} />
<Text style={styles.contactText}> Write with your questions </Text>
</View>
</TouchableHighlight>
</View>
But for some reason the link won't open in the simulator I tried changing the _linkPressed function to just log "google.com" to the console and that worked. But I can't seem to grok the LinkingIOS procedure.
Thanks!
You need to add http:// before the link url.
<TouchableHighlight onPress={()=> this._linkPressed('http://www.google.com')} >
Check out this example.