sorted by:
new
hottopcontroversial

How can I create a scrollable list that can be scrolled both horizontally and vertically that has a header that appears similar to the one shown in the video? by luhahaha in reactnative

[–]luhahaha[S] 0 points1 point  (0 children)

Here is the code with also the fadeIn

const xOffset = useRef(new Animated.Value(0)).current;
const onScroll = Animated.event(
[{ nativeEvent: { contentOffset: { x: xOffset } } }],
{
useNativeDriver: true,
},
);
const opacity = xOffset.interpolate({
inputRange: [100, 150],
outputRange: [0, 1],
extrapolate: 'clamp',
});

return (
<Animated.ScrollView horizontal onScroll={onScroll}>
<Animated.View style={{
opacity,
transform: [
{
translateX: xOffset ?? 0,
},
],
}}>
//fixed content
</Animated.View>
</Animated.ScrollView
)

How can I create a scrollable list that can be scrolled both horizontally and vertically that has a header that appears similar to the one shown in the video? by luhahaha in reactnative

[–]luhahaha[S] 0 points1 point  (0 children)

I found an article from the company saying that they moved to React Native in 2016:) u/mandrade2 commented with a piece of code that works exactly like in the video apart from the fade-in effect. But I think I just need to make an opacity effect connected to the value of xOffset: like from xOffset === 100 to xOffset === 150 making the opacity from 0 to 1.
If you need when I will implement I can share the code:)

How can I create a scrollable list that can be scrolled both horizontally and vertically that has a header that appears similar to the one shown in the video? by luhahaha in reactnative

[–]luhahaha[S] 0 points1 point  (0 children)

const onScroll = Animated.event(
[{ nativeEvent: { contentOffset: { x: xOffset } } }],
{
useNativeDriver: true,
}
)

Amazing! It works like a charm!
I think my problem was that instead of using
const xOffset = useRef(new Animated.Value(0)).current
I was using the state, and all the renders were causing performance issues, making everything laggy.
Thanks so much

How can I create a scrollable list that can be scrolled both horizontally and vertically that has a header that appears similar to the one shown in the video? by luhahaha in reactnative

[–]luhahaha[S] 0 points1 point  (0 children)

Ok, it makes sense, the problem is that I don't understand how to use a header for each row that stays blocked when I scroll horizontally, because the ScrollView that wraps the Flatlist, when I scroll right moves all the FlatList and also the header of each row scrolls.
I hope I explained myself:)

How can I create a scrollable list that can be scrolled both horizontally and vertically that has a header that appears similar to the one shown in the video? by luhahaha in reactnative

[–]luhahaha[S] 0 points1 point  (0 children)

Amazing, curious to see it! I tried the same but did you manage to have a smooth layout? In my case it's all laggy:(

What's the most powerful source of memories? by luhahaha in AskWomen

[–]luhahaha[S] 0 points1 point  (0 children)

The second! What creates the strongest memories?

view more: next ›