Skip to content

Commit

Permalink
Add Reanimated v2 to Expo (#9879)
Browse files Browse the repository at this point in the history
## HOW

### How to update reanimated 2
First, I've updated `UpdateVendoredModule.ts` files. The script was not flexible enough for reanimated V2 because we use cpp and mm files.
To make it more flexible I've added `ModuleModifier` property which is just a function that's executed right after repo cloning. Additionally, I've added more extensions to the pattern in `findObjcFilesAsync`.
ReanimatedModifier (ModuleModifier for Reanimated) performs the following steps:
1 replaceHermesByJSC();
2 replaceJNIPackages(); 
3 copyCPP();
4 prepareIOSNativeFiles();
AD2 Reanimated is moved to versioned package so we have to change JNI paths. (Cpp uses java packages to find proper java class)
AD4 finds all cpp and mm files and copies them to reanimated directory. (regardless of the depth in the source path).

### Android unversioned run (how it works)
I've merged reanimated build.gradle with expoview one. I tried to include the first one to the second one but it just didn't work. I can fix it in separate pull-request (There was not enough time because the release of sdk 39 has already started and it's important for me to add reanimated before the end of it). The expoview `build.gradle` contains the code that builds reanimated SO and places it under `expoview/src/main/JNILibs`.  It will run only once after the update of reanimated. The native part of the reanimated is plugged into two places. The first one is `VersionedUtils.java`  and the second one is 'Kernel.java'. It's done by setting `JSIModulesPackage`.  


### Android versioning
Reanimated versioning is very similar to the versioning of react-native. To make it work I've done the following things:
changed code that renames JNI in react-native in such a way that it also renames JNI in reanimated.
added `prepare reanimated` step that prepares SO file which is compatible with versioned react-native. (only unversioned reanimated is build in Gradle task versioned one only uses already prepared SO that's created during versioning process)

### iOS unversioned
Most logic that's necessary for TurboModules (which are used by Reanimated V2) has been added by Staszek so this pull-request  only plugs Reanimated TurboModule in `EXVersionManager.mm` file.

### IOS versioning
All obj-c and obj-c++ objects in reanimated2 contain `REA` prefix just like reanimated1. I had to add another sed command that works when REA is in the beginning of the line. All cpp objects are within `reanimated` namespace so I used a similar mechanism to the one that's used for `facebook` namespace.

## Testing
et uvm -m react-native-reanimated OK
et add-sdk -p ios -s 39.0.0.  OK
et add-sdk -p android -s 39.0.0. OK
Ran Reanimted example in sandbox  {iOS, android}x{unversioned, 39.0.0}
Reanimated example:
```js
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from 'react-native-reanimated';
import {View, Button} from 'react-native';
import React from 'react';

export default function AnimatedStyleUpdateExample(props) {
  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      <Animated.View
        style={[
          {width: 100, height: 80, backgroundColor: 'black', margin: 30},
          style,
        ]}
      />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );
}
```
  • Loading branch information
Szymon20000 committed Aug 25, 2020
1 parent 2465596 commit eb9bd27
Show file tree
Hide file tree
Showing 130 changed files with 6,443 additions and 56 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
@@ -1,3 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}
}

0 comments on commit eb9bd27

Please sign in to comment.