Merge pull request #7 from samagragupta/master

Adding style to base animation and json animation
flipkart-incubator · Feb 5, 2023 · 27b26aa · 27b26aa
2 parents 0517556 + 34ab149
commit 27b26aa
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/README.MD b/README.MD
@@ -64,11 +64,13 @@ 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<ViewStyle> | (optional) Styling, if provided will be applied to the JSON animation element.                                                                                   |
+| baseAnimationStyles | StyleProp<ViewStyle> | (optional) Styling, if provided will be applied to the root element.                                                                                   |
 
 
 ## Types of supported Animations

diff --git 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<T extends AnimationProps> for each class extending from BaseAnimationWrapper
@@ -23,6 +24,8 @@ type AnimationWrapperProps = {
     animationConfig: BaseAnimationConfig;
     onAnimationFinish?: (animationConfig?: BaseAnimationConfig) => void;
     onAnimationStart?: (animationConfig?: BaseAnimationConfig) => void;
+    animationWrapperStyles?: StyleProp<ViewStyle>;
+    baseAnimationStyles?: StyleProp<ViewStyle>;
 }
 
 type SlideAnimationProps = AnimationWrapperProps;

diff --git a/src/core/components/AnimationWrapperView.tsx b/src/core/components/AnimationWrapperView.tsx
@@ -35,14 +35,16 @@ export default class AnimationWrapperView extends React.Component<AnimationWrapp
 
     public render(): React.ReactNode | undefined {
         this._assertChildType();
-        const { animationConfig, children, onAnimationFinish, onAnimationStart } = this.props;
+        const { animationConfig, children, onAnimationFinish, onAnimationStart, animationWrapperStyles, baseAnimationStyles } = this.props;
         if (this._animationComponentClass && children) {
             return (
                 <this._animationComponentClass
                     ref={this._setRef}
                     animationConfig={animationConfig as any}
                     onAnimationFinish={onAnimationFinish}
-                    onAnimationStart={onAnimationStart}>
+                    onAnimationStart={onAnimationStart}
+                    animationWrapperStyles={animationWrapperStyles}
+                    baseAnimationStyles={baseAnimationStyles}>
                     {children}
                 </this._animationComponentClass>
             );

diff --git a/src/core/components/wrapper/BaseAnimationWrapper.tsx b/src/core/components/wrapper/BaseAnimationWrapper.tsx
@@ -31,13 +31,13 @@ export abstract class BaseAnimationWrapper<P extends AnimationWrapperProps> exte
         const content = this.props.children;
         if (this.props.animationConfig?.triggerType === AnimationTriggerType.ON_CLICK) {
             return (
-                <TouchableWithoutFeedback onPress={this._onPress}>
+                <TouchableWithoutFeedback onPress={this._onPress} style={this.props?.baseAnimationStyles}>
                     {this.renderAnimation(content)}
                 </TouchableWithoutFeedback>
             );
         } else {
             return (
-                <View>
+                <View style={this.props?.baseAnimationStyles}>
                     {this.renderAnimation(content)}
                 </View>
             )

diff --git a/src/core/components/wrapper/JsonAnimationWrapper.tsx b/src/core/components/wrapper/JsonAnimationWrapper.tsx
@@ -45,7 +45,7 @@ export class JsonAnimationWrapper extends BaseAnimationWrapper<JsonAnimationProp
         const transformArray = this._getTransformArray();
         const animations: ViewStyle[] = this._getViewStyleAnimationArray();
         return (
-            <Animated.View style={[{ transform: transformArray }, animations]}>
+            <Animated.View style={[{ transform: transformArray }, animations, this.props?.animationWrapperStyles]}>
                 {content}
             </Animated.View>
         );