Add support for Reanimated v3

[phanghos]

Issue or RFC Endorsed by Atom's Maintainers

Closes #65 and #66

Description of the Change

This MR adds support for Reanimated v3. Previous implementation of SkeletonContent was using deprecated functions from v1 which have been removed from the v3 API (v2 was still backwards-compatible). In order to allow users to keep using this package as the React Native ecosystem (and Reanimated) grow and evolve, it is necessary to support more recent versions.

The main component has also been refactored into smaller atomic components. This decision was also triggered by the fact that to be able to use some of the new APIs (useAnimatedStyle), it is required that the caller is a React component or Hook itself.

Helper functions previously living inside the component body have been moved into their own helper file. These functions have all become worklets, since they will be called from the UI thread.

Also, I took the time to upgrade the packagesreact-native-linear-gradient and typescript to their latest versions.

Finally, I've added the possibility to pass an optional container and containerProps props as part of the layout configuration (ICustomViewStyle) to be able to pass a custom container / wrapper component to wrap the nested children bones.

TypeScript type definitions (and type safety) have also been improved

Minor refactorings: use optional chaining where possible, don't use non-null assertion operator blindly, etc...

Alternate Designs

I didn't consider any other alternatives. Upgrading Reanimated and refactoring the component was the only way to go as far as I'm concerned.

Possible Drawbacks

So far, none.

Verification Process

• I tested many different layout configurations.
• I added a new test to cover the new use case of passing a container / wrapper component.

Release Notes

• Add support for Reanimated v3.
• Add the possibility to pass a container / wrapper component to wrap nested children bones.

[HaidarZ]

@alexZajac is there a possibility to have this merged, we're stuck with Reanimated v2 :/

[ahmed-abdelkader-00]

would like to see this merged too, or is there a way to install this fork instead?

[phanghos]

@HaidarZ @ahmed-abdelkader-00 You should be able to install the package from the fork for the time being if you declare the dependency in your package.json like this:

git+https://github.com/phanghos/react-native-skeleton-content-nonexpo.git#upgrade-reanimated

[stelmakhivan]

What is the status of this pull request?

[ahmed-abdelkader-00]

git+https://github.com/phanghos/react-native-skeleton-content-nonexpo.git#upgrade-reanimated

I got errors when I tried to install it this way

Found 14 errors in 6 files.

Errors Files
7 src/tests/SkeletonContent.test.tsx:161
1 src/BoneContainer.tsx:23
1 src/Bones/BoneContainer.tsx:23
3 src/Bones/ShiverBone.tsx:64
1 src/Bones/StaticBone.tsx:46
1 src/SkeletonContent.tsx:79
error Command failed with exit code 2.

[ahinkle]

I'm getting the same thing as @ahmed-abdelkader-00

Just some type issues @phanghos 🙂

"react-native": "0.72.6",
"react-native-reanimated": "^3.5.4",
"react-native-linear-gradient": "^2.8.3",

example:

$ npm run build

> react-native-skeleton-content-nonexpo@1.0.13 build
> tsc -p tsconfig.json

src/__tests__/SkeletonContent.test.tsx:161:44 - error TS2345: Argument of type 'typeof Text' is not assignable to parameter of type 'ElementType'.
  Type 'typeof Text' is not assignable to type 'ComponentClass<any, any>'.
    Types of property 'contextType' are incompatible

[RohanWeli]

same errors as @ahmed-abdelkader-00 mentioned above :(

found this alternative : https://github.com/marcuzgabriel/react-native-reanimated-skeleton/

[joaonew]

We need this to use Reanimated v3, and we need reanimated v3 to run react native 0.72