I started to learn react-native and I encountered a problem. I need an image to repeat in the background but it's streched. It seems the resizeMode is not working.
import React, { Component } from 'react';
import { Image, ImageBackground, StyleSheet, Button, View, Text } from 'react-native';
const styles = StyleSheet.create({
home: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
},
backgroundImage: {
flex: 1,
resizeMode: 'repeat',
backgroundColor: '#882829'
}
});
export class HomeScreen extends Component {
render() {
return (
<View style={{flex: 1}}>
<ImageBackground source={require('../assets/stain_pattern.png')} style={styles.backgroundImage}>
<View style={styles.home}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
</ImageBackground>
</View>
);
}
}
You need to use imageStyle={{resizeMode: 'repeat'}}. Refer documentation link
You need apply repeat in image style
<ImageBackground
source={require('../assets/stain_pattern.png')}
style={styles.backgroundImage}
imageStyle={{ resizeMode: 'repeat' }}
>
<View style={styles.home}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
</ImageBackground>;