sakalx / react-glitch-effect Goto Github PK

Steps to reproduce:

Basically, after running npm install react-glitch-effect and importing using:

import GlitchClip from 'react-glitch-effect/core/Text'; or;
import GlitchClip from 'react-glitch-effect/core/Clip';

I get the "Unable to Resolve Module..." error for styles.css.

Here are my dependencies:
"dependencies": { "@expo/vector-icons": "~10.0.6", "@react-native-community/masked-view": "0.1.6", "@react-navigation/bottom-tabs": "^5.0.0", "@react-navigation/native": "^5.0.0", "@react-navigation/stack": "^5.0.0", "@react-navigation/web": "~1.0.0-alpha.9", "@use-expo/font": "^2.0.0", "expo": "^37.0.7", "expo-asset": "~8.1.3", "expo-constants": "~9.0.0", "expo-font": "~8.1.0", "expo-web-browser": "~8.1.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz", "react-native-elements": "^1.2.7", "react-native-gesture-handler": "~1.6.0", "react-native-safe-area-context": "0.7.3", "react-native-screens": "~2.2.0", "react-native-web": "~0.11.7" }, "devDependencies": { "@babel/core": "^7.8.6", "babel-preset-expo": "~8.1.0", "jest-expo": "~37.0.0" },

First of all thanks for this wonderful package

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
I would like to control the interval between every two animations in GlitchClip
Sadly this isn't possible, the only possible thing is to change the duration property which controls both the animation duration and the interval between the animations.

Describe the bug
Failed to compile
./node_modules/react-glitch-effect/core/GlitchText/style/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-glitch-effect/core/GlitchText/index.js

Source:
https://nextjs.org/docs/messages/css-npm

In this screen recording, I have the duration prop set to 3s (default), which adds a 3s delay in between each glitch.

If I decrease duration to 1s, the glitch happens after every second, but the glitch animation is also sped up. Is there a way to decouple these two ideas with the props available?

If not, happy to open a PR with any recommended steps

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.