Unable to Repeat background Image inside FlatList/ScrollView in React Native

Question

I am a React Native Developer. And I was trying to repeat background image and the background image is in flatlist. I tried solutions like provided stretch in resizeMode but ending with very bad background image. Do you guys know any solution?

<FlatList
                data={singleItem}
                renderItem={() => {
                    return (
                        <ImageBackground
                            source={require('../../Assets/Canvas.jpg')}
                            style={{ width: '100%', height: '100%' }}
                            resizeMode={'stretch'}
                        >

                            <View style={{ position: 'absolute', alignSelf: 'center' }}>
                                <Header />
                            </View>

                            <View style={{ height: VERTICAL_ITEM_PADDING }} />

                            <FlatList
                                showsVerticalScrollIndicator={false}
                                bounces
                                nestedScrollEnabled={true}
                                data={videosData}
                                contentContainerStyle={{ width: '100%' }}
                                style={{ width: '100%' }}
                                renderItem={({ item, _ }) => {
                                    return (
                                        <View style={{ width: dimensions.width, height: itemHeight, justifyContent: 'flex-end' }}>
                                            <View>
                                                <Text style={{
                                                    color: '#fff',
                                                    marginLeft: Platform.OS === "ios" ? 60 : 35,
                                                    fontFamily: 'GothamRounded-Bold',
                                                    fontSize: Platform.OS === "ios" ? 18 : 18,
                                                    allowFontScaling: true
                                                }}>{item?.name}</Text>
                                                <FlatList
                                                    horizontal
                                                    onMoveShouldSetResponderCapture={() => false}
                                                    data={item?.data}
                                                    style={{ marginLeft: Platform.OS === "ios" ? 20 : 0, width: Platform.OS === 'ios' ? '100%' : dimensions.width + NAV_BAR_HEIGHT + 20 }}
                                                    contentContainerStyle={{ paddingRight: Platform.OS === 'ios' ? 40 : 100 }}
                                                    renderItem={({ item, index }) => <RenderItem item={item} index={index} />}
                                                    showsHorizontalScrollIndicator={false}
                                                />
                                            </View>
                                        </View>
                                    )
                                }}
                                keyExtractor={(item) => item.id}
                            />
                        </ImageBackground>
                    )
                }}
            />