I have the next layout on the page:
And I'm trying to add popup menu like on youtube mobile app:
but I can't place it above other elements. React Navive for web creates own stacking context for each block. So that z-index doesn't make any sense. Is there any ways how to handle that?
Related
I am creating a React native application with the following scenario:
There is a navigation bar at the bottom of the screen, allowing the user to navigate between three main pages. On one of these pages, there is a backdrop with a container overlayed on it with two buttons. Each of these buttons should show open different "pages" in that container, and the navigation bar will be hidden when the user opens one of those "pages". An image is included below.
App layout example
My question is: how is this best implemented in react native?
My original idea was to implement a custom Stack Navigator with createStackNavigator. While this does work, I was wondering if this is a good way to go about it.
One result from using a custom navigator is that the navigation state in the container is also bound to the back button of the device (on Android). However, this is a welcome feature in this case as it makes sense in the navigation flow.
I am trying to implement a UI layout similar to google maps "explore" on Android, (see gif) in React Native.
In my UI design I have app navigation tabs at the bottom of the screen, with a full page map background, overlaid with a "bottom sheet" coming from above the tabs, and a search box component at the top. See UI sketch below.
I have found various react-native ui components which look useful, but I can't figure out the styling to arrange them in the layout I want.
Several of the bottomsheet components I'm looking at, for example, rn-bottom-drawer show gifs similar to what I'm trying to create, e.g this animation, but I can't find an actual code example of how that UI was created. For example, the same library example just shows the bottom drawer over an empty screen.
What combination of wrapping elements and styles would allow me to create the layout described? I come from a XAML background and this kind of layout is very easy to create, but I can't get my head around how to do it in react native.
It is halfway possible with the component "react-native-swipe-up-down".
The swipe up above the App works, but it is really buggy. Had the same problem as you and couldn't find anything better than swipe-up-down til today.
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.
I am writing a custom component for a Windows 8.1 tablet application our team are mostly developing in React Native.
I've realised that some of the custom code we need doesn't naturally belong to any specific UI element. For example, we want a button to trigger the native Camera UI dialog (as in this CameraUICapture element sample). However, there's no reason this would necessarily be triggered from a button. It could be a callback from something else, it could be a click event on an image. I don't want to lock the function calls to a specific UI piece.
All the tutorials and demos I have managed to find so far for React Custom Components are explicitly for UI pieces, and require implementing a React View manager subclass to interact with React when the piece is loaded. Is this the only way to write native code accessible from a React page? Do I need at least a dummy UI element even to hook into functional code in the native layer, or is there another way?
It turns out the phrase I'm yearning for is "Native Modules".
iOS:
https://facebook.github.io/react-native/docs/native-modules-ios.html
Android:
https://facebook.github.io/react-native/docs/native-modules-android.html
Windows:
https://github.com/Microsoft/react-native-windows/blob/master/docs/NativeModulesWindows.md
I have created a View where the NavigationBar comes from Obj-c(Native code) and the rest of the view comes from React Native.
Now in the react native view, i have a link which should show the content in a new screen with the navigation experience. I am able to show the content but unable to find a way to change navBar title and show back button on the navBar.
Can you please let me know how we can get access to NavigationBar(Obj-c) in ReactNative?
I don't believe React Native supports this. You cannot take an object created in one language and access it in another. It would be a better idea to create your navigation bar in your JS and use it throughout your app. That even allows you to propagate that UI to your android apps.