Skip to content

Commit

Permalink
Merge pull request #35 from kanzitelli/v5.1.0
Browse files Browse the repository at this point in the history
v5.1.0
  • Loading branch information
kanzitelli committed Feb 15, 2023
2 parents 4abf061 + 1fd511d commit 956177f
Show file tree
Hide file tree
Showing 15 changed files with 1,093 additions and 864 deletions.
15 changes: 9 additions & 6 deletions App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import 'expo-dev-client';
import React, {useCallback, useEffect, useState} from 'react';
import {LogBox} from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
import {StatusBar} from 'expo-status-bar';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

import {AppRoot} from './src/screens';
import {AppRoot} from './src/navio';
import {
configureDesignSystem,
getNavigationTheme,
Expand All @@ -13,11 +14,13 @@ import {
} from './src/utils/designSystem';
import {hydrateStores} from './src/stores';
import {initServices} from './src/services';
import {SSProvider} from './src/utils/providers';
import {StatusBar} from 'expo-status-bar';
import {AppProvider} from './src/utils/providers';
import {useAppearance} from './src/utils/hooks';

LogBox.ignoreLogs(['Require']);
LogBox.ignoreLogs([
'Require',
'Found screens with the same name nested inside one another.', // for navio in some cases
]);

export default (): JSX.Element => {
useAppearance();
Expand All @@ -41,10 +44,10 @@ export default (): JSX.Element => {
if (!ready) return <></>;
return (
<GestureHandlerRootView style={{flex: 1}}>
<SSProvider>
<AppProvider>
<StatusBar style={getStatusBarStyle()} backgroundColor={getStatusBarBGColor()} />
<AppRoot navigationContainerProps={{theme: getNavigationTheme()}} />
</SSProvider>
</AppProvider>
</GestureHandlerRootView>
);
};
7 changes: 5 additions & 2 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
module.exports = function(api) {
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
// fix for web caused by react-native-reanimated
// https://github.com/software-mansion/react-native-reanimated/issues/1823#issuecomment-1384307084
'@babel/plugin-proposal-export-namespace-from',
'react-native-reanimated/plugin',
]
],
};
};
53 changes: 28 additions & 25 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"description": "Production-ready starter for Expo (React Native) App! Powered by cli-rn, React Navigation (v6), RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, and much more.",
"author": "Batyr <dev@batyr.io> (https://github.com/kanzitelli)",
"homepage": "https://github.com/kanzitelli/expo-starter",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "npx expo start",
"start:dc": "npx expo start --dev-client",
"start:prod": "npx expo start --no-dev --minify",
"start:android": "npx expo start --android",
"start:ios": "npx expo start --ios",
Expand All @@ -23,57 +23,60 @@
"pub:all": "yarn pub:app:dev && yarn pub:web",
"format": "prettier --check ./src",
"format:write": "prettier --write ./src",
"release": "dotenv release-it"
"release": "dotenv release-it",
"android": "expo run:android",
"ios": "expo run:ios"
},
"dependencies": {
"@kanzitelli/if-component": "^0.3.0",
"@react-native-async-storage/async-storage": "~1.17.3",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-picker/picker": "2.4.2",
"@react-native-picker/picker": "2.4.8",
"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/drawer": "^6.5.8",
"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.9.0",
"@react-navigation/stack": "^6.3.0",
"@shopify/flash-list": "1.1.0",
"@shopify/flash-list": "1.3.1",
"date-fns": "^2.29.3",
"expo": "^46.0.0",
"expo-dev-client": "~1.2.1",
"expo-localization": "~13.1.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"expo-updates": "~0.14.6",
"expo": "^47.0.0",
"expo-dev-client": "~2.0.1",
"expo-localization": "~14.0.0",
"expo-splash-screen": "~0.17.5",
"expo-status-bar": "~1.4.2",
"expo-updates": "~0.15.6",
"formik": "^2.2.9",
"i18n-js": "^4.1.1",
"lodash": "^4.17.21",
"mobx": "^6.6.2",
"mobx-persist-store": "^1.1.2",
"mobx-react": "^7.5.3",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-fast-image": "^8.6.1",
"react-native-gesture-handler": "~2.5.0",
"react-native-gesture-handler": "~2.8.0",
"react-native-mmkv": "^2.4.3",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-ui-lib": "^6.21.2",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-ui-lib": "^6.30.1",
"react-native-web": "~0.18.7",
"rn-bounceable": "^1.2.0",
"rn-navio": "^0.0.1",
"rn-navio": "^0.0.5",
"yup": "^0.32.11"
},
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/core": "^7.19.3",
"@babel/preset-typescript": "^7.18.6",
"@expo/config-plugins": "^5.0.0",
"@expo/webpack-config": "^0.17.0",
"@expo/config-plugins": "^5.0.2",
"@expo/webpack-config": "^0.17.2",
"@react-native-community/eslint-config": "2.0.0",
"@types/i18n-js": "^3.8.3",
"@types/lodash": "^4.14.185",
"@types/react": "18.0.0",
"@types/react-dom": "18.0.0",
"@types/react-native": "0.69.5",
"@types/react": "~18.0.24",
"@types/react-dom": "~18.0.8",
"@types/react-native": "~0.70.6",
"@typescript-eslint/eslint-plugin": "^5.37.0",
"@typescript-eslint/parser": "^5.37.0",
"dotenv-cli": "^6.0.0",
Expand Down
83 changes: 83 additions & 0 deletions src/components/sections/NavioSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import React from 'react';
import {Text} from 'react-native-ui-lib';
import {useServices} from '../../services';
import {BButton} from '../button';
import {Section} from '../section';

type Props = {};

export const NavioSection: React.FC<Props> = ({}) => {
const {t, navio} = useServices();

// Methods
const pushScreen = () => navio.push('Example', {type: 'push'});
const goBack = () => navio.goBack();
const globalSetRoot = () => navio.setRoot('tabs', 'AppTabs');
const stacksPush = () => navio.stacks.push('ProductPageStack');
const stacksSetRoot = () => navio.stacks.setRoot('MainStack');
const tabsJumpTo = () => navio.tabs.jumpTo('PlaygroundTab');
const tabsSetRoot = () => navio.tabs.setRoot('AppTabs');
const drawersToggle = () => navio.drawers.toggle();
const drawersJumpTo = () => navio.drawers.jumpTo('Playground');
const drawersSetRoot = () => navio.drawers.setRoot('MainDrawer');
const modalsShow = () => navio.modals.show('ExampleModal');

return (
<Section title={t.do('section.navio.title')}>
<Text text60R textColor>
Common
</Text>
<BButton marginV-s1 label={t.do('section.navio.button.common.push')} onPress={pushScreen} />
<BButton marginV-s1 label={t.do('section.navio.button.common.go_back')} onPress={goBack} />
<BButton
marginV-s1
label={t.do('section.navio.button.common.set_root')}
onPress={globalSetRoot}
/>

<Text marginT-s4 text60R textColor>
Stacks
</Text>
<BButton marginV-s1 label={t.do('section.navio.button.stacks.push')} onPress={stacksPush} />
<BButton
marginV-s1
label={t.do('section.navio.button.stacks.set_root')}
onPress={stacksSetRoot}
/>

<Text marginT-s4 text60R textColor>
Tabs
</Text>
<BButton marginV-s1 label={t.do('section.navio.button.tabs.jump_to')} onPress={tabsJumpTo} />
<BButton
marginV-s1
label={t.do('section.navio.button.tabs.set_root')}
onPress={tabsSetRoot}
/>

<Text marginT-s4 text60R textColor>
Drawers
</Text>
<BButton
marginV-s1
label={t.do('section.navio.button.drawers.toggle')}
onPress={drawersToggle}
/>
<BButton
marginV-s1
label={t.do('section.navio.button.drawers.jump_to')}
onPress={drawersJumpTo}
/>
<BButton
marginV-s1
label={t.do('section.navio.button.drawers.set_root')}
onPress={drawersSetRoot}
/>

<Text marginT-s4 text60R textColor>
Modals
</Text>
<BButton marginV-s1 label={t.do('section.navio.button.modals.show')} onPress={modalsShow} />
</Section>
);
};
109 changes: 109 additions & 0 deletions src/navio.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import {Navio} from 'rn-navio';

import {Main} from './screens/main';
import {Playground} from './screens/playground';
import {Settings} from './screens/settings';
import {Example} from './screens/_screen-sample';

import {useAppearance} from './utils/hooks';
import {
screenDefaultOptions,
tabScreenDefaultOptions,
getTabBarIcon,
drawerScreenDefaultOptions,
} from './utils/designSystem';
import {services} from './services';

// NAVIO
export const navio = Navio.build({
screens: {
Main,
Settings,
Example,
Playground: {
component: Playground,
options: () => ({
title: 'Playground',
}),
},
ProductPage: {
component: Example,
options: {
headerShown: false,
},
},
},
stacks: {
MainStack: ['Main', 'Example'],
ExampleStack: {
screens: ['Example'],
navigatorProps: {
screenListeners: {
focus: () => {},
},
},
},
ProductPageStack: {
screens: ['ProductPage'],
containerOptions: {
headerShown: true,
title: 'Product page',
},
},
},
tabs: {
AppTabs: {
content: {
MainTab: {
stack: 'MainStack',
options: () => ({
title: 'Main',
tabBarIcon: getTabBarIcon('MainTab'),
}),
},
PlaygroundTab: {
stack: ['Playground'],
options: () => ({
title: 'Playground',
tabBarIcon: getTabBarIcon('PlaygroundTab'),
}),
},
SettingsTab: {
stack: ['Settings'],
options: () => ({
title: services.t.do('settings.title'),
tabBarIcon: getTabBarIcon('SettingsTab'),
}),
},
},
},
},
modals: {
ExampleModal: 'ExampleStack',
},
drawers: {
MainDrawer: {
content: {
Main: 'MainStack',
Example: 'ExampleStack',
Playground: ['Playground'],
},
},
},
root: 'AppTabs',
hooks: [useAppearance],
defaultOptions: {
stacks: {
screen: screenDefaultOptions,
},
tabs: {
screen: tabScreenDefaultOptions,
},
drawers: {
screen: drawerScreenDefaultOptions,
},
},
});

export const getNavio = () => navio;
export const AppRoot = navio.Root;
19 changes: 2 additions & 17 deletions src/screens/_screen-sample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@ import {useNavigation} from '@react-navigation/native';
import {NavioScreen} from 'rn-navio';

import {services, useServices} from '../services';
// import {useStores} from '../stores';
import {Section} from '../components/section';
import {BButton} from '../components/button';
import {useAppearance} from '../utils/hooks';
import {NavioSection} from '../components/sections/NavioSection';

export type Props = {
type?: 'push';
Expand All @@ -24,12 +22,6 @@ export const Example: NavioScreen<Props> = observer(({type = 'push'}) => {
// State

// Methods
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(() => {
Expand All @@ -46,14 +38,7 @@ export const Example: NavioScreen<Props> = observer(({type = 'push'}) => {
return (
<View flex bg-bgColor>
<ScrollView contentInsetAdjustmentBehavior="always">
<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>
<NavioSection />
</ScrollView>
</View>
);
Expand Down

0 comments on commit 956177f

Please sign in to comment.