Add adaptor to createAnimatedComponent() (#1988)

Here we can use an adaptor via setNativeProps to animate component outside the React lifecycle.
The goal is to still be able to use the benefit of the Animated API even thought there are no performance benefits.

A common example is to animate OpenGL node (bare webgl, gl-react, or react-three-fiber) on the JS thread:

```tsx
import { Node } from "gl-react";

// In gl-react, updating the gl API outside React is done via setDrawProps()
// In threejs, we would have a call on a prop by prop basis.
// In webgl, we would use the gl object directly.
const AnimatedNode = Animated.createAnimatedComponent(Node, {
  setNativeProps: (ref, props) => {
    ref.setDrawProps(props);
  },
});
```

## Description

<!--
Description and motivation for this PR.

Inlude Fixes #<number> if this is fixing some issue.

Fixes # .
-->

## Changes

<!--
Please describe things you've changed here, make a **high level** overview, if change is simple you can omit this section.

For example:

- Added `foo` method which add bouncing animation
- Updated `about.md` docs
- Added caching in CI builds

-->

<!--

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before

### After

-->

## Test code and steps to reproduce

<!--
Please include code that can be used to test this change and short description how this example should work.
This snippet should be as minimal as possible and ready to be pasted into editor (don't exclude exports or remove "not important" parts of reproduction example)
-->

## Checklist

- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [x] Added TS types tests
- [ ] Added unit / integration tests
- [ ] Updated documentation
- [x] Ensured that CI passes

Author: wcandillon

react-native-reanimated.d.ts

@@ -247,11 +247,16 @@ declare module 'react-native-reanimated' {
     }
     export class Code extends Component<CodeProps> {}
 
+    type Options<P> = {
+      setNativeProps: (ref: any, props: P) => void;
+    }
     export function createAnimatedComponent<P extends object>(
-      component: ComponentClass<P>
+      component: ComponentClass<P>,
+      options?: Options<P>
     ): ComponentClass<AnimateProps<P>>;
     export function createAnimatedComponent<P extends object>(
-      component: FunctionComponent<P>
+      component: FunctionComponent<P>,
+      options?: Options<P>
     ): FunctionComponent<AnimateProps<P>>;
 
     // classes

src/createAnimatedComponent.js

@@ -57,7 +57,7 @@ function flattenArray(array) {
   return resultArr;
 }
 
-export default function createAnimatedComponent(Component) {
+export default function createAnimatedComponent(Component, options = {}) {
   invariant(
     typeof Component !== 'function' ||
       (Component.prototype && Component.prototype.isReactComponent),
@@ -104,7 +104,7 @@ export default function createAnimatedComponent(Component) {
 
     _attachNativeEvents() {
       const node = this._getEventViewRef();
-      const viewTag = findNodeHandle(node);
+      const viewTag = findNodeHandle(options.setNativeProps ? this : node);
 
       for (const key in this.props) {
         const prop = this.props[key];
@@ -232,8 +232,12 @@ export default function createAnimatedComponent(Component) {
     }
 
     _updateFromNative(props) {
-      // eslint-disable-next-line no-unused-expressions
-      this._component.setNativeProps?.(props);
+      if (options.setNativeProps) {
+        options.setNativeProps(this._component, props);
+      } else {
+        // eslint-disable-next-line no-unused-expressions
+        this._component.setNativeProps?.(props);
+      }
     }
 
     _attachPropUpdater() {