Here are my thoughts on building navigation related swiftui views:
- Need to make it separate from the original library. We don't want to bloat this library and we don't want to require the user to install so many dependencies. (separate repo? monorepo?)
- Will use react navigation native stack under the hood
- Implement basic nav and tab bar nav (and should be able to compose them)
I built a solid prototype that seems to be working really well for me. Need to decide where its going to live tho.
SwiftUI React Native Navigation
Basic Navigation
First, wrap your app with a NavigationProvider
to enable navigation. For basic navigation (going from screen to screen and back), use the Navigation
component. Its first and only child should be the initial view you want to show.
<NavigationProvider>
<Navigation>
<Home user={{ name: "Andrew" }} />
</Navigation>
</NavigationProvider>
Moving along to the actual screen we want to render. Like SwiftUI, we wrap our screen in a NavigationView
which will allow the user to customize the navigation bar like displayMode, title, etc. We use the NavigationLink
component to navigate to another view.
const Home = ({ user }) => (
<NavigationView navigationTitle="Welcome" navigationTitleDisplayMode="large">
<VStack>
<Text>Welcome {user}</Text>
<NavigationLink label="To Settings" destination={<Settings theme="dark" />} />
</VStack>
</NavigationView>
)
Tab Bar Navigation
Another feature we want to support is TabView
. Similar to the above example, wrap the app in a NavigationProvider
. Then as children, render a TabItem
for each tab you want. You can supply the following props: label
, icon
, view
. You can also send in props via props
.
<NavigationProvider>
<TabView>
<TabItem label="Home" icon={homeIcon} >
<Home />
</TabItem>
<TabItem label="Settings" icon={settingsIcon} >
<Settings />
</TabItem>
<TabView>
</NavigationProvider>
Like in the basic navigation example above, Home
and Settings
are screens where the screen content is wrapped in a NavigationView
:
const Home = () => (
<NavigationView navigationTitle="Welcome">
<VStack>
<Text>Home Screen</Text>
<NavigationLink label="To Settings" destination={<Settings />} />
</VStack>
</NavigationView>
)
At this point, we are able to navigate between tabs, but what if we want to navigate to a details screen under the Home
tab? Well instead of providing <Home />
as a child of <TabItem>
, we can pass a <Navigation>
stack like so:
const HomeNavigation = () => <Navigation><Home /></Navigation>
<NavigationProvider>
<TabView>
<TabItem label="Home" icon={homeIcon} >
<HomeNavigation />
</TabItem>
<TabItem label="Settings" icon={settingsIcon} >
<Settings />
</TabItem>
<TabView>
</NavigationProvider>