react-native's Linking api not opening the url in the browser after openURL() - react-native

Question

I have made a button as:
<-Button onPress={() => Linking.openURL(props.albumName.url)} /->
upon pressing the button, the app isnt getting redirected to a new browser window. I checked it in the AVD as well as on my Android phone. The parameter props.albumName.url == https://www.amazon.com/Evolve-Imagine-Dragons/dp/B07143J5MM/. Other properties such as props.albumName.title, props.albumName.artist etc are being displayed correctly so nothing wrong with the syntax, I also tried logging props.albumName.url out to confirm that it contains the given url in the correct format

Answer 1

I guess you are missing title property in button tag, it's a required props.
I have tried the same code, it works great.
Here is my code
import React, { Component } from 'react';
import {
View,
Linking,
Button
} from 'react-native';
export default class Button1 extends Component {
render() {
return(
<View>
<Button
title="click"
onPress={() => Linking.openURL(this.props.albumName)}/>
</View>
);
}
}
And am using that component here
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Button1 from './Button';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>`enter code here`
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Button1 albumName = 'https://www.amazon.com/Evolve-Imagine-
Dragons/dp/B07143J5MM/' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});