-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c5c94d1
commit 5b93bbb
Showing
5 changed files
with
133 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,65 @@ | ||
| import React from 'react'; | ||
| import React, {useEffect} from 'react'; | ||
| import {ScrollView} from 'react-native'; | ||
| import {View} from 'react-native-ui-lib'; | ||
| import {observer} from 'mobx-react'; | ||
| import {useNavigation} from '@react-navigation/native'; | ||
| import {NavioScreen} from 'rn-navio'; | ||
|
|
||
| import {useServices} from '../services'; | ||
| import {services, useServices} from '../services'; | ||
| // import {useStores} from '../stores'; | ||
| import {Section} from '../components/section'; | ||
| import {BButton} from '../components/button'; | ||
| import {useAppearance} from '../utils/hooks'; | ||
|
|
||
| export type Props = { | ||
| type?: 'push' | 'show'; | ||
| type?: 'push'; | ||
| }; | ||
| export const Example: React.FC<Props> = observer(({type = 'push'}) => { | ||
|
|
||
| export const Example: NavioScreen<Props> = observer(({type = 'push'}) => { | ||
| useAppearance(); // for Dark Mode | ||
| const {nav, t} = useServices(); | ||
| const navigation = useNavigation(); | ||
| const {t, navio} = useServices(); | ||
| // const {ui} = useStores(); | ||
|
|
||
| // State | ||
|
|
||
| // Methods | ||
| const push = () => nav.push('Example'); | ||
| const show = () => nav.show('ExampleModal'); | ||
| const goBack = async () => { | ||
| nav.pop(); | ||
| const push = () => navio.push('Example', {type: 'push'}); | ||
| const pushStack = () => navio.pushStack('ExampleStack'); | ||
| const jumpTo = () => navio.jumpTo('PlaygroundTab'); | ||
| const show = () => navio.show('ExampleModal'); | ||
| const setRoot = () => navio.setRoot('Tabs'); | ||
| const goBack = () => navio.pop(); | ||
|
|
||
| // Start | ||
| useEffect(() => { | ||
| configureUI(); | ||
| }, []); | ||
|
|
||
| // UI Methods | ||
| const configureUI = () => { | ||
| navigation.setOptions({}); | ||
| }; | ||
|
|
||
| // UI Methods | ||
|
|
||
| return ( | ||
| <View flex bg-bgColor> | ||
| <ScrollView contentInsetAdjustmentBehavior="always"> | ||
| <Section title={t.do('section.navigation.title')}> | ||
| <BButton marginV-s1 label={t.do('section.navigation.button.push')} onPress={push} /> | ||
| <BButton marginV-s1 label={t.do('section.navigation.button.show')} onPress={show} /> | ||
| <BButton marginV-s1 label={t.do('section.navigation.button.back')} onPress={goBack} /> | ||
| <Section title={t.do('section.navio.title')}> | ||
| <BButton marginV-s1 label={t.do('section.navio.button.push')} onPress={push} /> | ||
| <BButton marginV-s1 label={t.do('section.navio.button.push_stack')} onPress={pushStack} /> | ||
| <BButton marginV-s1 label={t.do('section.navio.button.jump_to')} onPress={jumpTo} /> | ||
| <BButton marginV-s1 label={t.do('section.navio.button.show')} onPress={show} /> | ||
| <BButton marginV-s1 label={t.do('section.navio.button.back')} onPress={goBack} /> | ||
| <BButton marginV-s1 label={'Set Root - Tabs'} onPress={setRoot} /> | ||
| </Section> | ||
| </ScrollView> | ||
| </View> | ||
| ); | ||
| }); | ||
|
|
||
| Example.options = props => ({ | ||
| headerBackTitleStyle: false, | ||
| title: `${services.t.do('example.title')} ${(props?.route?.params as Props)?.type ?? ''}`, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,62 @@ | ||
| import pick from 'lodash/pick'; | ||
| import {Navio} from 'rn-navio'; | ||
|
|
||
| import {Main} from './main'; | ||
| import {Playground} from './playground'; | ||
| import {Settings} from './settings'; | ||
| import {Example, Props as ExampleProps} from './_screen-sample'; | ||
| import {ModalsInfo, ScreensInfo, TabsInfo} from '../services/navigation/types'; | ||
| import {Root, Stack} from '../services/navigation/layouts'; | ||
| import {screenDefaultOptions, tabBarDefaultOptions} from '../services/navigation/options'; | ||
| import {services} from '../services'; | ||
| import {Example} from './_screen-sample'; | ||
|
|
||
| // Describe screens props here | ||
| // They will be also used for defining screens, tabs and modals names | ||
| type ScreenProps = { | ||
| Main: undefined; | ||
| Playground: undefined; | ||
| Settings: undefined; | ||
| Example: ExampleProps; | ||
| }; | ||
| type ModalProps = { | ||
| ExampleModal: undefined; | ||
| }; | ||
| type TabProps = { | ||
| MainTab: undefined; | ||
| PlaygroundTab: undefined; | ||
| SettingsTab: undefined; | ||
| }; | ||
| export type ScreenAndModalProps = ModalProps & ScreenProps; | ||
| import {useAppearance} from '../utils/hooks'; | ||
| import {screenDefaultOptions, tabDefaultOptions, getTabBarIcon} from '../utils/designSystem'; | ||
|
|
||
| export type ScreenName = keyof ScreenProps; | ||
| export type ModalName = keyof ModalProps; | ||
| export type TabName = keyof TabProps; | ||
| // NAVIO | ||
| export const navio = Navio.build({ | ||
| screens: { | ||
| Main, | ||
| Settings, | ||
| Example, | ||
| Playground: { | ||
| component: Playground, | ||
| options: () => ({ | ||
| title: 'Playground', | ||
| }), | ||
| }, | ||
| }, | ||
| stacks: { | ||
| ExampleStack: ['Example'], | ||
| }, | ||
| tabs: { | ||
| MainTab: { | ||
| stack: ['Main', 'Example'], | ||
| options: { | ||
| title: 'Home', | ||
| tabBarIcon: getTabBarIcon('MainTab'), | ||
| }, | ||
| }, | ||
| PlaygroundTab: { | ||
| stack: ['Playground'], | ||
| options: () => ({ | ||
| title: 'Playground', | ||
| tabBarIcon: getTabBarIcon('PlaygroundTab'), | ||
| }), | ||
| }, | ||
| SettingsTab: { | ||
| stack: ['Settings'], | ||
| options: () => ({ | ||
| title: 'Settings', | ||
| tabBarIcon: getTabBarIcon('SettingsTab'), | ||
| }), | ||
| }, | ||
| }, | ||
| modals: { | ||
| ExampleModal: 'ExampleStack', | ||
| }, | ||
| root: 'Tabs', | ||
| hooks: [useAppearance], | ||
| options: { | ||
| stack: screenDefaultOptions, | ||
| tab: tabDefaultOptions, | ||
| }, | ||
| }); | ||
|
|
||
| // Screens | ||
| const screens: ScreensInfo = { | ||
| Main: { | ||
| component: Main, | ||
| options: () => ({ | ||
| title: services.t.do('home.title'), | ||
| ...screenDefaultOptions(), | ||
| }), | ||
| }, | ||
| Playground: { | ||
| component: Playground, | ||
| options: () => ({ | ||
| title: 'Playground', | ||
| ...screenDefaultOptions(), | ||
| }), | ||
| }, | ||
| Settings: { | ||
| component: Settings, | ||
| options: () => ({ | ||
| title: services.t.do('settings.title'), | ||
| ...screenDefaultOptions(), | ||
| }), | ||
| }, | ||
| Example: { | ||
| component: Example, | ||
| options: () => ({ | ||
| title: services.t.do('example.title'), | ||
| ...screenDefaultOptions(), | ||
| }), | ||
| }, | ||
| }; | ||
| const HomeStack = () => <Stack screens={pick(screens, ['Main', 'Example'])} />; | ||
| const PlaygroundStack = () => <Stack screens={pick(screens, ['Playground'])} />; | ||
| const SettingsStack = () => <Stack screens={pick(screens, ['Settings'])} />; | ||
| const ExampleStack = () => <Stack screens={pick(screens, ['Example'])} />; | ||
|
|
||
| // Tabs | ||
| const tabs: TabsInfo = { | ||
| MainTab: { | ||
| component: HomeStack, | ||
| options: () => ({ | ||
| title: 'Home', | ||
| ...tabBarDefaultOptions('MainTab'), | ||
| }), | ||
| }, | ||
| PlaygroundTab: { | ||
| component: PlaygroundStack, | ||
| options: () => ({ | ||
| title: 'Playground', | ||
| ...tabBarDefaultOptions('PlaygroundTab'), | ||
| }), | ||
| }, | ||
| SettingsTab: { | ||
| component: SettingsStack, | ||
| options: () => ({ | ||
| title: 'Settings', | ||
| ...tabBarDefaultOptions('SettingsTab'), | ||
| }), | ||
| }, | ||
| }; | ||
|
|
||
| // Modals | ||
| const modals: ModalsInfo = { | ||
| ExampleModal: { | ||
| component: ExampleStack, | ||
| options: () => ({ | ||
| title: 'ExampleModal', | ||
| }), | ||
| }, | ||
| }; | ||
|
|
||
| // Root | ||
| export const AppRoot: React.FC = () => <Root tabs={tabs} modals={modals} />; | ||
| export const getNavio = () => navio; | ||
| export const AppRoot = navio.Root; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters