Why the items crowd together in React Native FlatList - react-native

What happened?? :
I've tried switching those props like keyExtractor/initialNumToRender/windowSize/ getItemLayout, but still not work.
When using ScrollView instead of FlatList, it will be what I expected:

I try testing not using styled-components, then it works!
I don't know why. (https://github.com/styled-components/styled-components)

Related

Scroll To Top on tabBarOnPress

How is it possible to make the screen scroll to top when the tab bar label is pressed? I am using createMaterialTopTabNavigator from react-navigation version 4.X.
I suspect that the way to do this is to do something inside tabBarOnPress, but I just can't figure out what! Here's a Snack to work with: https://snack.expo.dev/URMUVXUXxw
Thanks for your time.
Instead of importing ScrollView from react-native, import the ScrollView from react-navigation. I'm not sure how this fixes the problem, but it does :)

React Native ScrollView not allowed to add as if it's deprecated

After I add it, it works fine, but while typing, it's showing as if it's deprecated.
See the image below to know what I mean.
Am I doing something wrong of it's acting weird?
ScrollView is NOT deprecated component in React Native https://reactnative.dev/docs/scrollview

React native | What is the best replacement of 'TouchableOpacity'?

Button in react-native has too much limit, So I used TouchableOpacity (with many decorations). But The button made with TouchableOpacity has an delay issue. I also felt it has delay to change screens when it clicked.
So I started to find an replacement, but I couldn't find it. There are Styled components, but I don't know it's performance.
Is Styled components's performance is better than TouchableOpacity, or There is another thing I can use for replacement of TouchableOpacity?
Try see this. it is about my issue.
You can create View component with onStartShouldSetResponder={()=> ... } and do with it everything you want. Especially it very usefull with hitslop.

Custom Tab bar in React Native

I am trying to replicate something like the following in React native and React navigation. Having trouble getting started and even knowing if something like this would be possible. I got normal tabbed view working but, having trouble with this one. Any ideas on how it can be done are welcome. I am new to React Native.

onEndReached not working properly within any ScrollView React native

I am creating a Listview with pagination. If i put the ListView within KeyboardAwareScrollView then onEndReached not called properly. But if i don't put the ListView within any kind of Scrollview it is working perfectly.
My problem is that the content above the ListView is quite big. If i don't put it entire view within any scrollview the bottom content will not be shown.
How to solve this issue?
Thanks in advance.
Sorry I can't put comment because my rep is below 50.
I'm trying to imagine ur situation based on the description because there's no snapshot of ur desired outcome and current outcome. What I understood is this:
If i don't put it entire view within any scrollview the bottom content
will not be shown
This may be just the problem of not putting {flex:1} in the outtermost container view
If i put the ListView within KeyboardAwareScrollView then onEndReached
not called properly
ListView is deprecated as per React Native 0.55 documentation. I don't really understand your scenario, but you might wanna consider just using Scrollview or Flatlist, they might have the solution that ur looking for in a different form. If you are looking for a solution so that your view would avoid keyboard, u could simply use KeyboardAvoidingView from react native instead of using a third party lib, because sometimes they could be restrictive.
All the best! :)