Add new architecture support - convert library to turbomodule (#169)

* Add FabricExample app

* Add dependency to the app

* Add `codegenConfig` field in `package.json`

* Add module spec

* feat: edit build.gradle

* feat: edit podspec

* feat: turn new arch on in FabricExample

* feat: apply changes in ios

* feat: unify ts code without event emitter working

* feat: copy App from example and make it work

* Add event emitter methods to module spec

* Export app by default

* Update types in the spec to reflect the implementation

* feat: add compat for paper on Android

* feat: update android Package file

* feat: add noop method from spec on ios

* fix: change exception text

* Reject promises in unsupported methods

* Reject promise in iOS no-op

* Add `@ts-ignore`s

* Add `src` to `files`

* Compatibility with older versions

* Update ios config

* feat: update FabricExample to 0.72

---------

Co-authored-by: Wojciech Lewicki <[email protected]>

FabricExample/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

FabricExample/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

FabricExample/.gitignore

@@ -0,0 +1,66 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+ios/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+/ios/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage

FabricExample/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

FabricExample/.watchmanconfig

@@ -0,0 +1 @@
+{}

FabricExample/App.tsx

@@ -0,0 +1,171 @@
+import React, {useEffect, useState} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Button,
+  TextInput,
+  Alert,
+  SafeAreaView,
+  Platform,
+  Image,
+} from 'react-native';
+import Clipboard, {useClipboard} from '@react-native-clipboard/clipboard';
+
+// Small icon of a plus for demo purposes
+const TEST_IMAGE =
+  'iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==';
+
+const changeListener = () => {
+  console.warn('Clipboard changed!');
+};
+
+const App: React.FC = () => {
+  const [text, setText] = useState('');
+  const [isURL, setIsURL] = useState(false);
+  const [data, setString] = useClipboard();
+  const [image, setImage] = useState(null);
+  const [imageString, setImageString] = useState<string>('');
+
+  const checkStringType = async () => {
+    const checkClipboard = await Clipboard.hasURL();
+    setIsURL(checkClipboard);
+  };
+
+  const pasteImageAndroid = async () => {
+    const base64 = await Clipboard.getImage();
+    setImageString(base64);
+  };
+
+  useEffect(() => {
+    checkStringType();
+  }, [data]);
+
+  useEffect(() => {
+    if (Platform.OS === 'ios' || Platform.OS === 'android') {
+      const listener = Clipboard.addListener(changeListener);
+
+      return () => {
+        listener.remove();
+      };
+    }
+  }, []);
+
+  const writeToClipboard = async () => {
+    setString(text);
+    Alert.alert(`Copied to clipboard: ${text}`);
+  };
+
+  const writeImageToClipboard = async () => {
+    Clipboard.setImage(TEST_IMAGE);
+    Alert.alert(`Copied Image to clipboard`);
+  };
+
+  const getImage = async () => {
+    if (await Clipboard.hasImage()) {
+      const image = await Clipboard.getImagePNG();
+      setImage(image);
+    } else {
+      console.warn('No image in clipboard');
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.header}>Clipboard Module</Text>
+      <View style={styles.main}>
+        <Text style={styles.boldText}>Clipboard Contents: </Text>
+        <Text style={styles.clipboardContent}>{data}</Text>
+        <Text style={styles.boldText}>Content is URL: </Text>
+        <Text style={styles.clipboardContent}>{JSON.stringify(isURL)}</Text>
+        <Text style={styles.boldText}>Content is IMAGE: </Text>
+        {image && <Image source={{uri: image}} style={styles.imageContent} />}
+        <View style={styles.separator} />
+        <TextInput
+          selectTextOnFocus={true}
+          style={
+            Platform.OS === 'macos' ? styles.textInputMacOS : styles.textInput
+          }
+          onChangeText={input => setText(input)}
+          value={text}
+          placeholder="Type here..."
+        />
+        <Button onPress={writeToClipboard} title="Write to Clipboard" />
+        <Button
+          onPress={writeImageToClipboard}
+          title="Write Image to Clipboard"
+        />
+        <Button onPress={getImage} title="Get Image from clipboard" />
+        {Platform.OS === 'android' && (
+          <View style={styles.imageButtonAndroid}>
+            <Button
+              onPress={pasteImageAndroid}
+              title="Paste image from Android Clipboard"
+            />
+          </View>
+        )}
+      </View>
+      {imageString === '' ? null : (
+        <Image style={styles.imageAndroid} source={{uri: imageString}} />
+      )}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  main: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  header: {
+    fontWeight: '700',
+    fontSize: 30,
+    marginBottom: 10,
+  },
+  boldText: {
+    fontWeight: '600',
+    marginBottom: 10,
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: 'gray',
+    width: '80%',
+    marginVertical: 20,
+  },
+  textInput: {
+    borderColor: 'gray',
+    borderWidth: 1,
+    width: '80%',
+    paddingHorizontal: 80,
+    paddingVertical: 8,
+    marginBottom: 16,
+  },
+  textInputMacOS: {
+    borderColor: 'gray',
+    borderWidth: StyleSheet.hairlineWidth,
+    width: 300,
+    padding: 4,
+    marginBottom: 16,
+  },
+  clipboardContent: {
+    marginBottom: 20,
+  },
+  imageContent: {
+    width: 40,
+    height: 40,
+  },
+  imageAndroid: {
+    height: 160,
+    width: 160,
+  },
+  imageButtonAndroid: {
+    marginTop: 10,
+  },
+});
+
+export default App;

FabricExample/Gemfile

@@ -0,0 +1,7 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+gem 'cocoapods', '~> 1.13'
+gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'

FabricExample/README.md

@@ -0,0 +1,79 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

FabricExample/__tests__/App.test.tsx

@@ -0,0 +1,17 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: import explicitly to use the types shiped with jest.
+import {it} from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});