Images from Hybrid Apps
Hybrid application denotes those apps which are built using both platform-specific code and React Native. The syntax for including images in hybrid apps is slightly different from adding static images.
<Image source={{uri: 'asset:/logo.png'}} style={{width: 100, height: 120}} />
Implementation of React Native Images
In this section, we will see a sample application that will display an image (logo of coding ninjas in this case) in our React Native application. To achieve this, we use the React Native Image component.
Code:
import React, { Component } from 'react'
import { Image } from 'react-native'
const App = () => (
<Image source= {{uri:'https://www.codingninjas.com/assets-landing/images/security_cn.png'}} style={{width: 400, height: 300}}/>
)
export default App
Output:
Not only this, we can add various styles to images.
Adding Style to Buttons
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
paddingTop: 50,
},
stretch: {
width: 700,
height: 300,
resizeMode: 'stretch',
},
});
const App = () => {
return (
<View style={styles.container}>
<Image
style={styles.stretch}
source= {{uri:'https://www.codingninjas.com/assets-landing/images/security_cn.png'}}
/>
</View>
);
}
export default App
Output:
Also See, Image Sampling
Frequently Asked Questions
Does Android support WebP and GIF?
WebP and GIF are not supported by default on Android. However, we can use them by including some optional modules in the build.gradle file.
Which property is used to control the blur radius of the blur filter?
The property named blurRadius is used to adjust the blur radius of a blur filter that is added to an image in React Native.
What should I do if my image file takes a lot of time to load or the image file gets corrupted itself?
It is always good to display a default image for the cases like image files loading very slowly or the image file getting corrupted itself.
Conclusion
In this article, we have extensively discussed React Native Image and saw a sample application along with its implementation. Check out our Android Development Course on the Coding Ninjas Website to learn everything you need to know about Android development.
We hope this blog has helped you enhance your knowledge regarding React Native Images. You can also consider our React Js Course to give your career an edge over others. Do upvote our blog to help other ninjas grow. Happy Coding!
84+ registered