How to Open external URL in Web Browser in React Native

Sometimes, you may want to open a URL in the web browser of the device. You can use Linking API from react native which is used for managing the interaction with incoming and outgoing links.

With Linking API, you can open a URL through the default browser of the device. You just need to invoke openURL method to open the external URL.

Linking.openURL(url).catch((err) => console.error('An error occurred', err));

Go through the react native example below where reactnativeforyou blog is opened when the app is launched.

import React, {useEffect} from 'react';
import {View, Text, StyleSheet, Linking} from 'react-native';

const URL = 'https://reactnativeforyou.com';
const App = () => {
  useEffect(() => {
    Linking.openURL(URL).catch(err => console.error('An error occurred', err));
  });

  return (
    <View style={styles.container}>
      <Text>App</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2c3e50',
  },
});

export default App;
react native external url

That’s how you open URL in external browser in react native.

Leave a Reply

%d bloggers like this: