diff --git a/.github/workflows/android-e2e-test.yml b/.github/workflows/android-e2e-test.yml index 2268300927..f1b74365cd 100644 --- a/.github/workflows/android-e2e-test.yml +++ b/.github/workflows/android-e2e-test.yml @@ -37,6 +37,8 @@ jobs: cache: 'yarn' - name: Install root node dependencies run: yarn install && yarn submodules + - name: Install shared app dependencies + run: (cd apps/examples && yarn install) - name: Install node dependencies id: install_deps working-directory: ${{ env.WORKING_DIRECTORY }} diff --git a/.github/workflows/ios-e2e-test.yml b/.github/workflows/ios-e2e-test.yml index bbf55db2aa..f00531f512 100644 --- a/.github/workflows/ios-e2e-test.yml +++ b/.github/workflows/ios-e2e-test.yml @@ -40,6 +40,8 @@ jobs: run: brew tap wix/brew && brew install applesimutils - name: Install root node dependencies run: yarn install && yarn submodules + - name: Install shared app dependencies + run: (cd apps/examples && yarn install) - name: Install node dependencies working-directory: ${{ env.WORKING_DIRECTORY }} run: yarn diff --git a/Example/App.tsx b/Example/App.tsx index d452f5b80d..ea67c0132a 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 '../apps/examples'; -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/Example/ios/Podfile.lock b/Example/ios/Podfile.lock index 8ace4c45a8..c085d7dffa 100644 --- a/Example/ios/Podfile.lock +++ b/Example/ios/Podfile.lock @@ -1489,7 +1489,7 @@ SPEC CHECKSUMS: RNScreens: b32a9ff15bea7fcdbe5dff6477bc503f792b1208 RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4 SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d - Yoga: 348f8b538c3ed4423eb58a8e5730feec50bce372 + Yoga: b9a182ab00cf25926e7f79657d08c5d23c2d03b0 PODFILE CHECKSUM: 7bffbf744a07be2a9e6cfb9359c3debcc9873875 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..ea67c0132a --- /dev/null +++ b/FabricExample/App.tsx @@ -0,0 +1,3 @@ +import App from '../apps/examples'; + +export default App; diff --git a/FabricExample/ios/Podfile.lock b/FabricExample/ios/Podfile.lock index 80a7df1500..5af2c1350a 100644 --- a/FabricExample/ios/Podfile.lock +++ b/FabricExample/ios/Podfile.lock @@ -935,6 +935,8 @@ PODS: - React-Mapbuffer (0.74.1): - glog - React-debug + - react-native-restart (0.0.27): + - React-Core - react-native-safe-area-context (4.10.1): - DoubleConversion - glog @@ -1251,6 +1253,27 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga + - RNReanimated (3.11.0): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Codegen + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - Yoga - RNScreens (3.31.1): - DoubleConversion - glog @@ -1296,6 +1319,8 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga + - RNVectorIcons (8.1.0): + - React-Core - SocketRocket (0.7.0) - Yoga (0.0.0) @@ -1332,6 +1357,7 @@ DEPENDENCIES: - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`) - React-logger (from `../node_modules/react-native/ReactCommon/logger`) - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`) + - react-native-restart (from `../node_modules/react-native-restart`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - React-nativeconfig (from `../node_modules/react-native/ReactCommon`) - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`) @@ -1357,7 +1383,9 @@ DEPENDENCIES: - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) + - RNReanimated (from `../node_modules/react-native-reanimated`) - RNScreens (from `../node_modules/react-native-screens`) + - RNVectorIcons (from `../node_modules/react-native-vector-icons`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: @@ -1426,6 +1454,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/logger" React-Mapbuffer: :path: "../node_modules/react-native/ReactCommon" + react-native-restart: + :path: "../node_modules/react-native-restart" react-native-safe-area-context: :path: "../node_modules/react-native-safe-area-context" React-nativeconfig: @@ -1476,8 +1506,12 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon" RNGestureHandler: :path: "../node_modules/react-native-gesture-handler" + RNReanimated: + :path: "../node_modules/react-native-reanimated" RNScreens: :path: "../node_modules/react-native-screens" + RNVectorIcons: + :path: "../node_modules/react-native-vector-icons" Yoga: :path: "../node_modules/react-native/ReactCommon/yoga" @@ -1488,7 +1522,7 @@ SPEC CHECKSUMS: fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120 glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2 hermes-engine: 16b8530de1b383cdada1476cf52d1b52f0692cbc - RCT-Folly: 045d6ecaa59d826c5736dfba0b2f4083ff8d79df + RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47 RCTDeprecation: efb313d8126259e9294dc4ee0002f44a6f676aba RCTRequired: f49ea29cece52aee20db633ae7edc4b271435562 RCTTypeSafety: a11979ff0570d230d74de9f604f7d19692157bc4 @@ -1512,6 +1546,7 @@ SPEC CHECKSUMS: React-jsitracing: 233d1a798fe0ff33b8e630b8f00f62c4a8115fbc React-logger: 7e7403a2b14c97f847d90763af76b84b152b6fce React-Mapbuffer: 11029dcd47c5c9e057a4092ab9c2a8d10a496a33 + react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162 react-native-safe-area-context: 7f54ad0a774de306ab790c70d9d950321e5c5449 React-nativeconfig: b0073a590774e8b35192fead188a36d1dca23dec React-NativeModulesApple: df46ff3e3de5b842b30b4ca8a6caae6d7c8ab09f @@ -1537,9 +1572,11 @@ SPEC CHECKSUMS: React-utils: 3285151c9d1e3a28a9586571fc81d521678c196d ReactCommon: f42444e384d82ab89184aed5d6f3142748b54768 RNGestureHandler: 156548e18203327173a764c6932a3f52e90cb9cd + RNReanimated: 2f33b2f8c79c456ce3858a7cd2e07460eb5f61e0 RNScreens: 63fe8222c172a79f5c30dd1aefaeb369c6eb57b6 + RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4 SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d - Yoga: 348f8b538c3ed4423eb58a8e5730feec50bce372 + Yoga: b9a182ab00cf25926e7f79657d08c5d23c2d03b0 PODFILE CHECKSUM: c270e520a11547ef636f117b51709c3ed2b291f7 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} -