No need to store the URL in a variable for future use.
You can directly assign the URL to a variable like this:
const imageURL = 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.laramind.com%2Fblog%2Fpercorso-react-native-dal-livello-base-al-livello-avanzato%2F&psig=AOvVaw2Kb7DOrxfQ9hHdyuf-9m49&ust=1626099973147000&source=images&cd=vfe&ved=0CAoQjRxqFwoTCLDDv8yc2_ECFQAAAAAdAAAAABAD'
Then you can easily use it in your image component:
<Image src={{uri: imageURL}}/>
If you want to use the image offline, consider using an external library such as rn-fetch-blob. Here's an example app demonstrating how to do it:
// Instructions on downloading an image in React Native from any URL
// https://aboutreact.com/download-image-in-react-native/
// Import React
import React from 'react';
// Import Required Components
import {
StyleSheet,
Text,
View,
TouchableOpacity,
PermissionsAndroid,
Image,
Platform,
} from 'react-native';
// Import RNFetchBlob for file download
import RNFetchBlob from 'rn-fetch-blob';
const App = () => {
const REMOTE_IMAGE_PATH =
'https://raw.githubusercontent.com/AboutReact/sampleresource/master/gift.png'
const checkPermission = async () => {
// Check platform and perform appropriate action
if (Platform.OS === 'ios') {
downloadImage();
} else {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: 'Storage Permission Required',
message:
'App needs access to your storage to download Photos',
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('Storage Permission Granted.');
downloadImage();
} else {
alert('Storage Permission Not Granted');
}
} catch (err) {
console.warn(err);
}
}
};
const downloadImage = () => {
let date = new Date();
let image_URL = REMOTE_IMAGE_PATH;
let ext = getExtention(image_URL);
ext = '.' + ext[0];
const { config, fs } = RNFetchBlob;
let PictureDir = fs.dirs.PictureDir;
let options = {
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
path:
PictureDir +
'/image_' +
Math.floor(date.getTime() + date.getSeconds() / 2) +
ext,
description: 'Image',
},
};
config(options)
.fetch('GET', image_URL)
.then(res => {
console.log('res -> ', JSON.stringify(res));
alert('Image Downloaded Successfully.');
});
};
const getExtention = filename => {
return /[.]/.exec(filename) ?
/[^.]+$/.exec(filename) : undefined;
};
return (
<View style={styles.container}>
<View style={{ alignItems: 'center' }}>
<Text style={{ fontSize: 30, textAlign: 'center' }}>
React Native Image Download Example
</Text>
<Text
style={{
fontSize: 25,
marginTop: 20,
marginBottom: 30,
textAlign: 'center',
}}>
www.aboutreact.com
</Text>
</View>
<Image
source={{
uri: REMOTE_IMAGE_PATH,
}}
style={{
width: '100%',
height: 100,
resizeMode: 'contain',
margin: 5
}}
/>
<TouchableOpacity
style={styles.button}
onPress={checkPermission}>
<Text style={styles.text}>
Download Image
</Text>
</TouchableOpacity>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button: {
width: '80%',
padding: 10,
backgroundColor: 'orange',
margin: 10,
},
text: {
color: '#fff',
fontSize: 20,
textAlign: 'center',
padding: 5,
},
});