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 :)