Comments (8)
It's actually very easy to implement without redux. On your app launch, usually in src/app.js
, you're probably calling:
// post-login state
Navigation.startTabBasedApp({...});
Whenever you want to switch structure, you can simply call startApp
again and the structure will be changed in runtime. So, for example, let's assume you have a logout button somewhere that should switch the app state back to single screen for login, you'll do:
onLogoutButtonPress() {
// pre-login state
Navigation.startSingleScreenApp({...});
}
from react-native-navigation.
It's not a problem to have both.
When you start the app with either a single page or with tabs, you're actually setting this structure to be the root of the app.
Based on your app state, you can call startSingleScreenApp
to show the login/onboard screen, and when you need to show the actual tab-based app - make a call to startTabBasedApp
which will replace the whole root and show your app.
from react-native-navigation.
@smooJitter I'm closing this, if you don't manage to get this working please reopen
from react-native-navigation.
Hi all - I tried the above suggestions, but am having difficulty getting the calls to startSingleScreenApp
and startTabBasedApp
to render properly. They will render, but only the last item will render - in the below example, only the Sign In screen (the <LoggedOut />
component will display - with no change in screen/app when the app state changes).
I'm using react-native-meteor
to connect to our Meteor app, and am pulling in the various apps into the App index as components. The logic I'm using to determine app states is:
if (status.connected === false || loggingIn) {
return <LoadingScreen />;
} else if (user !== null) {
return <LoggedIn />;
} else {
return <LoggedOut />;
}
<LoadingScreen />
and <LoggedOut />
use startSingleScreenApp, while <LoggedIn />
uses startTabBasedApp.
Navigation, however, seems to be ignoring this logic - and is loading the components automatically and in order once the respective module is imported (e.g., 'import LoggedIn from './LoggedIn';
- in fact, if I remove a module from the if/else statement it will still load; it will only not load if I remove the import from the App index. Is there perhaps something about load order and/or the way I should be calling these app functions that I should be doing differently. Alternatively, maybe I shouldn't be using more than two app instances?
Load order (imports) is:
import LoadingScreen from './components/LoadingScreen';
import LoggedOut from './layouts/LoggedOut';
import LoggedIn from './layouts/LoggedIn';
I thought this issue posting had answered my original question (which I also posted to StackExchange - will update answer there if I can figure this out), but then I ran into the above issues. Thanks much.
from react-native-navigation.
I see, I notice the redux example captures the idea. I'll take a closer look at how the redux example works. I'm not familiar with redux. I was leaning toward an environment that does not rely on redux for state management. I'll see what I can make out of dealing this hybrid root apps, particularly beyond redux. Thank you.
from react-native-navigation.
I am also interested in hooking all this up with react-native-meteor. I setup a repo which tries to accomplish this, but I'm afraid I got a little stuck with how to properly setup the switch in the root.
you can check out the app.js here
According to this thread, it seems that I should be able to load the app with startSingleScreenApp, and if the user is logged in, I can call Navigation.startTabBasedApp({...}); from within the logged in component and it will replace the root with the TabBasedApp.
Is this approach correct or is there a better way to keep a redux store updated with current Meteor information?
Thanks for any guidance in this.
from react-native-navigation.
@swhamilton That's indeed the correct approach. Your redux store persists when you call startApp
from react-native-navigation.
@swhamilton, you may want to try:
swhamilton/react-native-navigation-redux-meteor#1
from react-native-navigation.
Related Issues (20)
- [RN73] Support for iOS HOT 35
- [RN73] Documentation alignment
- [RN73] Internal rollout
- [RN71-IOS] - Got a blank screen after setRoot()
- react-native 0.73.2 project getting com.appName.mainActivity can not be cast to com.reactnativenavigation.NavigationActivity HOT 9
- [Android | iOS] componentDidDisappear's performance is inconsistent in Android and iOS when App slides to background
- Event RNN.ComponentDidAppear called before render screen component when animations.showModal.enabled = false
- Header Style Shadows warnings can't be disabled
- Android - Left buttons are not in order
- Android Regression RN 0.73 - `onDropViewInstance` not called anymore, View not cleaned up
- Bottom tabs text is cut off on iPad HOT 6
- All bottom tab components load when a text input is pressed and the keyboard opens
- BottomTabs shows a top solid border when content is scrolled to the bottom edge on iOS 15 HOT 1
- Right-hand buttons flicker on Android
- Fabric is not working on IOS. HOT 1
- Compile error after upgrading from 7.38.3 to 7.38.6 HOT 2
- Android windowSoftInputMode not respected, keyboard always resizes view
- Does react-native-navigation work completely on Main Thread? Will it work if JS thread is blocked? HOT 1
- Android is not following the Appearance API from react-native HOT 1
- RN 0.74 New Architecture Support HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-navigation.