React Native ImageBackground examples

Last updated on January 7, 2021 A Goodman Loading... Post a comment

A few examples on how to use ImageBackground in React Native.

Example 1: Full-screen image background

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

const bgImage = {
  uri:
    'https://cdn.pixabay.com/photo/2015/04/28/13/35/balloon-743572_960_720.jpg',
};

const App = () => {
  return (
    <ImageBackground source={bgImage} style={styles.background}>
      <View style={styles.container}>
        <Text style={styles.text}>Good morning!</Text>
      </View>
    </ImageBackground>
  );
};

// styling
const styles = StyleSheet.create({
  background: {
    flex: 1
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
  }
});

export default App;

Result:

Example 2: Using resizeMode

Note: resizeMode and style are at the same level.

import 'react-native-gesture-handler';
import React from 'react';
import {View, Text, ImageBackground, StyleSheet} from 'react-native';

const bgImage = {
  uri:
    'https://cdn.pixabay.com/photo/2013/07/18/01/26/larch-163340_960_720.jpg',
};

const App = () => {
  return (
    <ImageBackground
      source={bgImage}
      style={styles.background}
      resizeMode="contain">
      <View style={styles.container}>
        <Text style={styles.text}>Good morning!</Text>
      </View>
    </ImageBackground>
  );
};

// styling
const styles = StyleSheet.create({
  background: {
    margin: 60,
    width: 300,
    height: 300,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#fff',
  },
});

export default App;

What you should see when run your code:

Example 3: Rounded Corners Area With imageBackground

Summary: Using borderRadius with the imageStyle prop.

import 'react-native-gesture-handler';
import React from 'react';
import {View, Text, ImageBackground, StyleSheet} from 'react-native';

const bgImage = {
  uri:
    'https://cdn.pixabay.com/photo/2013/07/18/01/26/larch-163340_960_720.jpg',
};

const App = () => {
  return (
    <ImageBackground
      source={bgImage}
      style={styles.background}

      // add this line
      imageStyle={{borderRadius: 200}}
      
      resizeMode="contain">
      <View style={styles.container}>
        <Text style={styles.text}>Good morning!</Text>
      </View>
    </ImageBackground>
  );
};

// styling
const styles = StyleSheet.create({
  background: {
    margin: 60,
    width: 300,
    height: 300,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#fff',
  },
});

export default App;

Result:

The above examples are quite simple but from here, you’re pretty good to go.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles