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.
Related
I was researching this since last year from time to time. I always wonder how Instagram handles the feeds screen?
What kind a component they using for it?
I'm sure it's not a ScrollView becouse it's much more performant than a ScrollView.
It is not also a FlatList becouse I know the basics of the FlatList how it renders the rows etc... and I am sure that they don't use it. For example a FlatList renders the items on top of each other like a card stack. In this behavior you cannot achieve the current Pinch Zoom feature that they have.
I thought maybe they use flipkart's RecyclerListView which is based on Java and much more performant than ScrollView and FlatList, but I am not quite sure about that too.
Any ideas about what they using to achieve current functionality on the feeds screen?
I mean, is there a method or specific listing component to achieve same behavior with all the functions like Double Tap to Like, like Pinch Zoom with overlaying everything.
#Quick note about pinch zooming, it's nearly impossible to build a component with current states of ScrollView and FlatList which will be performant and has same functionality.
You can check out my other topic about that here
Long story short, I have tried a lot of methods and 3rd party components to achieve same thing, but still could not do it.
Thanks for your thoughts!
What is the difference between TextInput import from "react-native" and "react-native-gesture-handler"?
I too was wondering abou this, but from looking at the source, we can see that the gesture handler version is just a wrapper around the base TextInput. export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
And online they explain that createNativeWrapper as
"Creates provided component with NativeViewGestureHandler, allowing it to be part of RNGH's gesture system."
So I think if you use the wrapped one, it will give you access to all sorts of gestures, like pinching, panning, long press etc that the base input doesn't have
I'm looking for a solution, if possible a library or a custom component, for React Native, without Expo.
I need to create a video frame that is movable in the screen, up and down, and cover the content. I also need to make it possible to click on the content behind it.
Another difficulty is that I need it to stay up on all screens during navigation.
I first tried to use reanimated-bottom-sheet with some increments, but the content behind the bottom is not clickable. Also, to make it available on all screens I needed to put in at the same level as React Navigation's BottomTabNavigator and it covers the tab bar too even with a zIndex.
I also tried to use modals, but I'm relatively new to React Native and couldn't find how to make the background touchable as well as making it movable.
I guess I need to make a view with absolute positionning and learn Reanimated, unless you have a simpler idea?
Thanks
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! :)
Using the react native's official Modal component
Is there any way to prevent the behavior when the modal is open, if i press the menu button of the mobile (built-in one) the modal flickers and closes temporary exposing the background view. Please see the attached url of the GIF for clarification . I am also not sure whether its a default behavior in react native or not.
https://imgur.com/LeTtNj5
Thanks in advance
This isn't so much a solution as much as it's guidance. You haven't really given enough detail to help you out properly. Best if you can share the code or setup a reduced test case at https://snack.expo.io that we can fiddle with.
That said, I'm not totally sure. This is an interesting problem, and I'm curious if you'll find a possible solution and it may depend on your implementation details. For instance, is the modal part of the navigation stack (react-navigation?) or is it an imported component? Either way, I would begin by playing with componentWillUnmount. Does it get called? If so, perhaps you can insert some black magic there to minimize the effect, but you'd first need to isolate what specifically is going on before you can hope to solve it.