Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Slide images from FlatList like Tiktok slide - React Native

$
0
0

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>