Hello Friends,
Welcome To Infinitbility!
React Native provide <image />
component for adding image statically or dynamically for your app.
Today we see how to add static, dynamic, and data:base64 images.
For importing image component from react native write like below.
1import { Image } from 'react-native';
Table of Contents
Static Image
React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:
1<Image source={require('./icon.png')} />
Dynamic Image
To add a dynamic image to your app, place it somewhere in your server and reference it like this:
1<Image source={{uri: 'https://infinitbility.com/preview.jpg'}} />
Data image
To add a data:base64 image to your app, reference it like this:
1<Image2 style={{3 width: 51,4 height: 51,5 resizeMode: 'contain'6 }}7 source={{8 uri:9 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='10 }}11/>
Tips
provide all-time height and width for images. it will improve your app performance.
if you get help, please share post on your social network
More From React Native Tutorial
Basics
- Introduction To React Native
- React Native Environment Setup using expo
- React Native Environment Setup for windows
- React Native Environment setup on Mac OS
- React Native Environment setup on linux
- React Native Project Structure
- React Native State
- React Native Props
- React Native Styling
- React Native Flexbox
- React Native Text
- React Native Textinput
- React Native Commands
- React Native ScrollView
Advances
- React Native Dark Mode
- React Native Fonts
- React Native SQLite
- React Native DatepickerAndroid
- React native ScrollView scroll to position
- How to align icon with text in react native
- React Native Image
- React Native Firebase Crashlytics
- React Native Async Storage
- React Native Share
Error & Issue Solution
- Task :app:transformDexArchiveWithDexMergerForDebug FAILED In React Native
- Expiring Daemon because JVM heap space is exhausted In React Native
- Task :app:transformNativeLibsWithMergeJniLibsForDebug FAILED In React Native
- Unable to determine the current character, it is not a string, number, array, or object in react native
- App crashed immediately after install react native video or track player
- how to delete SQLite database in android react native
- React native material dropdown twice click issue
- How to get the current route in react-navigation?
- how to disable drawer on the drawer navigation screen?
- Image not showing in ios 14 react native
- React Native image picker launchimagelibrary on second time issue
- how to open any link from react native render Html