React Native Image Background

 

ImageBackground

React Native  Keyboard Avoiding View and Model

A typical element demand from engineers acquainted with the web is foundation picture. To deal with this utilization case, you can utilize the <ImageBackground> part, which has similar props as <Image>, and add anything that kids to it you might want to layer on top of it.

You might not have any desire to involve <ImageBackground> now and again, since the execution is fundamental. Allude to <ImageBackground>'s source code for more understanding, and make your own custom part when required.

Note that you should indicate some width and level style credits.

Example

import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";

const image = { uri: "https://reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} resizeMode="cover" style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0"
  }
});

export default App;

Reference

Props

Image Props

Inherits Image Props.

imageRef​

Allows to set a reference to the inner Image component