In react native we can navigate directly from react native android app to other app screen in Google Play store. As we can see in many application there is a Give us Rating dialog dialog shows on screen & when user press button it will directly navigate them to Play store screen. We would use React Native’s Linking component in our tutorial. In current we tutorial we would Open Specific App in Google Play Store from App Android in react native.
Contents in this project Open Specific App in Google Play Store from App Android in React Native:
1. Before getting started the coding we would extract the android application’s Package name directly from Google Play Store. So open Play Store.
2. Search your desired application which you want to open from your react native app.
3. Copy its package name from Address bar like i did in below screenshot.
4. Import Platform, StyleSheet, View, Linking, TouchableOpacity & Text component in your project’s App.js file.
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Linking, TouchableOpacity, Text } from ‘react-native’;
|
5. Create a function in your application’s main class named as open_WhatsApp() and open_GoogleChrome (). In this function we are using Linking.openURL() inbuilt method and we would pass the android application package name which we have copied from Address bar.
1
2
3
4
5
6
7
8
9
|
open_WhatsApp = () => {
Linking.openURL(“market://details?id=com.whatsapp”);
}
open_GoogleChrome = () => {
Linking.openURL(“market://details?id=com.android.chrome”);
}
|
6. Creating 2 buttons using Touchable opacity in render’s return block.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity onPress={this.open_WhatsApp} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}>Open WhatsApp in Play Store</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.open_GoogleChrome} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}>Open Google Chrome in Play Store</Text>
</TouchableOpacity>
</View>
);
}
|
7. Creating Style.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0
},
button: {
width: ‘80%’,
paddingTop:12,
paddingBottom:12,
backgroundColor: ‘#00BCD4’,
borderRadius:7,
marginTop: 20
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
8. Complete source code for App.js file class.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Linking, TouchableOpacity, Text } from ‘react-native’;
export default class App extends Component {
open_WhatsApp = () => {
Linking.openURL(“market://details?id=com.whatsapp”);
}
open_GoogleChrome = () => {
Linking.openURL(“market://details?id=com.android.chrome”);
}
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity onPress={this.open_WhatsApp} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}>Open WhatsApp in Play Store</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.open_GoogleChrome} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}>Open Google Chrome in Play Store</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0
},
button: {
width: ‘80%’,
paddingTop:12,
paddingBottom:12,
backgroundColor: ‘#00BCD4’,
borderRadius:7,
marginTop: 20
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshots: