How can I repeat a pattern image to create a background in React Native?

Question

I'm building a simple ReactNative app for iOS and I'm trying to add a background image. It seems like there is no backgroundImage tag, and while I did manage to show the image on the page once, I can't repeat it throughout the page like you can with CSS. Any suggestions?

Answer 1

iOS

Images on iOS now include a repeat resizeMode property.

Use it like so:

<Image
    src={/* whatever your source is */}
    resizeMode="repeat"
/>

Android

June 2018 Update:

Starting from react-native 0.56 Android Images also support the repeat prop. (https://github.com/facebook/react-native/commit/0459e4ffaadb161598ce1a5b14c08d49a9257c9c)

Before June 2018:

On Android the repeat property does NOT work so: you'll have to use something like Shiraman's answer

External lib:

There's now this great project called react-native-bgimage (created by Alex Melanchenko) which works well:

Here's how I use it:

import RepeatingPattern from 'react-native-bgimage';

<RepeatingPattern
    drawable="block_pattern"
    style={{
      height: 45,
    }}
/>

and then I add a pattern png file in android/app/src/main/res/drawable/block_pattern.png

Answer 2

Despite that this question is pretty old I would like to put my two cents in. It is also can be done via <ImageBackground> component (reference).

Example:

<ImageBackground source={require('./path/to/image.png')} style={{width: '100%', height: '100%'}} imageStyle={{resizeMode: 'repeat'}}>
  // Your inside content goes here
</ImageBackground>

Don't forget to import component in the beginning of file, e.g. import { ImageBackground } from 'react-native';

Answer 3

I would like to extend Sriraman answer. To make the repeated images as the background, you need to take an addtional step of adding a new view and making its position absolute and background transparent, then adding all the other components inside of it.

var React = require('react-native');
var Dimensions = require('Dimensions');

var {
  Image
} = React;

var RepeatImage = React.createClass({
    render: function(){
    var images = [],  
    imgWidth = 7,
    winWidth =Dimensions.get('window').width;

    for(var i=0;i<Math.ceil(winWidth / imgWidth);i++){
        images.push((
           <Image source={{uri: 'http://xxx.png'}} style={} />
        ))
    }

    return (
        <View style={{flex:1,flexDirection:'row'}}>
        {
         images.map(function(img,i){
         return img;
         })
        }
          <View style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
              {/*Place all you compoents inside this view*/}
          </View>
        </View>
    )
  }
});