Added style prop to TranslateYAndOpacity and documentation

src/TranslateY/README.md

@@ -0,0 +1,13 @@
+# TranslateYAndOpacity
+
+## Properties
+
+| Property    | Description | Default |
+| ----------- | ----------- | ------- |
+| `type` | Sets the animation type. | `timing` |
+| `value` | Sets the current Y position. | `null` |
+| `duration` | The number of milliseconds each iteration of the animation takes to complete. | `500` |
+| `delay` | The number of milliseconds to delay the start of the animation. | `0` |
+| `initialValue` | Sets the initial Y position from where the element will start the animation up to the current value. | `null` |
+| `animateOnDidMount` | Start the animation when the component is mounted. | `false` |
+| `useNativeDriver` | Uses the native driver when true. | `false` |

src/TranslateY.js → src/TranslateY/index.js

@@ -5,13 +5,17 @@ import PropTypes from 'prop-types';
 const propTypes = {
   type: PropTypes.string,
   value: PropTypes.number,
+  duration: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
+  delay: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
   initialValue: PropTypes.number,
   startOnDidMount: PropTypes.bool,
   useNativeDriver: PropTypes.bool,
 };
 const defaultProps = {
   type: 'timing',
   value: 0,
+  duration: 500,
+  delay: 0,
   initialValue: null,
   startOnDidMount: false,
   useNativeDriver: true,

src/TranslateYAndOpacity/README.md

@@ -0,0 +1,12 @@
+# TranslateYAndOpacity
+
+## Properties
+
+| Property    | Description | Default |
+| ----------- | ----------- | ------- |
+| `opacityMin` | Sets the minimum opacity. | `0` |
+| `translateYMin` | Sets the initial Y position from where the element will start the animation up to 0. | `-4` |
+| `duration` | The number of milliseconds each iteration of the animation takes to complete. | `500` |
+| `delay` | The number of milliseconds to delay the start of the animation. | `0` |
+| `animateOnDidMount` | Start the animation when the component is mounted. | `false` |
+| `useNativeDriver` | Uses the native driver when true. | `true` |

src/TranslateYAndOpacity.js → src/TranslateYAndOpacity/index.js

@@ -6,17 +6,17 @@ const propTypes = {
   opacityMin: PropTypes.number,
   translateYMin: PropTypes.number,
   duration: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
-  animateOnDidMount: PropTypes.bool,
   delay: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
+  animateOnDidMount: PropTypes.bool,
   useNativeDriver: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
 };
 const defaultProps = {
   opacityMin: 0,
   translateYMin: -4,
   duration: 500,
-  animateOnDidMount: false,
   delay: 0,
-  useNativeDriver: false,
+  animateOnDidMount: false,
+  useNativeDriver: true,
 };
 
 class TranslateYAndOpacity extends PureComponent {
@@ -88,15 +88,17 @@ class TranslateYAndOpacity extends PureComponent {
     });
   }
   render() {
-    const { children } = this.props;
+    const { style, children } = this.props;
     const { opacityValue, translateYValue } = this.state;
 
     const animatedStyle = {
       opacity: opacityValue,
       transform: [{ translateY: translateYValue }],
     };
 
-    return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+    return (
+      <Animated.View style={[style, animatedStyle]}>{children}</Animated.View>
+    );
   }
 }