gatedude.eth on Warpcast

Content pfp

0 reply

0 recast

0 reaction

df pfp

$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

9 replies

1 recast

16 reactions

gatedude.eth pfp

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 pfp

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

gatedude.eth pfp

const styles = StyleSheet.create({ list: { paddingHorizontal: ITEM_SPACING, }, itemContainer: { width: ITEM_WIDTH, marginHorizontal: ITEM_SPACING, }, item: { width: ITEM_WIDTH, height: 200, backgroundColor: '#ccc', justifyContent: 'center', alignItems: 'center', }, }); export default HorizontalScroll; ```

0 reply

0 recast

0 reaction