{"id":5497,"date":"2022-01-17T04:38:25","date_gmt":"2022-01-17T04:38:25","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5497"},"modified":"2022-01-17T06:04:19","modified_gmt":"2022-01-17T06:04:19","slug":"open-url-in-react-native","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/","title":{"rendered":"Open URL in React Native"},"content":{"rendered":"

React Native<\/a> 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.
\nSometimes 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.<\/p>\n

    \n
  1. Create a new project using below command
    \nnpx react-native init AwesomeProject<\/code><\/li>\n
  2. Now paste the below code in the App.js file.
    \n\/* eslint-disable consistent-this *\/
    \n\/* eslint-disable no-undef *\/
    \n\/* eslint-disable handle-callback-err *\/
    \n\/* eslint-disable prettier\/prettier *\/
    \n\/**
    \n* React Native App
    \n* https:\/\/github.com\/facebook\/react-native
    \n*
    \n* @format
    \n* @flow strict-local
    \n*\/
    \nimport React from 'react';
    \nimport { TouchableOpacity } from 'react-native';
    \nimport { Text } from 'react-native';
    \nimport { View } from 'react-native';
    \nimport { Linking } from 'react-native';
    \nimport { StyleSheet } from 'react-native';
    \nexport default function App(){
    \n const openURI = async () => {
    \n const url = 'http:\/\/www.google.com'
    \n const supported = await Linking.canOpenURL(url); \/\/To check if URL is supported or not.
    \n if (supported) {
    \n await Linking.openURL(url); \/\/ It will open the URL on browser.
    \n } else {
    \n Alert.alert(`Don't know how to open this URL: ${url}`);
    \n }
    \n }
    \n return (<View style={styles.container}>
    \n <TouchableOpacity onPress={openURI} style={styles.button}>
    \n <Text>Open Google.com<\/Text>
    \n <\/TouchableOpacity>
    \n <\/View>)
    \n}
    \nconst styles = StyleSheet.create({
    \n container: {
    \n flex: 1,
    \n justifyContent: 'center',
    \n alignItems: 'center'
    \n },
    \n button:{
    \n borderColor:'black',
    \n borderRadius:50,
    \n borderWidth:1,
    \n padding:10
    \n }
    \n });<\/code><\/li>\n
  3. 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.
    \n\"google-app\"\n<\/li>\n<\/ol>\n

    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<\/a> are offered by StudySection along with other programming certification exams. <\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

    React Native is a cross-platform framework developed by Meta Platform, Inc. It allows developers to build applications for iOS, Android,<\/p>\n","protected":false},"author":1,"featured_media":5498,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[509,753],"acf":[],"yoast_head":"\nOpen URL in React Native - StudySection Blog<\/title>\n<meta name=\"description\" content=\"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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Open URL in React Native - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-17T04:38:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-17T06:04:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/01\/Native.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Open URL in React Native\",\"datePublished\":\"2022-01-17T04:38:25+00:00\",\"dateModified\":\"2022-01-17T06:04:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/\"},\"wordCount\":182,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"React-Native\",\"URL\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/\",\"url\":\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/\",\"name\":\"Open URL in React Native - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2022-01-17T04:38:25+00:00\",\"dateModified\":\"2022-01-17T06:04:19+00:00\",\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/open-url-in-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Open URL in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Open URL in React Native - StudySection Blog","description":"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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Open URL in React Native - StudySection Blog","og_description":"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.","og_url":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2022-01-17T04:38:25+00:00","article_modified_time":"2022-01-17T06:04:19+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/01\/Native.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Open URL in React Native","datePublished":"2022-01-17T04:38:25+00:00","dateModified":"2022-01-17T06:04:19+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/"},"wordCount":182,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["React-Native","URL"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/open-url-in-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/","url":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/","name":"Open URL in React Native - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2022-01-17T04:38:25+00:00","dateModified":"2022-01-17T06:04:19+00:00","description":"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.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/open-url-in-react-native\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/open-url-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Open URL in React Native"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":9433,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5497"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=5497"}],"version-history":[{"count":2,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5497\/revisions"}],"predecessor-version":[{"id":5501,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5497\/revisions\/5501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/5498"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=5497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=5497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=5497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}