nandorojo / moti

🐼 The React Native (+ Web) animation library, powered by Reanimated 3.
https://moti.fyi
MIT License
4k stars 127 forks source link

Skeleton Animation - cannot find module moti/skeleton #285

Closed LeoAnt02 closed 1 year ago

LeoAnt02 commented 1 year ago

Is there an existing issue for this?

Current Behavior

The import from the docs for the skeleton loading is not working on my expo project All other import works, and other animations are working with no issues

Also there is no existing npm package called moti/skeleton - I also tried motify/skeleton which seems to be the old version, the npm install but it's not working either in import

import { MotiView, AnimatePresence, View } from "moti";
import { Skeleton } from 'moti/skeleton';

export default function Skeleton() {

  const colorMode = 'light';

  return (
      <MotiView
        transition={{
          type: 'timing',
        }}
        style={[styles.container, styles.padded]}
        animate={{ backgroundColor: '#ffffff' }}
      >
        <Skeleton colorMode={colorMode} width={250} />
      </MotiView>

  )
};

Expected Behavior

-

Steps To Reproduce

No response

Versions

"expo": "~47.0.14",
 "react-native-reanimated": "^2.14.4",
 "moti": "^0.8.0",
 "react-native": "0.70.8",
 "react-native-web": "~0.18.12",

Screenshots

-

Reproduction

-

LeoAnt02 commented 1 year ago

I've found a working solution by adding this config to my webpack, not sure if this is the right way to go

const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["moti"],
      },
    },
    argv
  );

   config.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto",
  });
nandorojo commented 1 year ago

Are you on the latest moti?

nandorojo commented 1 year ago

Maybe add moti/skeleton to dangerouslyAddModulePathsToTranspile?

nandorojo commented 1 year ago

I've found a working solution by adding this config to my webpack, not sure if this is the right way to go

const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["moti"],
      },
    },
    argv
  );

   config.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto",
  });

This looks like what the docs recommend.