Comments (9)
Hi @Yasir5247! That's not easy as with RNN, unfortunately, and you will need to have something like explained here -- https://reactnavigation.org/docs/hiding-tabbar-in-screens/. As of now with current starter's nav setup, it's doable but will need some more code and changes to make. I will rewrite the setup a bit, so your use case would be handled easily. Thanks for creating the issue for that!
from expo-starter.
@kanzitelli any expected aprox date? i'm actually desperate. :)
from expo-starter.
@Yasir5247 hey! I am actually working since yesterday on a new navigation library for React Native which should work both with react-navigation and react-native-navigation and have almost the same api. But in the beginning it will only support react-navigation. So I will publish a branch with draft implementation soon and it would be great if you could help me to test it out. And approximate date will come faster ๐
from expo-starter.
yes. i'm in for testing. :)
from expo-starter.
Closing the issue as your use case can be achieved with [email protected]
and [email protected]
. If you could test it, that would be great!
from expo-starter.
@kanzitelli looks great so far. however "passing props to stack and tabs navigators" is very important i guess.
also first screen of the stack doesn't have default header. in this case i have handle the back button etc explicitly i guess.
from expo-starter.
hi @Yasir5247! thanks for the feedback!
yes, iโm planning to add props for navigators in the next releases. however there were some unclear moments for me, ill see how to solve that.
and yes, back button only is being shown on android when you show stack over tabs. but it doesnโt happen on iOS (in face it happens but on a higher level navigator). because when i tried to do the same with pure React Navigation, iโve had the same behaviour. if you could achieve showing back button on the pushed stack, let me know
from expo-starter.
import { Navio } from "rn-navio";
export const navio = Navio.build({
screens: {
HomeScreen: {...},
ProductDetailScreen: {...},
ProductDescScreen: {...},
},
stacks: {
ProductStack: [
'ProductDetailScreen',
'ProductDescScreen',
],
HomeStack: [
'HomeScreen',
],
},
tabs: {
HomeTab: {
stack: 'HomeStack',
options: {...},
},
ExploreTab: {
stack: 'ExploreStack',
options: {...},
},
},
root: 'Tabs',
hooks: [useAppearance],
options: {
stack: screenDefaultOptions,
tab: tabDefaultOptions,
},
})
imagine having this structure. on the home screen i click a product and go to product stack and show "product detail screen". on the "product detail screen" when i want to go back to the tab, right now i just do
//ProductDetailScreen.tsx
// UI Methods
const configureUI = () => {
navigation.setOptions({
headerLeft: () => <BButton onPress={()=> navio.popToTop()} />,
headerRight: () => <BButton onPress={()=> {
if(AuthUser.User.isLogin) {
productViolationModalRef.current.open()
}
}}/>,
});
};
I'm not sure if this is the right way, since i'm new to react navigation. however it works. but the back button does't feel like the default back button though. and creating this back button manually on each stack would be kinda pain i guess if the app is big. and android doesn't work in this case ๐
from expo-starter.
@Yasir5247 yeah, unfortunately, with rn-navio itโs not possible to have back button when pushing another stack. iโm not sure if you can achieve it with react-navigation tho, bc rn-navio is built on top of it and follows their advice for hiding tabs. i will check it more, maybe there might be a hack
from expo-starter.
Related Issues (20)
- Changing the language or appearance crashes the app in release build HOT 2
- Camera indicator light remains on even when Camera is unmounted HOT 4
- "Store.name" creates duplicates once published HOT 3
- route props on options HOT 3
- TypeError: undefined is not an object (evaluating '_stores.stores.ui') HOT 6
- Update dependecies HOT 1
- Possible Unhandled Promise Rejection (id:0) HOT 1
- ApiV2Error: Entity Not Authorized HOT 3
- Deep linking support HOT 6
- How to get route.params? HOT 1
- yarn start --web HOT 6
- Can I do auth flow like below? HOT 1
- upgrade to rnuilib v7 HOT 1
- How to pass variable to stack HOT 1
- Newbie questions (mmkv, auth) HOT 2
- Params doesn't seem to work. HOT 2
- How to pop to the first screen of the stack when the user presses the back button HOT 1
- expo production build error HOT 1
- how to import assets
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 expo-starter.