React Native is a cross-platform framework developed by Meta Platform, Inc. It allows developers to build applications for iOS, Android, TVOS, Android TV, and Windows with a single codebase.
Sometimes we want to load a web page in a browser application installed on the device instead of handling the URI response directly in the app. To open a URL in the browser from our app, React Native has an API that we are going to learn about in this blog.
- Create a new project using below command
npx react-native init AwesomeProject - Now paste the below code in the App.js file.
/* eslint-disable consistent-this */
/* eslint-disable no-undef */
/* eslint-disable handle-callback-err */
/* eslint-disable prettier/prettier */
/**
* React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import { TouchableOpacity } from 'react-native';
import { Text } from 'react-native';
import { View } from 'react-native';
import { Linking } from 'react-native';
import { StyleSheet } from 'react-native';
export default function App(){
const openURI = async () => {
const url = 'http://www.google.com'
const supported = await Linking.canOpenURL(url); //To check if URL is supported or not.
if (supported) {
await Linking.openURL(url); // It will open the URL on browser.
} else {
Alert.alert(`Don't know how to open this URL: ${url}`);
}
}
return (<View style={styles.container}>
<TouchableOpacity onPress={openURI} style={styles.button}>
<Text>Open Google.com</Text>
</TouchableOpacity>
</View>)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button:{
borderColor:'black',
borderRadius:50,
borderWidth:1,
padding:10
}
}); - Now, run your project on the device, you will see the below screen on ios device. On touching the button it will redirect you to the installed browser and will open google.
If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP certification exams are offered by StudySection along with other programming certification exams.
