Missing types on Skeleton with react-native-linear-gradient

[saulojoab]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

I'm trying to import the Skeleton using react-native-linear-gradient like below:

import { Skeleton } from 'moti/skeleton/react-native-linear-gradient';

But I'm getting the following error:

Could not find a declaration file for module 'moti/skeleton/react-native-linear-gradient'. '/Users/saulojoab/dev/eon-repos/eon/node_modules/moti/skeleton/react-native-linear-gradient.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/moti` if it exists or add a new declaration (.d.ts) file containing `declare module 'moti/skeleton/react-native-linear-gradient';

Oddly enough, creating a d.ts declaration file did not work. My app does not break or anything, but the TS error is annoying.

Expected Behavior

Types should be included and no TS error should be shown.

Steps To Reproduce

1. Install Moti
2. import { Skeleton } from 'moti/skeleton/react-native-linear-gradient';
3. Typescript error.

Versions

- Moti: ^0.25.3
- Reanimated: ^3.1.0
- React Native: 0.71.8

Screenshots

Reproduction

Doing what I said above should throw the error.

[nandorojo]

can you instead follow the docs for the babel module resolver?

https://moti.fyi/skeleton#option-2-react-native-linear-gradient

[saulojoab]

@nandorojo Sorry, I forgot to mention on the issue: that also does not work, which is why I was importing directly.

This is my babel.config.ts:

export default {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        root: ['./'],
        alias: {
          '@': './src',
          'moti/skeleton': 'moti/skeleton/react-native-linear-gradient',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

This give me this super weird Requiring unknown module "46" error.

If I remove the moti skeleton alias, everything works fine.

[saulojoab]

Restarting Metro seems to fix the 46 module error. However, It's still trying to use expo-linear-gradient:

Error: Unable to resolve module expo-linear-gradient from /Users/saulojoab/dev/eon-repos/eon/node_modules/moti/build/skeleton/expo.js: expo-linear-gradient could not be found within the project or in these directories:

[nandorojo]

can you delete node modules and clear all caches and try again? seems like the resolution isn't working

[saulojoab]

@nandorojo I tried doing that, didn't work.

• deleted node_modules
• cleared yarn cache
• reseted typescript server
• changed filename to .babelrc
• updated metro.config.js
• restarted metro and rebuilt the app

nothing seems to be working lmao, I'm going insane

[kierangillen]

I also had the same issue when I tried to use the example in the docs.

[kierangillen]

@nandorojo I'm not sure this issue should have been closed.

[nandorojo]

you have to import from moti/skeleton directly after configuring the babel config

[saulojoab]

FYI: I just gave up trying to use react-native-linear-gradient and used the expo package instead.

[nandorojo]

The original issue that was opened here didn’t follow the docs properly which is why it got that TS error. You should still just import from moti/skeleton. But using the expo one is a good solution too