How can I repeat a pattern image to create a background in React Native?
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
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';
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>
)
}
});