From 5e505628dec84e2f43f7b623265aeb5ad033da89 Mon Sep 17 00:00:00 2001 From: Anand Parshuramka Date: Wed, 3 Aug 2022 12:36:31 +0530 Subject: [PATCH 1/3] Add styling to JSON animation --- src/core/Types.ts | 2 ++ src/core/components/AnimationWrapperView.tsx | 5 +++-- src/core/components/wrapper/BaseAnimationWrapper.tsx | 4 ++-- src/core/components/wrapper/JsonAnimationWrapper.tsx | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/core/Types.ts b/src/core/Types.ts index bb7641c..ac0cb9c 100644 --- a/src/core/Types.ts +++ b/src/core/Types.ts @@ -6,6 +6,7 @@ import { RippleAnimationProps } from "./components/wrapper/RippleAnimationWrappe import { ScaleAnimationProps } from "./components/wrapper/ScaleAnimationWrapper"; import { WiggleAnimationProps } from "./components/wrapper/WiggleAnimationWrapper"; import BaseAnimationConfig from "./data/BaseAnimationConfig"; +import {StyleProp, ViewStyle} from "react-native"; /** * Append the React.ComponentClass for each class extending from BaseAnimationWrapper @@ -23,6 +24,7 @@ type AnimationWrapperProps = { animationConfig: BaseAnimationConfig; onAnimationFinish?: (animationConfig?: BaseAnimationConfig) => void; onAnimationStart?: (animationConfig?: BaseAnimationConfig) => void; + animationWrapperStyles?: StyleProp; } type SlideAnimationProps = AnimationWrapperProps; diff --git a/src/core/components/AnimationWrapperView.tsx b/src/core/components/AnimationWrapperView.tsx index 2a1faf9..348e6d7 100644 --- a/src/core/components/AnimationWrapperView.tsx +++ b/src/core/components/AnimationWrapperView.tsx @@ -35,14 +35,15 @@ export default class AnimationWrapperView extends React.Component + onAnimationStart={onAnimationStart} + animationWrapperStyles={animationWrapperStyles}> {children} ); diff --git a/src/core/components/wrapper/BaseAnimationWrapper.tsx b/src/core/components/wrapper/BaseAnimationWrapper.tsx index 32ac992..bfa2402 100644 --- a/src/core/components/wrapper/BaseAnimationWrapper.tsx +++ b/src/core/components/wrapper/BaseAnimationWrapper.tsx @@ -31,13 +31,13 @@ export abstract class BaseAnimationWrapper

exte const content = this.props.children; if (this.props.animationConfig?.triggerType === AnimationTriggerType.ON_CLICK) { return ( - + {this.renderAnimation(content)} ); } else { return ( - + {this.renderAnimation(content)} ) diff --git a/src/core/components/wrapper/JsonAnimationWrapper.tsx b/src/core/components/wrapper/JsonAnimationWrapper.tsx index 80eeb2a..fa0aed3 100644 --- a/src/core/components/wrapper/JsonAnimationWrapper.tsx +++ b/src/core/components/wrapper/JsonAnimationWrapper.tsx @@ -45,7 +45,7 @@ export class JsonAnimationWrapper extends BaseAnimationWrapper + {content} ); From 55f98fd3671e7c3ec3c83e9574fc482a9920bb72 Mon Sep 17 00:00:00 2001 From: Anand Parshuramka Date: Wed, 3 Aug 2022 12:56:22 +0530 Subject: [PATCH 2/3] Add styling to JSON animation --- package.json | 2 +- src/core/Types.ts | 2 +- src/core/components/AnimationWrapperView.tsx | 2 +- src/core/components/wrapper/JsonAnimationWrapper.tsx | 1 + 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 203ae4f..a8480fd 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "animation-wrapper-view", "description": "Create declarative animations for React Native", - "version": "1.1.2", + "version": "1.1.3", "repository": { "type": "git", "url": "git+https://github.com/flipkart-incubator/animation-wrapper-view.git" diff --git a/src/core/Types.ts b/src/core/Types.ts index ac0cb9c..aae0fed 100644 --- a/src/core/Types.ts +++ b/src/core/Types.ts @@ -6,7 +6,7 @@ import { RippleAnimationProps } from "./components/wrapper/RippleAnimationWrappe import { ScaleAnimationProps } from "./components/wrapper/ScaleAnimationWrapper"; import { WiggleAnimationProps } from "./components/wrapper/WiggleAnimationWrapper"; import BaseAnimationConfig from "./data/BaseAnimationConfig"; -import {StyleProp, ViewStyle} from "react-native"; +import { StyleProp, ViewStyle } from "react-native"; /** * Append the React.ComponentClass for each class extending from BaseAnimationWrapper diff --git a/src/core/components/AnimationWrapperView.tsx b/src/core/components/AnimationWrapperView.tsx index 348e6d7..422774f 100644 --- a/src/core/components/AnimationWrapperView.tsx +++ b/src/core/components/AnimationWrapperView.tsx @@ -35,7 +35,7 @@ export default class AnimationWrapperView extends React.Component Date: Wed, 3 Aug 2022 18:17:55 +0530 Subject: [PATCH 3/3] Add styling to JSON animation --- README.MD | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/README.MD b/README.MD index 89c35e9..596685e 100644 --- a/README.MD +++ b/README.MD @@ -64,11 +64,12 @@ private _onPressToReset = (_: GestureResponderEvent) => { ``` ### AnimationWrapperView props -| Prop name | Prop Type | Description | -| --- | --- | --- | +| Prop name | Prop Type | Description | +| --- | --- |--------------------------------------------------------------------------------------------------------------------------------------------------------| | animationConfig | BaseAnimation | Object which will contain all optional and non-optional parameters needed to render the animation, including AnimationType, AnimationTriggerType, etc. | -| onAnimationFinish | () => void | (optional) Callback function, if provided will be invoked once animation is finished. | -| onAnimationStart | () => void | (optional) Callback function, if provided will be invoked when the animation is triggered. | +| onAnimationFinish | () => void | (optional) Callback function, if provided will be invoked once animation is finished. | +| onAnimationStart | () => void | (optional) Callback function, if provided will be invoked when the animation is triggered. | +| animationWrapperStyles | StyleProp | (optional) Styling, if provided will be applied to the root element. | ## Types of supported Animations