Feasibility of removing expo-linear-gradient dependency from the moti skeleton component?

[gorbypark]

I just wanted to ask what the feasibility of would be of not depending on expo-linear-gradient? As a package it works great, but it's dependency on Expo being installed is not ideal. Expo is very "heavy" and touches a ton of stuff throughout the project and makes debugging quite difficult. We have spent a week (without success) trying to get a regular react-native project with expo added to work with detox on android, for example. Something about them just don't work well together. We have also had issues when our react-native version was higher than the react-native version in the latest expo SDK.

Anyways, just wanted to prompt a discussion to see if there was a technical reason something like react-native-linear-gradient couldn't be used instead.

[XantreDev]

Hi. I think there are problem with that moti want to be usable in expo. I think we should research how to use package what we have

[gorbypark]

If you do try, the api varies ever so slightly between the two packages.
If I recall correctly, react-native-linear-gradient requires the start
point as an object with x and y keys while the expo one just has them as an
array of integers. Just swapping the imports wouldn’t be enough but it’s a
pretty trivial change.

I ended up using patch package to accomplish this in my project and it’s
working great, although it would be nice to not rely on patches!

I’ll post my patch tomorrow when I’m at my computer.

[XantreDev]

Ok, no problem

[gorbypark]

Here is the patch-package patch file. Basically it just changes the import from a named import to a default import and changes the start and end prop values to be objects instead of arrays. Otherwise they seem to work exactly the same.

This is obviously patching the built/transpiled runtime version not the actual source.

moti+0.21.0.patch

 diff --git a/node_modules/moti/build/skeleton/skeleton.js b/node_modules/moti/build/skeleton/skeleton.js
index d71982a..3e4176f 100644
--- a/node_modules/moti/build/skeleton/skeleton.js
+++ b/node_modules/moti/build/skeleton/skeleton.js
@@ -1,4 +1,4 @@
-import { LinearGradient } from 'expo-linear-gradient';
+import LinearGradient from 'react-native-linear-gradient';
 import React, { useState, createContext, useContext } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { View as MotiView } from '../components';
@@ -109,7 +109,7 @@ const AnimatedGradient = React.memo(function AnimatedGradient({ measuredWidth, c
                 duration: 3000,
                 ...transition,
             } },
-            React.createElement(LinearGradient, { colors: colors, start: [0.1, 1], end: [1, 1], style: StyleSheet.absoluteFillObject }))));
+            React.createElement(LinearGradient, { colors: colors, start: {x: 0.1, y:1}, end: {x: 1, y: 1}, style: StyleSheet.absoluteFillObject }))));
 }, function propsAreEqual(prev, next) {
     if (prev.measuredWidth !== next.measuredWidth)
         return false;

[XantreDev]

Thanks. I will try to make this in real code

[XantreDev]

#266

[gorbypark]

[nandorojo]

that’s correct, there would be a centralized component, and you’d likely register the gradient you want to use at the root

[XantreDev]

Comment is invisible for me)

[nandorojo]

I opened a PR at #267 to address this.