Menu
I had added the same image's versions (@2x @3x)into src>asssets to work our platform in all devices. Here is the problem, VSCode only recognizes i.e path.png (it doesnt recognize @2x and @3x). How can we deal with this problem?
911
With React Native, one team can maintain two platforms and share a common technology — React. As you can use the same source code to run on iOS and Android devices, you don't have to hire separate developers to write code for Android and iOS devices.
Adding Image Let us create a new folder img inside the src folder. We will add our image (myImage. png) inside this folder. We will show images on the home screen.
We will add our image ( myImage.png) inside this folder. We will show images on the home screen. Local image can be accessed using the following syntax. React Native offers a way to optimize images for different devices using @2x, @3x suffix.
Adding Image 1 App.js. Local image can be accessed using the following syntax. 2 image_example.js 3 Output. React Native offers a way to optimize images for different devices using @2x, @3x suffix. The app will load only the image necessary for particular screen density.
The specific steps are different depending on what platform you're targeting. The keys to integrating React Native components into your Android application are to: Set up React Native dependencies and directory structure. Develop your React Native components in JavaScript. Add a ReactRootView to your Android app.
I am using simple react native project for adding the splash screen to it. So, let get started by initialising the react native project in your system. After running these two lines into the terminal, you will have to react native project on your system. If you noticed that react native application have a white background splash screen.
React native automatically pick up the desired image from the 3 options available i.e. 1x, 2x, 3x. We just have to provide the filename for the base image.
Example
.
├── button.js
└── img
├── check.png
├── [email protected]
└── [email protected]
So, as stated above, when you have to use check image, just provide the image path for check.png and the rest will be automatically taken care by react native according to device screen density for both android and ios devices.
Use the image just like below and everything works like a charm.
<Image source={require('./img/check.png')} />
More you can read here about the images from react native official docs.
I hope this helps.... Thanks :)
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
