I have an app which the user holds the screen (anywhere) to display an animation over the background. When the user releases the screen the animation stops and the background reappears. The problem is that I just don't know how to get the animated image to cover the entire screen.
At the moment it is a small rectangle in the centre of the screen.
Here's the code from the render and the style sheet:
render() {
return (
<ImageBackground source={background} style={styles.background}>
<TouchableOpacity style={styles.background}
onPressIn={this.onItemMouseDown}
onPressOut={this.onItemMouseUp}
>
</TouchableOpacity>
{this.state.isOn === true ? (
<View style={styles.background}>
<Text style={styles.timer}>{this.state.time}</Text>
{this.state.stateImages.map((item, index) => {
const opacity = this.opacity[index];
return (
<Animated.View
key={item.id}
style={[styles.anim, { animations: item, opacity}]}
>
<Image source={item.source} style={styles.animImage}/>
</Animated.View>
);
})}
</View>
) : null}
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
// justifyContent: "center",
// alignItems: 'center',
// position:"absolute"
},
background: {
flex: 1,
resizeMode: 'cover',
justifyContent:'center',
},
anim: {
flex: 1,
resizeMode :'cover',
alignSelf: "center",
position: 'absolute',
},
animImage:{
flex: 1,
resizeMode :'cover',
},
timer:{
alignSelf: "center",
zIndex: 100,
},
I've read:
Full screen background image in React Native app
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Setting component height to 100% in react-native
https://reactnative.dev/docs/layout-props
How do I center one image over another in React Native
Image resizing in React Native
But none of the suggestions work.
I think because this is using the <Animated.View/> which uses 2 styles styles.anim and styles.animImage it's not as straight forward as it seems.
How would I make this animated.view cover the screen without using fixed width and height (which wouldn't be compatible with different screen sizes)? Any ideas?
T
