Skip to content

Commit

Permalink
chore(internal): rename AnimatedLottieView to LottieView
Browse files Browse the repository at this point in the history
  • Loading branch information
@matinzd
matinzd committed Jul 24, 2023
1 parent f00907b commit 9fd591f
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 54 deletions.
6 changes: 3 additions & 3 deletions apps/paper/src/LottieAnimatedExample.tsx
View file
@@ -1,6 +1,6 @@
import Slider from '@react-native-community/slider';
import LottieView from 'lottie-react-native';
import {AnimatedLottieViewProps} from 'lottie-react-native/lib/typescript/LottieView.types';
import {LottieViewProps} from 'lottie-react-native/lib/typescript/LottieView.types';
import React, {useEffect, useRef, useState} from 'react';
import {
Animated,
Expand Down Expand Up @@ -31,11 +31,11 @@ const LottieAnimatedExample = () => {
const [isInverse, setIsInverse] = useState(false);
const [loop, setLoop] = useState(true);
const [renderMode, setRenderMode] =
useState<AnimatedLottieViewProps['renderMode']>('AUTOMATIC');
useState<LottieViewProps['renderMode']>('AUTOMATIC');
const [isImperative, setImperative] = useState(false);
const anim = useRef<LottieView>(null);

const [progress] = useState(new Animated.Value(0));
const progress = useRef(new Animated.Value(0)).current;

const onAnimationFinish = () => {
console.log('Animation finished');
Expand Down
6 changes: 3 additions & 3 deletions apps/paper/src/RenderModePicker.tsx
View file
@@ -1,11 +1,11 @@
import React, {useEffect, useState} from 'react';
import {Platform} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import {AnimatedLottieViewProps} from 'lottie-react-native/lib/typescript/LottieView.types';
import {LottieViewProps} from 'lottie-react-native/lib/typescript/LottieView.types';

interface Props {
renderMode: AnimatedLottieViewProps['renderMode'];
onChange: (renderMode: AnimatedLottieViewProps['renderMode']) => void;
renderMode: LottieViewProps['renderMode'];
onChange: (renderMode: LottieViewProps['renderMode']) => void;
}

const renderModes = [
Expand Down
53 changes: 26 additions & 27 deletions docs/api.md
View file
@@ -1,34 +1,33 @@
## Component API

| Prop | Description | Default | Platform |
|---|---|---|---|
|**`source`**| **Mandatory** - 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')` |*None*| All |
|**`progress`**| 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. |`0`| All |
|**`speed`**| The speed the animation will progress. Sending a negative value will reverse the animation |`1`| All |
|**`duration`**| The duration of the animation in ms. Takes precedence over `speed` when set. This only works when `source` is an actual JS object of an animation. |`undefined`| All |
|**`loop`**|A boolean flag indicating whether or not the animation should loop. |`true`| All |
|**`autoPlay`**|A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. |`false`| All |
|**`autoSize`**|A boolean flag indicating whether or not the animation should size itself automatically according to the width in the animation's JSON. This only works when `source` is an actual JS object of an animation. |`false`| All |
|**`resizeMode`**|Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports `cover`, `contain` and `center`. |`contain`| All |
|**`style`**|Style attributes for the view, as expected in a standard [`View`](http://facebook.github.io/react-native/releases/0.46/docs/layout-props.html), aside from border styling |*None*| All |
|**`imageAssetsFolder`**| Needed for **Android** to work properly with assets, iOS will ignore it. |*None*| Android |
|**`useNativeLooping`**| **Only Windows**. When enabled, uses platform-level looping to improve smoothness, but onAnimationLoop will not fire and changing the `loop` prop will reset playback rather than finishing gracefully. | false | Windows |
|**`onAnimationLoop`**| **Only Windows**. A callback function invoked when the animation loops. | *None* | Windows |
|**`onAnimationFinish`**| A callback function which will be called when animation is finished. This callback is called with a boolean `isCancelled` argument, indicating if the animation actually completed playing, or if it was cancelled, for instance by calling `play()` or `reset()` while is was still playing. Note that this callback will be called only when `loop` is set to false. |*None*| All |
|**`renderMode`**| a String flag to set whether or not to render with `HARDWARE` or `SOFTWARE` acceleration |`AUTOMATIC`| iOS, Android |
|**`cacheComposition`**| **Only Android**, a boolean flag indicating whether or not the animation should do caching. |`true`| Android |
|**`colorFilters`**| An array of objects denoting layers by KeyPath and a new color filter value (as hex string). |`[]`| All |
|**`textFiltersAndroid`**| **Only Android**, an array of objects denoting text values to find and replace. |`[]`| Android |
|**`textFiltersIOS`**| **Only iOS**, an array of objects denoting text layers by KeyPath and a new string value. |`[]`| iOS |
| Prop | Description | Default | Platform |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------ |
| **`source`** | **Mandatory** - 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')` | _None_ | All |
| **`progress`** | 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. | `0` | All |
| **`speed`** | The speed the animation will progress. Sending a negative value will reverse the animation | `1` | All |
| **`duration`** | The duration of the animation in ms. Takes precedence over `speed` when set. This only works when `source` is an actual JS object of an animation. | `undefined` | All |
| **`loop`** | A boolean flag indicating whether or not the animation should loop. | `true` | All |
| **`autoPlay`** | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | `false` | All |
| **`resizeMode`** | Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports `cover`, `contain` and `center`. | `contain` | All |
| **`style`** | Style attributes for the view, as expected in a standard [`View`](http://facebook.github.io/react-native/releases/0.46/docs/layout-props.html), aside from border styling | _None_ | All |
| **`imageAssetsFolder`** | Needed for **Android** to work properly with assets, iOS will ignore it. | _None_ | Android |
| **`useNativeLooping`** | **Only Windows**. When enabled, uses platform-level looping to improve smoothness, but onAnimationLoop will not fire and changing the `loop` prop will reset playback rather than finishing gracefully. | false | Windows |
| **`onAnimationLoop`** | **Only Windows**. A callback function invoked when the animation loops. | _None_ | Windows |
| **`onAnimationFinish`** | A callback function which will be called when animation is finished. This callback is called with a boolean `isCancelled` argument, indicating if the animation actually completed playing, or if it was cancelled, for instance by calling `play()` or `reset()` while is was still playing. Note that this callback will be called only when `loop` is set to false. | _None_ | All |
| **`renderMode`** | a String flag to set whether or not to render with `HARDWARE` or `SOFTWARE` acceleration | `AUTOMATIC` | iOS, Android |
| **`cacheComposition`** | **Only Android**, a boolean flag indicating whether or not the animation should do caching. | `true` | Android |
| **`colorFilters`** | An array of objects denoting layers by KeyPath and a new color filter value (as hex string). | `[]` | All |
| **`textFiltersAndroid`** | **Only Android**, an array of objects denoting text values to find and replace. | `[]` | Android |
| **`textFiltersIOS`** | **Only iOS**, an array of objects denoting text layers by KeyPath and a new string value. | `[]` | iOS |

## Methods (Imperative API):

| Method | Description |
|---|---|
|**`play`**| Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation when called as `play(startFrame, endFrame)`.
|**`reset`**| Reset the animation back to `0` progress.
|**`pause`**| Pauses the animation.
|**`resume`**| Resumes the paused animation.
| Method | Description |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **`play`** | Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation when called as `play(startFrame, endFrame)`. |
| **`reset`** | Reset the animation back to `0` progress. |
| **`pause`** | Pauses the animation. |
| **`resume`** | Resumes the paused animation. |

## Using animations with assets

Expand All @@ -47,6 +46,7 @@ When creating animations using AfterEffects and bodymovin, the exported json may
],
...
```

To make `react-native-lottie` use those assets properly, it is necessary to go for the native route: so remember that you need to **fully** rebuild your application if you modify the images / add new ones.

### Android
Expand All @@ -58,7 +58,6 @@ You will then need to refer that folder, via its relative path, in the `imageAss

You need to open XCode, right click on the Resources folder (on the left column), "Add file to [Project]" and select the images required.


#### Renaming assets

If you find yourself in the necessity to rename the images (ex. multiple animations with assets), you can - but you need to **remember** to modify the name in the json file too, like:
Expand Down
8 changes: 3 additions & 5 deletions packages/core/src/LottieView.tsx
View file
@@ -1,21 +1,20 @@
import React from 'react';
import { NativeSyntheticEvent, ViewProps, processColor } from 'react-native';

import type { AnimatedLottieViewProps } from './LottieView.types';
import type { LottieViewProps } from './LottieView.types';

import NativeLottieAnimationView, {
Commands,
} from './specs/LottieAnimationViewNativeComponent';

type Props = AnimatedLottieViewProps & { containerProps?: ViewProps };
type Props = LottieViewProps & { containerProps?: ViewProps };

const defaultProps: Props = {
source: undefined,
progress: 0,
speed: 1,
loop: true,
autoPlay: false,
autoSize: false,
enableMergePathsAndroidForKitKatAndAbove: false,
cacheComposition: true,
useNativeLooping: false,
Expand All @@ -28,7 +27,7 @@ const defaultProps: Props = {
/**
* View hosting the lottie animation.
*/
export class AnimatedLottieView extends React.PureComponent<Props, {}> {
export class LottieView extends React.PureComponent<Props, {}> {
static defaultProps = defaultProps;

_lottieAnimationViewRef:
Expand Down Expand Up @@ -86,7 +85,6 @@ export class AnimatedLottieView extends React.PureComponent<Props, {}> {
const {
style,
source,
autoSize,
autoPlay,
duration,
textFiltersAndroid,
Expand Down
17 changes: 3 additions & 14 deletions packages/core/src/LottieView.types.ts
View file
@@ -1,8 +1,4 @@
import type {
StyleProp,
ViewStyle,
LayoutChangeEvent,
} from 'react-native';
import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';

/**
* Serialized animation as generated from After Effects
Expand Down Expand Up @@ -37,9 +33,9 @@ type TextFilterAndroid = {
};

/**
* Properties of the AnimatedLottieView component
* Properties of the LottieView component
*/
export interface AnimatedLottieViewProps {
export interface LottieViewProps {
/**
* 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
Expand Down Expand Up @@ -101,13 +97,6 @@ export interface AnimatedLottieViewProps {
*/
autoPlay?: boolean;

/**
* A boolean flag indicating whether or not the animation should size itself automatically
* according to the width in the animation's JSON. This only works when source is an actual
* JS object of an animation.
*/
autoSize?: boolean;

/**
* A callback function which will be called when animation is finished. Note that this
* callback will be called only when `loop` is set to false.
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/index.tsx
View file
@@ -1,2 +1,2 @@
import { AnimatedLottieView } from './LottieView';
export default AnimatedLottieView;
import { LottieView } from './LottieView';
export default LottieView;

0 comments on commit 9fd591f

Please sign in to comment.