From bf61d25418d510dfa942ba0925f98c25a96892d0 Mon Sep 17 00:00:00 2001 From: Maciej Stosio Date: Mon, 20 May 2024 14:15:06 +0200 Subject: [PATCH 01/15] feat: extract shared example and use in in both Example and FabricExample --- Example/App.tsx | 197 +- FabricExample/App.js | 43 - FabricExample/App.tsx | 3 + FabricExample/package.json | 6 +- FabricExample/src/Chapter.js | 47 - FabricExample/src/HeaderDemo.js | 152 - FabricExample/src/chapters.json | 18 - FabricExample/src/colors.js | 4 - FabricExample/src/shared/Button.tsx | 26 - .../src/shared/SettingsColorPicker.tsx | 100 - FabricExample/src/shared/SettingsInput.tsx | 71 - .../src/shared/SettingsNumberInput.tsx | 29 - FabricExample/src/shared/SettingsPicker.tsx | 68 - FabricExample/src/shared/SettingsSwitch.tsx | 48 - FabricExample/src/shared/Spacer.tsx | 10 - FabricExample/src/shared/Square.tsx | 11 - FabricExample/src/shared/index.ts | 6 - FabricExample/yarn.lock | 332 +- app/.eslintrc.js | 4 + app/.prettierrc.js | 6 + app/App.tsx | 196 + app/index.ts | 3 + app/package.json | 66 + {Example => app}/src/assets/trees.jpg | Bin {Example => app}/src/screens/Animations.tsx | 0 .../src/screens/BottomTabsAndStack.tsx | 0 {Example => app}/src/screens/Events.tsx | 0 {Example => app}/src/screens/Gestures.tsx | 0 .../src/screens/HeaderOptions.tsx | 0 {Example => app}/src/screens/Modals.tsx | 0 {Example => app}/src/screens/Orientation.tsx | 0 {Example => app}/src/screens/SearchBar.tsx | 0 .../src/screens/SimpleNativeStack.tsx | 0 .../src/screens/StackPresentation.tsx | 0 {Example => app}/src/screens/StatusBar.tsx | 0 .../src/screens/SwipeBackAnimation.tsx | 0 {Example => app}/src/shared/Alert.tsx | 0 {Example => app}/src/shared/Button.tsx | 0 {Example => app}/src/shared/Choose.tsx | 0 {Example => app}/src/shared/Dialog.tsx | 0 {Example => app}/src/shared/Form.tsx | 0 {Example => app}/src/shared/ListItem.tsx | 0 {Example => app}/src/shared/SettingsInput.tsx | 0 .../src/shared/SettingsMultiInput.tsx | 0 .../src/shared/SettingsPicker.tsx | 0 .../src/shared/SettingsSwitch.tsx | 0 {Example => app}/src/shared/Snack.tsx | 0 {Example => app}/src/shared/Spacer.tsx | 0 {Example => app}/src/shared/Square.tsx | 0 {Example => app}/src/shared/Toast.tsx | 0 {Example => app}/src/shared/index.ts | 0 app/yarn.lock | 10762 ++++++++++++++++ 52 files changed, 11351 insertions(+), 857 deletions(-) delete mode 100644 FabricExample/App.js create mode 100644 FabricExample/App.tsx delete mode 100644 FabricExample/src/Chapter.js delete mode 100644 FabricExample/src/HeaderDemo.js delete mode 100644 FabricExample/src/chapters.json delete mode 100644 FabricExample/src/colors.js delete mode 100644 FabricExample/src/shared/Button.tsx delete mode 100644 FabricExample/src/shared/SettingsColorPicker.tsx delete mode 100644 FabricExample/src/shared/SettingsInput.tsx delete mode 100644 FabricExample/src/shared/SettingsNumberInput.tsx delete mode 100644 FabricExample/src/shared/SettingsPicker.tsx delete mode 100644 FabricExample/src/shared/SettingsSwitch.tsx delete mode 100644 FabricExample/src/shared/Spacer.tsx delete mode 100644 FabricExample/src/shared/Square.tsx delete mode 100644 FabricExample/src/shared/index.ts create mode 100644 app/.eslintrc.js create mode 100644 app/.prettierrc.js create mode 100644 app/App.tsx create mode 100644 app/index.ts create mode 100644 app/package.json rename {Example => app}/src/assets/trees.jpg (100%) rename {Example => app}/src/screens/Animations.tsx (100%) rename {Example => app}/src/screens/BottomTabsAndStack.tsx (100%) rename {Example => app}/src/screens/Events.tsx (100%) rename {Example => app}/src/screens/Gestures.tsx (100%) rename {Example => app}/src/screens/HeaderOptions.tsx (100%) rename {Example => app}/src/screens/Modals.tsx (100%) rename {Example => app}/src/screens/Orientation.tsx (100%) rename {Example => app}/src/screens/SearchBar.tsx (100%) rename {Example => app}/src/screens/SimpleNativeStack.tsx (100%) rename {Example => app}/src/screens/StackPresentation.tsx (100%) rename {Example => app}/src/screens/StatusBar.tsx (100%) rename {Example => app}/src/screens/SwipeBackAnimation.tsx (100%) rename {Example => app}/src/shared/Alert.tsx (100%) rename {Example => app}/src/shared/Button.tsx (100%) rename {Example => app}/src/shared/Choose.tsx (100%) rename {Example => app}/src/shared/Dialog.tsx (100%) rename {Example => app}/src/shared/Form.tsx (100%) rename {Example => app}/src/shared/ListItem.tsx (100%) rename {Example => app}/src/shared/SettingsInput.tsx (100%) rename {Example => app}/src/shared/SettingsMultiInput.tsx (100%) rename {Example => app}/src/shared/SettingsPicker.tsx (100%) rename {Example => app}/src/shared/SettingsSwitch.tsx (100%) rename {Example => app}/src/shared/Snack.tsx (100%) rename {Example => app}/src/shared/Spacer.tsx (100%) rename {Example => app}/src/shared/Square.tsx (100%) rename {Example => app}/src/shared/Toast.tsx (100%) rename {Example => app}/src/shared/index.ts (100%) create mode 100644 app/yarn.lock diff --git a/Example/App.tsx b/Example/App.tsx index d452f5b80d..6d53977858 100644 --- a/Example/App.tsx +++ b/Example/App.tsx @@ -1,196 +1,3 @@ -import React from 'react'; -import { - ScrollView, - StyleSheet, - Text, - I18nManager, - Platform, - StatusBar, -} from 'react-native'; -import { NavigationContainer } from '@react-navigation/native'; -import { StackNavigationProp } from '@react-navigation/stack'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import RNRestart from 'react-native-restart'; +import App from '../app'; -import { ListItem, SettingsSwitch } from './src/shared'; - -import SimpleNativeStack from './src/screens/SimpleNativeStack'; -import SwipeBackAnimation from './src/screens/SwipeBackAnimation'; -import StackPresentation from './src/screens/StackPresentation'; -import HeaderOptions from './src/screens/HeaderOptions'; -import StatusBarExample from './src/screens/StatusBar'; -import Animations from './src/screens/Animations'; -import BottomTabsAndStack from './src/screens/BottomTabsAndStack'; -import Modals from './src/screens/Modals'; -import Orientation from './src/screens/Orientation'; -import SearchBar from './src/screens/SearchBar'; -import Events from './src/screens/Events'; -import Gestures from './src/screens/Gestures'; - -import { enableFreeze } from 'react-native-screens'; -import { GestureDetectorProvider } from 'react-native-screens/gesture-handler'; -import { GestureHandlerRootView } from 'react-native-gesture-handler'; - -enableFreeze(); - -if (Platform.OS === 'android') { - StatusBar.setTranslucent(true); -} - -const SCREENS: Record< - string, - { - title: string; - component: () => React.JSX.Element; - type: 'example' | 'playground'; - } -> = { - SimpleNativeStack: { - title: 'Simple Native Stack', - component: SimpleNativeStack, - type: 'example', - }, - SwipeBackAnimation: { - title: 'Swipe Back Animation', - component: SwipeBackAnimation, - type: 'example', - }, - StackPresentation: { - title: 'Stack Presentation', - component: StackPresentation, - type: 'example', - }, - BottomTabsAndStack: { - title: 'Bottom tabs and native stack', - component: BottomTabsAndStack, - type: 'example', - }, - Modals: { - title: 'Modals', - component: Modals, - type: 'example', - }, - HeaderOptions: { - title: 'Header Options', - component: HeaderOptions, - type: 'playground', - }, - StatusBar: { - title: 'Status bar', - component: StatusBarExample, - type: 'playground', - }, - Animations: { - title: 'Animations', - component: Animations, - type: 'playground', - }, - Orientation: { - title: 'Orientation', - component: Orientation, - type: 'playground', - }, - SearchBar: { - title: 'Search bar', - component: SearchBar, - type: 'playground', - }, - Events: { - title: 'Events', - component: Events, - type: 'playground', - }, - Gestures: { - title: 'Gestures', - component: Gestures, - type: 'playground', - }, -}; - -type RootStackParamList = { - Main: undefined; -} & { - [P in keyof typeof SCREENS]: undefined; -}; - -const Stack = createNativeStackNavigator(); - -interface MainScreenProps { - navigation: StackNavigationProp; -} - -const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => ( - - { - I18nManager.forceRTL(!I18nManager.isRTL); - RNRestart.Restart(); - }} - /> - - Examples - - {Object.keys(SCREENS) - .filter(name => SCREENS[name].type === 'example') - .map(name => ( - navigation.navigate(name)} - /> - ))} - Playgrounds - {Object.keys(SCREENS) - .filter(name => SCREENS[name].type === 'playground') - .map(name => ( - navigation.navigate(name)} - /> - ))} - -); - -const ExampleApp = (): React.JSX.Element => ( - - - - - - {Object.keys(SCREENS).map(name => ( - SCREENS[name].component} - options={{ headerShown: false }} - /> - ))} - - - - -); - -const styles = StyleSheet.create({ - label: { - fontSize: 15, - color: 'black', - margin: 10, - marginTop: 15, - }, - switch: { - marginTop: 15, - }, -}); - -export default ExampleApp; +export default App; diff --git a/FabricExample/App.js b/FabricExample/App.js deleted file mode 100644 index 17549f0731..0000000000 --- a/FabricExample/App.js +++ /dev/null @@ -1,43 +0,0 @@ -import 'react-native-gesture-handler'; -import React from 'react'; -import {createNativeStackNavigator} from '@react-navigation/native-stack'; -import {NavigationContainer} from '@react-navigation/native'; -import {I18nManager} from 'react-native'; -import Chapter from './src/Chapter'; -import chapters from './src/chapters'; -import HeaderDemo from './src/HeaderDemo'; -import {WHITE} from './src/colors'; - -const Stack = createNativeStackNavigator(); - -const App = () => ( - - - - - - -); - -export default App; diff --git a/FabricExample/App.tsx b/FabricExample/App.tsx new file mode 100644 index 0000000000..6d53977858 --- /dev/null +++ b/FabricExample/App.tsx @@ -0,0 +1,3 @@ +import App from '../app'; + +export default App; diff --git a/FabricExample/package.json b/FabricExample/package.json index bbf4aa729f..0094defb7c 100644 --- a/FabricExample/package.json +++ b/FabricExample/package.json @@ -17,11 +17,15 @@ "@react-navigation/native-stack": "link:../react-navigation/packages/native-stack/", "@react-navigation/routers": "link:../react-navigation/packages/routers/", "@react-navigation/stack": "link:../react-navigation/packages/stack/", + "nanoid": "^4.0.2", "react": "18.2.0", "react-native": "0.74.1", "react-native-gesture-handler": "^2.16.2", + "react-native-reanimated": "3.11.0", + "react-native-restart": "^0.0.27", "react-native-safe-area-context": "^4.10.1", - "react-native-screens": "link:../" + "react-native-screens": "link:../", + "react-native-vector-icons": "^8.0.0" }, "resolutions": { "@react-navigation/core": "link:../react-navigation/packages/core/" diff --git a/FabricExample/src/Chapter.js b/FabricExample/src/Chapter.js deleted file mode 100644 index 46e7234b4e..0000000000 --- a/FabricExample/src/Chapter.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import {Button, ScrollView, StyleSheet, Text, View} from 'react-native'; -import {PRIMARY, WHITE} from './colors'; - -export default function Chapter({navigation, route}) { - const {index, chapters, chapterRoute, afterChapterRoute} = route.params; - const isLast = index === chapters.length - 1; - const nextRoute = isLast ? afterChapterRoute : chapterRoute; - const nextParams = isLast ? {} : {index: index + 1}; - const goToNext = () => navigation.push(nextRoute, nextParams); - const currentChapter = chapters[index]; - return ( - - {currentChapter.title} - {currentChapter.content} -