I am new to React Native and am working on a simple app, the app loads data structured like file folder hierarchy, so at top level, when a item is clicked, I want to switch to next level and Etc. every level has the same data, I guess I need to use the same component, I want to use react navigation to switch between levels, but I cannot do this because the same component is used.
Of course you can say just change the components' state with different data, but I need the navigation animation effect and navigating to upper level when click the back navigation component at the top.
Please help, thanks]1
Since I am using StackNavigation, using "push" is the answer,
this.props.navigation.push('ScreenName');
see this link: https://reactnavigation.org/docs/en/navigating.html
Related
So in my app I have a main component which have switch navigator and then inside switch navigator I have a tab navigator which renders different screens. I have registered notification handler in top component.
Now the problem is that when notification is received, I want to make some changes on screens inside tab navigator.
I have read about redux which will provide common store so state could be updated but I dont want to use that.
I have also read about lifting state up but in my case i have more nested components so I dont want to do that as well.
So suggest me some way to do it?
I have solved the problem by using react context api. It is simple wrap your top level component with provider and define some veriable and access that variable in any component.
tl;dr:
Is there a way to add a dumb/presentational React Native component on the React Navigation stack, so I don't leave the container when pressing the phones back button, but just show the previous component?
I cannot figure out how I should design my app. So far I have as many smart/container components as I have main pages (one for login, profile etc.) because my impression is that it is better to have few containers and more (presentaional) components.
So far I have only used top level navigation with React Navigation, but I have a flow where the user wants to book an appointment at the doctor.
My initial thought would be that I have one BookingContainer that renders different components, but I can't seem to figure a way to keep the navigation stack inside the one container, so now I have several containers (BookingMainContainer, BookingChooseDateContainer and BookingChooseTimeSlotContainer). The reason why I want one container is that much of the data I need is the same, so I want to just pass the data to the children instead of getting the (same) date from the state in the three related containers.
I am new to React Native and want to be able to make my code where the user clicks on text and it takes them from an initial page and am very confused as to how I am supposed to do this and where to put what. Am I supposed to have separate files for separate pages? Thanks!
The Navigator or NavigatorIOS components are what you're looking for. Basically, your text elements need to be wrapped in an element like TouchableHighlight that has an onPress handler that utilizes the navigator.push() to navigate. Or you could jThis tutorial does a pretty good job describing how Navigation works on a basic level within React Native apps.
As to separate files for separate pages - it's not necessary, but as you develop your own custom components and your apps become more complicated, having them in separate files helps with keeping you
I am playing around with React Native and trying to build a test application. I am stuck at the Navigator part: https://facebook.github.io/react-native/docs/using-navigators.html.
I understand that one can change the state of the variables (as they are doing in the tutorial, increasing the index variable). What I don't really understand is how I could render different Components based on which button is clicked in my menu. In the example, it is always "MyScene" that is rendered, but with different values. How should I do to render "MyScene2" when clicking on some button?
I am building an app with tab bar using react native's NavigationExperimental API based on the example from github.
One thing I noticed is that tabs' UI states are not preserved when switching between tabs.
All state including fetched data, scroll position, other UI states, etc., are lost when I switch away from one tab to another.
As a result, it ends up refetching the data, and renders everything from the scratch.
The only thing that is preserved is the current navigation state tree.
This is not true for native apps. Native apps keep every state (data, scroll position and other UI states) so that the switch feels instant and lightweight avoiding any network calls or re-renderings.
How can this be implemented in react native?
I was thinking hiding and showing like display: 'none', but display is not available in react-native.