The Linking library is used in react native for deep linking process. Using the Linking library we can open or navigate to any website URL from our Android-iOS app to device default web browser. So in this tutorial we would going to open website URL in default browser on button click in iOS Android application Example tutorial.
Contents in this project open website URL in default browser iOS Android react native app Example:
1. Import StyleSheet, View, Button and Linking component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, Linking} from ‘react-native’;
|
2. Create a Root view in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
3. Create a Button component in View and call the Linking.openURL() function on Button onPress event. We would call this using Self Fat Arrow Function.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
<Button title=‘Click Here To Open Website URL’ onPress={ ()=> Linking.openURL(‘https://reactnativecode.com’) } />
</View>
);
}
|
4. Create Style for View.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
}
});
|
5. Complete source code for App.js File :
|
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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, Linking} from ‘react-native’;
export default class Mynewproject extends Component {
render() {
return (
<View style={styles.MainContainer}>
<Button title=‘Click Here To Open Website URL’ onPress={ ()=> Linking.openURL(‘https://reactnativecode.com’) } />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
Create Global Scope Variables in React Native used between Activities
React Native Create Custom Alert Dialog Box in Android iOS App Tutorial
React Native Show Image Icon Inside Activity Header Title Bar in React Navigation
Configure Firebase SDK in React Native iOS Project Tutorial
React Native Generate Random Number Between 1 to 100 in Android iOS
