feat: Publish fabric and classic architecture release

.gitignore

@@ -49,3 +49,14 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+
+# for android paper implementations
+!android/build
+android/build/*
+!android/build/generated/
+android/build/generated/*
+!android/build/generated/source
+android/build/generated/source/*
+!android/build/generated/source/codegen
+android/build/generated/source/codegen/*
+!android/build/generated/source/codegen/java/

FabricExample/App.js

@@ -1,112 +1,45 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow strict-local
- */
-
 import React from 'react';
-import type {Node} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-const Section = ({children, title}): Node => {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-};
-
-const App: () => Node = () => {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.js</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
+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';
+import {enableFabric} from 'react-native-screens';
+
+const Stack = createNativeStackNavigator();
+
+enableFabric();
+
+const App = () => (
+  <NavigationContainer>
+    <Stack.Navigator
+      screenOptions={{
+        headerHideBackButton: true,
+        direction: I18nManager.isRTL ? 'rtl' : 'ltr',
+      }}>
+      <Stack.Screen
+        name="Chapter"
+        options={{
+          title: 'Fabric Example',
+          headerShown: false,
+        }}
+        initialParams={{
+          index: 0,
+          chapters: chapters,
+          chapterRoute: 'Chapter',
+          afterChapterRoute: 'HeaderDemo',
+        }}
+        component={Chapter}
+      />
+      <Stack.Screen
+        name="HeaderDemo"
+        component={HeaderDemo}
+        options={{title: 'Header Demo', headerTintColor: WHITE}}
+      />
+    </Stack.Navigator>
+  </NavigationContainer>
+);
 
 export default App;

FabricExample/README.md

@@ -0,0 +1,19 @@
+# React Native Screens example app that uses fabric architecture
+
+## Installing & running application
+
+Before running application you need to install all dependencies. To do that:
+- In project's root directory run `yarn install`
+- In FabricExample directory run `yarn install`
+
+### Android
+
+To run this application on Android you need to have Java 11 active on your computer. You can check which version you are using by running `javac --version`. You can change it by changing `JAVA_HOME` environment variable or in Android Studio settings.
+
+Then you can run this application by `yarn android` or from Android Studio.
+
+### iOS
+
+To run on iOS first go to `FabricExample/ios` and run `RCT_NEW_ARCH_ENABLED=1 pod install`. This will install pods for Fabric architecture.
+
+Then in `FabricExample` run `yarn ios` or run application from Xcode.

FabricExample/android/app/build.gradle

@@ -1,4 +1,6 @@
 apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"
+
 
 import com.android.build.OutputFile
 
@@ -292,3 +294,11 @@ def isNewArchitectureEnabled() {
     // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true`
     return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
 }
+
+react {
+    reactRoot = rootProject.file("../node_modules/react-native/")
+    codegenDir = rootProject.file("../node_modules/react-native-codegen/")
+    jsRootDir = rootProject.file("../")
+    libraryName = "screens_fabric_app"
+    codegenJavaPackageName = "com.screensexample"
+}

FabricExample/android/app/src/main/java/com/fabricexample/newarchitecture/MainApplicationReactNativeHost.java

@@ -22,6 +22,8 @@
 import com.fabricexample.BuildConfig;
 import com.fabricexample.newarchitecture.components.MainComponentsRegistry;
 import com.fabricexample.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
+import com.swmansion.rnscreens.RNScreensComponentsRegistry;
+
 import java.util.ArrayList;
 import java.util.List;
 
@@ -95,6 +97,7 @@ public JSIModuleProvider<UIManager> getJSIModuleProvider() {
                 // The one that is generated with the template contains no components
                 // and just provides you the one from React Native core.
                 MainComponentsRegistry.register(componentFactory);
+                RNScreensComponentsRegistry.register(componentFactory);
 
                 final ReactInstanceManager reactInstanceManager = getReactInstanceManager();
 

FabricExample/android/app/src/main/jni/Android.mk

@@ -5,6 +5,8 @@ include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
 # If you wish to add a custom TurboModule or Fabric component in your app you
 # will have to include the following autogenerated makefile.
 # include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
+include $(REACT_ANDROID_DIR)/../../react-native-screens/android/src/main/jni/Android.mk
+
 include $(CLEAR_VARS)
 
 LOCAL_PATH := $(THIS_DIR)
@@ -42,7 +44,8 @@ LOCAL_SHARED_LIBRARIES := \
   librrc_view \
   libruntimeexecutor \
   libturbomodulejsijni \
-  libyoga
+  libyoga \
+  librnscreens_modules 
 
 LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall
 

FabricExample/android/gradle.properties

@@ -10,7 +10,7 @@
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx1024m -XX:MaxPermSize=256m
-# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
@@ -37,4 +37,4 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true

FabricExample/ios/FabricExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

FabricExample/ios/Podfile

@@ -2,6 +2,7 @@ require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
 platform :ios, '11.0'
+install! 'cocoapods', :deterministic_uuids => false
 
 target 'FabricExample' do
   config = use_native_modules!