I'm using a bunch of ScrollViews in my Expo React Native application, and I've noticed that whenever the ScrollView animation is still happening, I am unable to tap any TouchableHighlights or TouchableOpacity elements until the animation has fully stopped.
Is this type of blocking expected behaviour, and is there any way to circumvent this? Running on iOS.
Thanks!
Did you use like this??
<ScrollView keyboardShouldPersistTaps="always">
// all stuff here
</ScrollView>;
Use keyboardShouldPersistTaps and set it to always. This should solve your problem.
Related
A simple, one page view website, which I built on ReactJS started twitching anytime I moved my cursor. It seems like the browser width is changing, with a few pixels of margin added to the right, every time that happens. This doesn't seem to happen when viewing with the Chrome browser in mobile screen mode, under the developer tools. Which probably means it's as a result of the cursur interacting with the page. Has anyone encountered something similar?
It usually happens when you have an element that changes its width, padding, margin or border on hover or a Javascript event. This is not caused by React.
Please, share some css or JS you think may be involved to help more.
I found the bug, an animating component that kept touching the edge of the browser was the issue. I added some margin to the right of the component and the twitching stopped. Thanks to everyone for your help.
I use variations of <CardActionArea onClick={someFunction}> throughout my React app, and I've come across an instance where clicking the card does not fire the onClick function. This is only when the component is rendered in a certain tree, in all other parts of the app it works as expected. I'm using in Algolia's react-instantsearch-dom component in my component that's giving the issue.
The ripple effect (the animation that shows the user clicked the card) fires in every situation. So it doesn't seem to be something as simple as a transparent div overlaying the card. Below is a working component tree compared to the one with the issue:
working
click does nothing
One odd thing you can see above is both CardActionArea components show an empty onClick. But the function still works in most cases.
I'm using onClick={() => console.log('click')} to test, so it doesn't appear to be an issue with the function itself. Any ideas on what could prevent the onClick even from firing, or suggestions for troubleshooting would be appreciated.
Edit: This issue doesn't happen in iOS Safari, but it does occur in Firefox.
Edit 2: Since I don't understand this well enough to reproduce it, and it doesn't appear to be something obvious in the code, I'm looking for troubleshooting advice. Is there something in Chrome's developer tools I can use to trace this behavior?
The issue was the anonymous component between Article and CommentEditor. The component was rendered into a Dialog conditionally, and removing the condition so that it always rendered when the Dialog was open fixed the issue.
I have a TextInput field in my React Native app that's near the bottom of the screen. When I click to type in it, on Android the TextInput moves up out of the way so that you can still see it while you're typing, but on iOS the TextInput doesn't move, so in this case it's obscured behind the keypad.
Is there a way to make the same behaviour on iOS where it moves up out of the way?
Please wrap your textinput container inside KeyboardAvoidingView, or if you are looking for a better solution you can try KeyboardAwareScrollView, it will surely solve your problem
I am able to change the position (swipe up) of my View accordingly with PanResPonder. The problem is during the swipe motion, the content of the View being dragged for the swipe do not render.
I tried using flexGrow:1 and flex:1 so as the View enlarge with the swipe, the View would be getting filled by content.
I know there a few libraries out there for swipes but I think this is fairly doable without library.
Thanks in advance cheers.
It really depends on your approach there. First things first.
You have to understand about JS Bridge and Native on react-native. The JSBridge is single-treaded and all the fired renders go through there. It means you can easily get dropped on FPS if you do not take it into account. The Native, well, is native code running, thats all.
To have performant app, you have to keep the passes over the bridge to a minimun.
The PanResponder touches happen on the native side, while the component renders use the bridge. You should put some code there, but i would bet that the problem is with too many renders happening and the JS Bridge gets overloaded.
Also try to use Direct Manipulation (https://facebook.github.io/react-native/docs/direct-manipulation.html) to avoit rendering one entire tree and perform it on the native side.
I'm using scrollview with react native web and I am trying to get the scrollview to snap into place however it just scroll like normal. I have tried using these props but it isn't working.
horizontal= {true}
decelerationRate={0}
snapToInterval={200} //your element width
snapToAlignment={"center"}
Unfortunately this does not seem to be currently implemented :(
Source: https://github.com/necolas/react-native-web/issues/1250
There is always pagingEnabled={true} but this is not exatcly the same thing.