Lottie
Primary version
Primary version
  • Introduction
  • Android
    • Basic Workflow
    • Caching and Preloading
    • Dynamic Properties
    • Images
    • Performance
    • Lottie vs AVD
    • APK size
    • Troubleshooting
    • Contributing
  • iOS/MacOS
    • Docs
      • View Controller Transitions
      • Dynamic Properties
      • Adding Views to Animation at Runtime
    • Tutorials
      • Building a Dynamic Progress Loader
    • Troubleshooting
      • Performance
      • Troubleshooting
  • React Native
    • Sample App
    • Props
    • Troubleshooting
  • Web
    • Getting started
    • Video tutorial
    • Previewing
    • Expressions
    • Troubleshooting
  • After Effects
    • Getting started
    • Install Bodymovin Plugin
      • Bodymovin settings
    • General tips & guidelines
    • Sketch/SVG/Illustrator to Lottie walkthrough
    • Advanced Illustrator to Lottie walkthrough
    • Troubleshooting
  • Supported After Effects Features
  • Other Platforms
    • Mobile
      • Xamarin
      • NativeScript
      • Titanium
      • Windows (UWP)
    • Web Frameworks
      • React
      • Vue
      • Angular
  • Troubleshooting
  • Community Showcase
Powered by GitBook
On this page
  1. React Native

Props

type AnimationProps = {
  // The source of animation. Can be referenced as a local asset by a string, or remotely
  // with an object with a `uri` property, or it can be an actual JS object of an
  // animation, obtained (for example) with something like
  // `require('../path/to/animation.json')`
  source: string | AnimationJson | { uri: string },

  // A number between 0 and 1, or an `Animated` number between 0 and 1. This number
  // represents the normalized progress of the animation. If you update this prop, the
  // animation will correspondingly update to the frame at that progress value. This
  // prop is not required if you are using the imperative API.
  progress: number | Animated = 0,

  // The speed the animation will progress. This only affects the imperative API. The
  // default value is 1.
  speed: number = 1,

  // A boolean flag indicating whether or not the animation should loop.
  loop: boolean = false,

  // Style attributes for the view, as expected in a standard `View`:
  // http://facebook.github.io/react-native/releases/0.39/docs/view.html#style
  // CAVEAT: border styling is not supported.
  style?: ViewStyle,

  // [Android] Relative folder inside of assets containing image files to be animated.
  // Make sure that the images that bodymovin export are in that folder with their names unchanged (should be img_#).
  // Refer to https://github.com/airbnb/lottie-android#image-support for more details.
  imageAssetsFolder: string,
};

Methods:

class Animation extends React.Component {

  // play the animation all the way through, at the speed specified as a prop.
  play();


  // Reset the animation back to `0` progress.
  reset();

}
PreviousSample AppNextTroubleshooting

Last updated 7 years ago