I have a horizontal list(paging enabled) required in my react-native app and i want to expand/collapse that card when user swipe up/ down. In collapsed position, card has less width after expand width of card would increase. I want to do this animation using native
driver.
Please let me know if anyone have any solution of this problem.
You can check the SwipeGestureHandler/PanGestureHandler of react-native-gesture-handler to handle the swiping or panning of cards.
Then you can use the Animated of react-native to handle the animation.
Related
I want to have a scrollable (with snap points) react native navigation stack screen(presentation: "modal") in my app. I don't want anything like "react-native-modal" library or official Modal from react native library. I want an actual screen with modal behaviour and I can achieve that with presentation: "modal" property but I want it to have snap points. Perfect example would be the iOS fitness app.
So this is the screen when you initially press upload button. As you can see it takes maybe 40% - 50% height of the screen
If you scroll down height expands and it acts as ordinary screen with presentation: "modal"
And lastly if you scroll back up it springs back to its original position and it acts as a modal(no gap at the top of the screen as in second image)
That is the behaviour I am looking for.
If it is possible I would like to get similar behaviour on android as well.
I tried to implement that behaviour with "react-native-modal" and official Modal from "react-native" components but I want to have it as a separate screen. I also want it to feel "native like" and with these stuff it doesn't feel that way.
You may try this library react-native-simple-bottom-sheet
I am new in react-native, and I wanna to rotate entire screen manually in react-native, is it possible?
Inside application, on click button start screen goes in background with floating buttons and it start recording screen, I wanna to rotate screen manually from floating button which was in background. rotate screen over all application.
I have checked react-native-orientation and react-native-orientation-locker npm modules which works only on particular application screen rotation.
Is it possible in react-native or not?
Yes, it is possible to rotate your view based on your requirements. but for this, I think you have to manage it yourself.
You can achieve to by using the transform API.
refer to the official documentation for how to transform the layout.
https://reactnative.dev/docs/transforms
I currently have a ScrollView/Flatlist containing 4 items with paging enabled. When rendered, each item covers the entire screen in portrait mode. On Android, when the user tries to swipe vertically from one item to another, this requires "large" swipe gestures.
I am trying to increase the "sensitivity" of the react native ScrollView so that the user requires smaller swipe gestures to switch from one item to another.
At the moment the switch to the next/previous page requires that roughly 50% of the target page is visible. I want to reduce this value so that the user does not need to do big swipe gestures.
Any suggestions on how I could fine-tune the props of the ScrollView/FlatList would be great!
So I have a react-native app which is using react-native-navigation.
Whenever I click a card in my app, it pushes me the card screen.
What I want to achieve is the following: when swiping down from that screen, as you swipe down the screen gets smaller and the other one is in the background, but I haven't found anything that can help me with that, any packages? Also, I'd have to pop the current screen to have the other one the background, but if I pop it, the current screen can't stay and get smaller as i swipe down.
So basically I need to animate a component pop.
If you haven't figured it out yet, you could show the card screen as an overlay or modal and add a swipe-down gesture to the Container component of the screen and when it reaches the bottom, you could dismissOverlay or dismissModal with no animation.
In my app, I have horizontal FlatList which is used for swiping between several sub-pages of a screen. This works great.
However, on one of the pages, I have a Slider component. On iOS it works fine, but on Android, the parent ScrollView of the FlatList seems to "steal" the swipe gesture. I am only able to adjust the Slider by clicking very precisely on its thin line, but I cannot adjust it by sliding.
What I need is something like one of these
A view that wraps the Slider component and stops swipe gestures from being propagated to the parent ScrollView
A way to make the FlatList/ScrollView not consume swipes directly on elements that responds to horizontal swipes themself
Somehow adjust the area of which the Slider component will eat the touches around it (it's very small and hard to hit directly). I already tried adding a hitSlop prop, with no luck.
Any suggestions for a solution are very appreciated :)
Check example code and result here.
https://snack.expo.io/#esbenvb/mad-yogurt