hayanisaid / rnal

Animations library for react-native

react-native animations library (rnal) that makes using the animations easy 🚀

Installation ⚓️

• NPM

npm -i rnal --save

• Yarn

yarn add rnal

How to use it 👇

🎈 Fade 🎈

import { Fade } from "rnal";
export default class App extends Component<Props, State> {

  render() {
  
    return (
      <View style={{flex:1}}>
        <Fade >
          <Image
            source={require("./images/flowrs.jpg")}
            height={200}
            width={450}
            style={{ width: 350, height: 200 }}
            resizeMode="cover"
          />
        </Fade>
      </View>
    );
  }
}

Options and props 🎁

Props	Value	Default	Description
duration	number	300	Play the audio track that matches the system language. If none match, play the first track.
startWhen	boolean	false	set when the animation should start, by default the animation start when the component mount.
infinite	boolean	false	Determine if the animation is infinite or just run once.
direction	string	300	specify the direction of the animation ex("toRight", "toLeft", "up","down).
sets	Object	{from:0,to:180}	set the point start and the end of the animation, used with Rotate animation .

rnal's Issues

TypeScript Error

This is the error l get when l install the library in a react -native project.

`Could not find a declaration file for module 'rnal'.
'.../node_modules/rnal/index.js' implicitly has an 'any' type.

Try npm i --save-dev @types/rnal if it exists or add a new declaration (.d.ts) file containing declare module 'rnal';

Unfortunately, when l tried yarn add -D @types/anal l got this error error An unexpected error occurred: "https://registry.yarnpkg.com/@types%2frnal: Not found".

"react": "16.13.1",
"react-dom": "^16.13.1",
"react-native": "0.63.2",
"rnal": "^0.2.1",

Fix normal vs. dev dependencies

Installing rnal currently causes a haste module naming collision because two copies of react-native exist in node_modules—one for whatever project installed rnal, and rnal's copy at node_modules/rnal/node_modules/react-native

Fastest way to address this is to move react-native to devDependencies

SlideOut option

Hi

Can you please confirm if I can use the SlideIn option to also perform a SlideOut.

I'm looking for a library where I can SlideInLeft and SlideOutRight some content based on toggle button event.

Thanks

Unable to resolve module `AccessbilityInfo`

From a fresh implementation using yarn add rnal and simple addition of SlideInRight my build results in a red screen.

    OS: macOS 10.15.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.27 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.12.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.2
      System Images: android-25 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

error AccessibilityInfo

Unable to resolve "AccessibilityInfo" from "node_modules\rnal\node_modules\react-native\Libraries\react-native\react-native-implementation.js"

error npm

npm -i don't work
Need npm i