To get data from the web, React Native offers a default solution (similar to JavaScript): fetch.
Here’s how to use it:
function Product() {
const [name, setName] = useState('Placeholder Name');
const [price, setPrice] = useState(0);
useEffect(() => {
fetch('<https://example.com/getProduct?id=10>') // <- we call the url
.then(result => result.json()) // <- and transform the result in an object
.then(result => {
setName(result.name);
setPrice(result.price);
}); // <- and based on the name and price, set the UI variables
}, []);
// ^- only when component mounts (it first appears on the screen)
// for more details: see useEffect docs with empty array of dependencies
return <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text>{name}</Text>
<Text>{price}$</Text>
</View>
}