I am trying to create a spinning globe animation in react native. My approach is to have two components with the first being a circular container that will act as the globe. The second will be a child of the globe and will be a background image of the earth that will scroll across the view.
I am able to get the background image to scroll across the globe and it looks pretty good.
I want the background image to have the same height as the globe container but I want it to be much wider so that it is continuously scrolling across the globe creating a spinning earth animation. I am currently encountering the problem that the width is being cut off so that when the image scrolls its just the initial view that is scrolling and the rest of the image has been lost.
I have tried a variety of things such as playing around with the images resizeModes, hardcoding heights and width values, and setting heights and widths to undefined.
Here is the render for my most successful attempt:
render() {
const { animatedRotate } = this.state;
const scroll = animatedRotate.interpolate({
inputRange: [0, 1],
outputRange: [1, 200]
});
return (
<View style={styles.globeContainer}>
<Animated.Image
source={ require('../resources/world.png') }
//resizeMode="cover"
//resizeMode="center"
//resiveMode=""
style={[styles.globe, {transform: [{translateX: scroll}]}]}
/>
</View>
);
}
const styles = StyleSheet.create({
globeContainer: {
height: 150,
width: 150,
borderRadius: 75,
backgroundColor: '#f0f0f5',
overflow: 'visible', //visible for testing only
borderWidth: 0.5,
borderColor: '#D3D3D3',
borderRightColor: '#D3D3D3',
borderRightWidth: 10,
alignSelf: 'center',
},
globe: {
height: 150,
width: undefined
}
});
And here are screenshots of the output:
Anyone have thoughts on this?
