Slide images from FlatList like Tiktok slide - React Native

Question

I have one screen where I listed all images, when I click on one image its navigate to other screen where I want to implement TikTok slider and list all images from previous screen.

Code from first screen:

const renderItem = ({ item }: { item: IInspire }) => {
    return (
        <TouchableOpacity
            key={item.id}
            onPress={() => {
                navigation.navigate('DetailIspireScreen', { item });
            }}
            style={[styles.itemsTouchable, { height: item.id % 2 === 0 ? 250 : 140 }]}
            activeOpacity={0.8}
        >
            <ImageBackground style={styles.imageBackgroundContainer} imageStyle={styles.imageBackStyle} source={item.image}>
                <View style={styles.itemsSize} />
                <LinearGradient colors={['transparent', Colors.Black]} style={styles.linearGradientContainer} />
            </ImageBackground>
        </TouchableOpacity>
    );
};

Code from screen where I want implement TikTok slider

type InspiredScreenParam = {
InspiredScreen: {
    item: never;
};

};

export const DetailIspireScreen = (): JSX.Element => {
const navigation = useNavigation();
const item = useRoute<RouteProp<InspiredScreenParam, 'InspiredScreen'>>()?.params?.item;
const onBackPress = () => navigation.navigate('Inspire' as never);

const renderItem = () => {
    return (
        <View style={styles.list}>
            <ImageBackground style={styles.imageBackgroundContainer} imageStyle={styles.imageBackStyle} source={item.image}>
                <View style={styles.itemsSize} />
                <LinearGradient colors={['transparent', Colors.Black]} style={styles.linearGradientContainer} />
                <View>
                    <TouchableOpacity>
                        <Image style={styles.fireIcon} source={require('@assets/icons/metro-fire.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image style={styles.shareIcon} source={require('@assets/icons/share.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image style={styles.blackFireIcon} source={require('@assets/icons/black-fire.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image style={styles.shopIcon} source={require('@assets/icons/shop.png')} />
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        </View>
    );
};

    return (
    <SafeAreaView style={styles.container}>
        <TouchableOpacity onPress={onBackPress}>
            <Image style={styles.backButton} resizeMode='cover' source={require('@assets/icons/left-arrow.png')} />
        </TouchableOpacity>
        <FlatList renderItem={renderItem} pagingEnabled={true} data={[item]} />
    </SafeAreaView>
);

};

Thank you :)