I am developing my first React Native + Redux app. In my app I want to develop something similar to the friends requests slider of facebook:
There is a slider (left/right) where you can see the current content in a box and a little bit of the next and preview item. When swiping up or tap the content should be come to "full screen". Swiping left or right is disabled in full screen.
Only the current and maybe the two next and the two previous slides should be loaded but I think thanks to redux this is not a big deal.
Which components should I use for this?
A simple way to approach this might be to use a library like react-native-swiper for the swiping component and then use LayoutAnimation to animate the subview into the full screen view, taking care to remove the name in the header/etc.
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 have a screen with WebView (react-native-webview) which has scrollable content. If user continues scrolling after reaching the end of WebView, I want to take user to a different screen with a swipe up animation. With WebView's onScroll function property, I am able to determine if the user has reached end of content or not. But I am not able to take user to a different screen with an animation effect.
Since WebView acts different for android and ios platform (you can continue scrolling even after reaching end of content on ios), I had to use PanGestureHandler to identify if the user is performing swipe up action after reaching end of web content. But when I manually try to navigate user to a different screen, I am unable to create swipe up effect similar to one in GIF below.
I am using react-navigation v5 in my app.
I have already tried using react-native-swiper. It does not work well in Android because it internally uses Scrollable and WebView stop scrolling inside a Scrollable component.
I am using custom HTML content here, so replacing WebView is not really a choice. Is there a way to utilize Stack Navigator to create such an effect?
Thank you.
The Yelp app for iOS is designed such that after you enter and send a search query, something like this comes up:
The screen consists of a map control in the background, with a screen on top displaying a list view that you can swipe up/down depending on whether you want to see the list/map (respectively).
How would something like this be accomplished using React Native? For example, would the React Navigation or React Native Swiper libraries help me superimpose a list view on top of the map control?
You can use PanResponder.
Here is a good article which ay help you. Click here.
The Google Spaces app had a raised bump in its bottom navigation. I kinda liked the look but I'm not sure how best to recreate it using React Native.
I'm assuming it would be something like adding an image above the navbar to show the bump but that doesn't seem right since the actual button in the navbar wouldn't extend into the curved area.
Here's a link to an image of the navbar in question:
I recently implemented navigation in my app using NavigatorIOS in React Native. However, I think I've encountered a problem. Say I have 10 nav buttons on my home screen. Correct me if I'm wrong but I'm assuming (since I haven't done the backend yet) that if I use the first button to navigate to the next screen (let's call it Second.js), wrote/saved some data, and then went back and navigated to Second.js with the second button, that data from before would still be there? If so, is there a way for each button to navigate to a different "version" of the same screen? For example, could each button go to its own version of Second.js so that each button has its own local data in its Second screen, or would I have to make Second1.js, Second2.js, Second3.js, etc.? If the former isn't possible, I'd need a fixed number of nav buttons, plus a lot of memory is wasted with all these new classes that are basically replicas of each other. Thank you!