I have a full screen modal and I want to "navigate" inside modal.
The structure of the modal
is a header and a footer that is the same in all screens and the body that is the different screens. Body is the only that will change.
How can achieve this with React Native Functional component without dependencies.
You can create :
A state React.useState step initialise at 0
An array of object with what you want for "body" elements
A function next and / or back to update state step change body
You can get elements of your body like so :
steps[activeStep].label
You have a good example from here demo sandbox demo and here documentation material ui stepper
Related
I have created a chat app in react native. Now I want to create app header similar like whatsapp with DP and text on header. For this I need to pass custom component on top bar as in react native navigation (wix), in top bar title accepts only string. I have gone through various links but got no success.
Any help is appreciated.
Reference image given below.
Note: I am using react native navigation (wix) version 4.8.4
Thanks
you can disable the header in react navigation and create a custom header component and pass as prop or children,
at least thats how I do it.
in component file, before exporting
ComponentName.navigationOptions = {
header: null,
};
and then just pass header
<ComponentName header={jsx} />
The scenario is I have a pop-up modal and I am hitting some API and getting back some JSON data in the modal. I need the JSON data to be used on the screen that appears when the modal is closed. Is there a way to get data from the modal to screen?
Redux is a predictable state container for JavaScript apps.
in your case, redux will worked.
here is the package link:
https://www.npmjs.com/package/react-redux
i am currently working on an App for Android and iOS - i am using react native.
Is there any way to hide the navigation bar dynamically in react-navigation or should i rather switch to react native router flux?
When the user changes to landscape i want to hide the navigation bar, when he goes back to Portrait, i want to show it again.
I know how to change it statically by using {header: null} in the navigation Options, but this does not help me in this case, at least i did not find a way to solve this.
Thanks in advance!
This is sort of a hack but I think you can replace the provided header component from React navigation with your own, then add a redux state that controls its visibility.
Either wrap your screens with a view that contains an onLayout event that will trigger redux action to set the visibility of your custom header.
Im trying to build a mobile app where we have a constant header bar throughout the app. I have the body where I have buttons.. Each button navigates to a screen. I need the header bar in every screen but I dont wish to repeat the code in all screens. I dont intend to use TabNavigator either. Is there any alternative??
in image1 and image 2 the bar with the search,cart and offerzone tag remains same. The rest changes..I need this behaviour without repeating the header code in both screens.
You can separate the code of headerBar into a independent component, and use redux store to manage this component's props.
After you do this, you just need to import the component in each screen, the component will get its props from redux store automatically. Each screen can contact headerBar with redux actions
As shown above, I want to create this two-part screen where I can click onto both the A component and B component on the first view provided here. When a user scrolls B component, it may take up the entire screen and move over the A component. (A component does not move with the FlatList).
I'm new to react native and was wondering how I could create such behavior? I tried using absolute positioning and ListHeaderComponent inside the FlatList but didn't really get anywhere. Let me know if anyone has an idea.
Thanks!
I would try something like the following screen structure:
View
Image
ScrollView w/ trans background that goes to the top of screen
FlatList with top padding to push it below the image
Items in list
/FlatList
/ScrollView
/View
You could also see if react-native-parallax-scroll-view works for you as it looks somewhat similar to what you describe
https://github.com/jaysoo/react-native-parallax-scroll-view