Add styling to JSON animation

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<ViewStyle> | (optional) Styling, if provided will be applied to the root element.                                                                                   |
 
 
 ## Types of supported Animations

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"

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,7 @@ type AnimationWrapperProps = {
     animationConfig: BaseAnimationConfig;
     onAnimationFinish?: (animationConfig?: BaseAnimationConfig) => void;
     onAnimationStart?: (animationConfig?: BaseAnimationConfig) => void;
+    animationWrapperStyles?: StyleProp<ViewStyle>;
 }
 
 type SlideAnimationProps = AnimationWrapperProps;

src/core/components/AnimationWrapperView.tsx

@@ -35,14 +35,15 @@ 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 } = this.props;
         if (this._animationComponentClass && children) {
             return (
                 <this._animationComponentClass
                     ref={this._setRef}
                     animationConfig={animationConfig as any}
                     onAnimationFinish={onAnimationFinish}
-                    onAnimationStart={onAnimationStart}>
+                    onAnimationStart={onAnimationStart}
+                    animationWrapperStyles={animationWrapperStyles}>
                     {children}
                 </this._animationComponentClass>
             );

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?.animationWrapperStyles}>
                     {this.renderAnimation(content)}
                 </TouchableWithoutFeedback>
             );
         } else {
             return (
-                <View>
+                <View style={this.props?.animationWrapperStyles}>
                     {this.renderAnimation(content)}
                 </View>
             )

src/core/components/wrapper/JsonAnimationWrapper.tsx

@@ -41,11 +41,12 @@ export class JsonAnimationWrapper extends BaseAnimationWrapper<JsonAnimationProp
         }
     }
 
+    //For now, we are only adding the stying passed as a prop for JsonAnimationWrapper.
     protected renderAnimation(content: React.ReactNode): React.ReactNode {
         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>
         );