i would like to know if there is any way to stop scroll event on iOs and Android
Steps to reproduce
scroll FlatList / ScrollView
click any button
already tried "onScroll" but when i set scroll ref.scrollTo it will scroll when stroll stops
Example GIF:
This is just an idea which I think might work, you may have to test it yourself.
Assuming you have the following state, controlling the modal.
const [open, setOpen] = useState(false);
You can probably add a onScroll event to Flatlist (onScroll is inherited from ScrollView), then
const onScroll = (e) => {
if (open) e.preventDefault();
}
If there is a delay before e.preventDefault is called, since setting state is async, you may want to use useRef() instead of useState() for checking if (open) since scroll happens quickly.
Another idea is to probably use a listener for the flat list, to listen to scroll, using same logic above.
Related
First-of-all I apologise because I'm new to this concept of redux haha so bare with me here :)
I have implemented a very simple redux in my app
I have one screen here ListAnItem
Here there is a button.
Add size when pressing this they get navigated to another screen called SizeSelector
SizeSelector
here there is a button called dispatch size when they press this button it runs the following.
dispatch({type: "ADD_SIZE", payload: size })
this works perfectly with useSelector.
once this dispatch has been run I use navigation.goBack() to send the user back to the ListAnItem screen.
but once they come to this screen I want to add this useSelector redux state value to a useState hook something like this;
const [sizeState, setSizeState] = React.useState(null)
how can I change this state the minute something has been added to useSelector value of ADD_SIZE.
if that makes sense 😂.
Thanks,
Arnav.
I have a small app where I am testing the animations for the items. Basically when I swipe the item, it gets removed from the list and the animation is continued for like 0.5s. The problem is that the mobx updates the array when the item is removed from it and it cancels out the animation. So instead of animation continuing to show removal or addon effect, it just disappears quickly.
How do I avoid this? I can have timeouts to wait for the animation to finish and remove an item, but more importantly, the issue is the same if I fetch the data and the array is topped up, I get the same animation cancelling effect.
To show how I am rendering the components would be something like this:
private renderCards = () => {
const {fakeData} = this.props.mainStore
const el = []
fakeData.forEach(fd => {
el.push(
<Draggable key={fd.id}>
<ItemCard item={fd} />
</Draggable>,
)
})
return el
}
Example to replicate is here https://snack.expo.dev/Jh0Vk0cTX
When navigating between screens using the StackNavigator with a fade transition, a user is able to click during the transition animation and possibly hit a TouchableOpacity on the screen that is being navigated away from. The TouchableOpacity registers the hit and thus the app responds accordingly. This is causing issues for "fast clicking" users where they click a button to navigate to a new screen and immediately click where they think a new button will be, but in reality is clicking a button on the previous screen.
Is there a way to prevent any user interaction during these transition animations? I have tried setting the transition duration to 0 like so:
transitionConfig: () => ({
transitionSpec: {
duration: 0
}
})
but the issue still occurs.
I do not want to disable the animation completely, because it is quick enough for most users and they like the animation.
So in your case you can do several things
You can use React Native Activity Indicator -> View
You can use Overlay Library -> react-native-loading-spinner-overlay -> View GitHub
If you like to make loading like facebook / instagram -> then use react-native-easy-content-loader -> View GitHub
you need to flag screen before navigating away; disabling all touchs.
an easy way would be to have a reusable hook that return a transparent absolute positioned View that cover entier page and a callback to enable it;
so you flow will be; enable this which will overlap whole screen and capture any clicks basically disabling them;
something more like:
function useOverlay(){
const [isVisible, toggle] = React.useState(false);
const Component = React.memo(()=><View style={styles.transparentAbsolute} />,[])
return [toggle, isVisible ? Component : null];
}
then inside your Screen before you call navigate just call toggle
and include Component at top of you screen;
export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
const [ toggle, component ] = useOverlay();
return (
<View style={styles.container}>
{component}
<Button onPress={()=>{toggle(true); navigation.navigate('Home');} title="go home" />
</View>
);
}
I have a large long image with a few inputs at the bottom in my react native view. When the view loads I want it to be "scrolled" to the bottom of the page -- all the examples I can find online are triggered because of some event that the user does.
I want to call scrollToEnd() but I'm not sure where in the lifecycle the ref will actually be set -- anyone have ideas?
Use scrollToEnd this way. It will take to the bottom of ScrollView
<ScrollView
ref={ref => this.scrollView = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true});
}}>
I am not clear with your question but
With react-native Image component we have onLoad prop. I think this is what you are looking for.
try something like:
<Image source={{uri...}} onLoad={(e)=>this.handleImageLoaded(e)}/>
then inside handleImageLoaded method you can use scrollToEnd() with some ref as per your code.
also there are other useful props like onLoadStart/End check here
https://facebook.github.io/react-native/docs/image
Or if you are just waiting for the view to render then to scroll
for that I think componentDidAppear() lifecycle method, if using react-native -navigation by wix
or with react-navigation
willFocus, willBlur, didFocus and didBlur events for the component render cycle.. explained here
https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
I have a navigator structure like so:
stack
drawer
stack
tab
My hierarchy from there is:
view
view
flatlist
I'm trying to get my flatlist to scroll downward. You can see the finger animation but the list isn't moving. You can see it in this gif:
Screen Recording 2018-03-16 at 11.30 p.m..gif
Here's my code:
it('should have infinite scrolling', async () => {
await expect(element(by.id('NewsFeed.Scroller'))).toBeVisible();
await expect(element(by.id('NewsFeedScreen.ArticleListing-0'))).toExist();
await expect(element(by.id('NewsFeedScreen.ArticleListing-10'))).toNotExist();
await element(by.id('NewsFeed.Scroller')).scroll(10000, 'down');
await expect(element(by.id('NewsFeedScreen.ArticleListing-10'))).toExist();
});
I believe the issue is that scroll action begins at the bottom of my screen. When I attempt to start a scroll form there myself it does not work either. I'm not seeing anything in the API to allow me to put an offset on where that gesture begins. Looking that element in the inspect reveals that its not in the area which Detox begins its gesture: https://d3vv6lp55qjaqc.cloudfront.net/items/323C3D3U3y1Y2Z1B2L2J/Screen%20Shot%202018-03-16%20at%2023.47.48.png?X-CloudApp-Visitor-Id=2852073&v=31521c3c
I've found a solution which is good enough while we wait for https://github.com/wix/detox/issues/589 to be resolved.
await element(by.id('NewsFeedScreen.ArticleListing-0')).swipe('up', 'fast', 0.9);
https://github.com/wix/detox/blob/master/docs/APIRef.ActionsOnElement.md#swipedirection-speed-percentage
Results in the behaviour I'm looking for, scrolling down in my list
If anyone faces this issue now -- try using the startPositionX or startPositionY parameters of the .scroll() method, e.g:
await element(by.id('scrollView')).scroll(200, 'down', NaN, 0.5)
Worked like a charm for me, when I faced the same problem.
https://github.com/wix/Detox/blob/master/docs/APIRef.ActionsOnElement.md#scrolloffset-direction-startpositionx-startpositiony