Skip to content

MartinInAction/react-native-facebook-keyframes

Repository files navigation

Keyframes

react-native-facebook-keyframes

A React Native wrapper for the Facebook Keyframes library.

Just for iOS for now, Android is still WIP.

Getting started

$ npm install react-native-facebook-keyframes --save

Mostly automatic installation

$ react-native link react-native-facebook-keyframes

(*) you must follow the Keyframes dependency configuration section below!

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-facebook-keyframes and add RNFacebookKeyframes.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNFacebookKeyframes.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Keyframes dependency configuration

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-facebook-keyframes/deps/Keyframes/ios/keyframes/ and add keyframes.xcodeproj
  3. In XCode, in the project navigator, select your project. Add keyframes.a to your project's Build PhasesLink Binary With Libraries
  4. Select the keyframes project from the dropdown besides the Stop button in the top bar
  5. Build the keyframes project (Cmd+B).
  6. Select [your project's name] project from the dropdown besides the Stop button in the top bar
  7. Run your project (Cmd+R)<

Usage

import KeyframesView from 'react-native-facebook-keyframes'

<KeyframesView 
  style={{ width: 100, height: 100 }}    // View styles
  seek={1.0}                             // Seek to a given progress in range [0, 1]  
  src={require('./keyframes-logo.json')} // Animation file
/>

Running the sample

  1. Go to the demo/KeyframesDemo folder
    • run npm install
    • run react-native run-ios

If it doesn't work, open and run the project using xCode.

TODOS

  • Add support for Android

MIT Licensed

About

A react-native wrapper for Facebook Keyframes

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 57.2%
  • Objective-C 35.6%
  • JavaScript 6.2%
  • Ruby 1.0%