Content
@
0 reply
0 recast
0 reaction
David Furlong
@df
$200 USDC bounty for a link or built yourself to an expo component (for react native on iOS) that implements this type of horizontal scroll. (see video). Must have: A) snapping to columns B) display the edges of the next/prev item (if any) C) overscroll at start and end with natural springy animation like iOS native has D) Graceful handling of this horizontal scroll within a vertical scroll - horizontal scrolls shouldn't trigger vertical scrolls in the parent container E) Smooth animations F) A natural sensitivity to the swiping action (not oversensitive or under sensitive) disclaimer: I tried to make this, code here: https://gist.github.com/davidfurlong/cdcc7fc955a43131f02f172fba896467 but struggling with C), D), E) and F) react-native-pager-view might have some useful code, but it doesn't support peeking the next/prev item @bountybot
8 replies
3 recasts
11 reactions
gatedude.eth
@gatedude
Also, I wrote a simple code you should use; It'II help sort the issue you're facing. Here's the Google doc, I gave you access so you can access it but I'II also write it here. Also, my code doesn't support peeking next/prev items, but you can modify the code to achieve it by adjusting the `contentContainerStyle` and `renderItemContainerStyle Here's the Google Doc: https://docs.google.com/document/d/1i7MfpbxCmGHH0H_DMu0CL8_Z0xyMbKhptstBibmbFNw/edit?usp=drivesdk
1 reply
0 recast
0 reaction
gatedude.eth
@gatedude
Here's the code: `` jsx import React, { useState } from 'react'; import { View, FlatList, Dimensions, StyleSheet } from 'react-native'; const { width } = Dimensions.get('window'); const ITEM_WIDTH = width * 0.8; const ITEM_SPACING = width * 0.1; const HorizontalScroll = () => { const [data, setData] = useState([...Array(20).keys()]); const renderItem = ({ item }) => ( <View style={styles.item}> <Text>{item}</Text> </View> ); const keyExtractor = (item) => item.toString(); return ( <FlatList data={data} renderItem={renderItem} keyExtractor={keyExtractor} horizontal={true} pagingEnabled={true} snapToInterval={ITEM_WIDTH + ITEM_SPACING} decelerationRate={0.9} // adjust for natural springy animation scrollEventThrottle={16} // adjust for smooth animations showsHorizontalScrollIndicator={false} contentContainerStyle={styles.list} renderItemContainerStyle={styles.itemContainer} /> ); };
1 reply
0 recast
0 reaction
