Images wont render - Struggling with 'react-native-snap-carousel' - react-native

Question

unfortunately I am struggling to really grip how this library works, specifically the ParallaxImage component. I was wondering if someone could help me out. I am struggling to get my images to render.
Here are the docs: https://www.npmjs.com/package/react-native-snap-carousel#props-methods-and-getters
here is the following code but I also have a snack already running it here
It doesn't load on the web btw, you have to choose IOS or android.
import React, {useRef, useState, useEffect} from 'react';
import Carousel, {ParallaxImage} from 'react-native-snap-carousel';
import {
View,
Text,
Dimensions,
StyleSheet,
TouchableOpacity,
Platform,
} from 'react-native';
const ENTRIES1 = [
{
title: 'Text',
thumbnail: require('./assets/splash.png'),
},
{
title: 'Text 1',
thumbnail: require('./assets/splash.png'),
},
{
title: 'Text 2',
thumbnail: require('./assets/splash.png'),
},
];
const {width: screenWidth} = Dimensions.get('window');
const MyCarousel = props => {
const [entries, setEntries] = useState([]);
const carouselRef = useRef(null);
const goForward = () => {
carouselRef.current.snapToNext();
};
useEffect(() => {
setEntries(ENTRIES1);
}, []);
const renderItem = ({item, index}, parallaxProps) => {
return (
<View style={styles.item}>
<ParallaxImage
source={{uri: item.thumbnail}}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<Text style={styles.title} numberOfLines={2}>
{item.title}
</Text>
</View>
);
};
return (
<View style={styles.container}>
<Carousel
ref={carouselRef}
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
data={entries}
renderItem={renderItem}
hasParallaxImages={true}
/>
</View>
);
};
export default MyCarousel;
const styles = StyleSheet.create({
container: {
flex: 1,
},
item: {
width: screenWidth - 60,
height: screenWidth - 60,
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ios: 0, android: 1}), // Prevent a random Android rendering issue
backgroundColor: 'white',
borderRadius: 8,
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
});

Answer 1

I think you need to replace source={{uri: item.thumbnail}} with source={item.thumbnail}
because uri is used for web image url like https://image.png and require is used for the local image. I am tested on my android it's working fine now