React Native New ImageBackground Component iOS Android Example

React Native recently launched a new named as ImageBackground with new version specially to give support for Image Background, because before this component we need define View or Text background as Transparent in order to place above image. Using this component we can easily create full background images within a few seconds. This component is official and you can find its documentation here. So in this tutorial we would going to implement ImageBackground Component in iOS Android React Native App Example Tutorial.

Note : Before the ImageBackground component if we use Image as Background then it would show us a block of background on the Image and this errors specially comes in iOS devices, To remove this error we have to use backgroundColor: ‘transparent’ in the style of Text or View component, but now there is no need to use this kind of style attribute.

Contents in this project ImageBackground Component in iOS Android React Native App Example Tutorial:

1. Import Platform, StyleSheet, View, Text and ImageBackground component in your project.

2. Create a Root View in render’s return block, This view is our main view.

3. Creating ImageBackground component with a Text component inside it, you can palace any View or any Component according to your requirement. This type of functionality is called as Background image via Nesting in react native.

4. Creating Style.

5. Complete source code for App.js File :

Screenshot in Android device:

ImageBackground Component

Screenshot in iOS device:

2 Comments

  1. Hello sir, I want to know that how can we put app intro slider in fullscreen.
    I am using bottom navigation drawer sp whenever i am implementing Slider it will not be coming into fullscreen .
    Help me.

Leave a Reply

Your email address will not be published. Required fields are marked *