Add more directional faded presets

CHANGELOG.md

@@ -1,5 +1,6 @@
 # 0.0.35
 
+- Add `fadedDown`, `fadedLeft`, `fadedRight` and `fadedUp` presets.
 - Add `disabled` prop, which allows disabling the behavior interactivity through `pointerEvents = none`.
 - **Breaking**: Drop `onStart`, has been broken for a while.
 - Allow passing state specific config.

README.md

@@ -81,7 +81,7 @@ type StyleProp = {
 type Behavior = {
   config?: DefaultConfig,
   clearStyleProps?: bool, // removes all default style props on mount and utilizes whatever in `styleProps` only
-  disabled?: bool, // allow disabling the behavior interactivity through pointerEvents = none
+  disabled?: bool, // allows disabling the behavior interactivity through pointerEvents = none
   state?: State[], // default value is [{}, {}], [{}] can be used for a static behavior
   nativeDriver?: AnimatedValue, // default = new Animated.Value(0), you can use a custom native driver
   driver?: AnimatedValue, // default = new Animated.Value(0), you can use a custom driver
@@ -99,6 +99,10 @@ type Behavior = {
   unmounted?: bool, // default = false, start behavior in the unmounted state
   // animation presets (they populate `state` prop which will be ignored):
   faded?: bool, // default = false, see below for available presets
+  fadedDown?: bool,
+  fadedLeft?: bool,
+  fadedRight?: bool,
+  fadedUp?: bool,
   // layout presets (they populate `style` prop):
   absolute?: bool, // default = false, see below for available presets
   centered?: bool, // default = false
@@ -109,7 +113,11 @@ type Behavior = {
 
 // animation presets
 const presets = {
-  faded: [{ opacity: 0 }, { opacity: 1 }]
+  faded: [{ opacity: 0 }, { opacity: 1 }],
+  fadedDown: [{ opacity: 0, translateY: 20 }, { opacity: 1, translateY: 0 }],
+  fadedLeft: [{ opacity: 0, translateX: -20 }, { opacity: 1, translateX: 0 }],
+  fadedRight: [{ opacity: 0, translateX: 20 }, { opacity: 1, translateX: 0 }],
+  fadedUp: [{ opacity: 0, translateY: -20 }, { opacity: 1, translateY: 0 }],
 }
 
 // layout presets, you can use multiple, along with `style` prop, they have a higher priority over it

src/behavior.js

@@ -180,6 +180,10 @@ export default class Behavior extends React.PureComponent {
       disabled,
       driver,
       faded,
+      fadedDown,
+      fadedLeft,
+      fadedRight,
+      fadedUp,
       fixed,
       full,
       initialState,
@@ -200,11 +204,17 @@ export default class Behavior extends React.PureComponent {
 
     const presets = {
       faded: [{ opacity: 0 }, { opacity: 1 }],
+      fadedDown: [{ opacity: 0, translateY: 20 }, { opacity: 1, translateY: 0 }],
+      fadedLeft: [{ opacity: 0, translateX: -20 }, { opacity: 1, translateX: 0 }],
+      fadedRight: [{ opacity: 0, translateX: 20 }, { opacity: 1, translateX: 0 }],
+      fadedUp: [{ opacity: 0, translateY: -20 }, { opacity: 1, translateY: 0 }],
     }
 
-    if (faded) {
-      state = presets.faded
-    }
+    if (faded) state = presets.faded
+    if (fadedDown) state = presets.fadedDown
+    if (fadedLeft) state = presets.fadedLeft
+    if (fadedRight) state = presets.fadedRight
+    if (fadedUp) state = presets.fadedUp
 
     const layoutPresets = {
       absolute: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 },