Add skipProps

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.0.26
+
+- Support filtering props from being included in styles, when using additional props as style overrides, through `skipProps` prop.
+
 # 0.0.25
 
 - **Breaking**: Drop simple gestures recognition. Use a tool like `react-native-gesture-handler` instead.

README.md

@@ -76,6 +76,7 @@ type Behavior = {
   clamp?: bool, // default = false, prevent animations from exceeding their ranges
   keys?: number[], // can be used with custom drivers to define custom state keys/indices
   initialState?: number, // default = 0
+  skipProps?: string[], // default = []
   style?: object, // style of the behavior view, default = {}, AnimatedViewStyle (see React Native docs)
   unmounted?: bool, // default = false, start behavior in the unmounted state
   // animation presets (they populate `state` prop which will be ignored):

package.json

@@ -2,7 +2,7 @@
   "license": "MIT",
   "name": "haraka",
   "description": "Stateful animations in React Native.",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "main": "lib/index.js",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "eslint-plugin-import": "2.13.0",
     "eslint-plugin-jsx-a11y": "6.1.1",
     "eslint-plugin-react": "7.10.0",
-    "rollup": "0.63.4",
+    "rollup": "0.63.5",
     "rollup-plugin-babel": "3.0.7"
   },
   "scripts": {

src/behavior.js

@@ -7,6 +7,7 @@ export default class Behavior extends React.PureComponent {
     clamp: false,
     config: { type: 'spring' },
     initialState: 0,
+    skipProps: [],
     state: [{}, {}],
     style: {},
     unmounted: false
@@ -116,6 +117,7 @@ export default class Behavior extends React.PureComponent {
       landing,
       nativeDriver,
       pointerEvents,
+      skipProps,
       state: _state,
       style,
       unmounted,
@@ -126,15 +128,6 @@ export default class Behavior extends React.PureComponent {
 
     if (faded) state = this.presets.faded;
 
-    const viewStyles = {
-      ...this.layoutPresets[absolute && 'absolute'],
-      ...this.layoutPresets[centered && 'centered'],
-      ...this.layoutPresets[fixed && 'fixed'],
-      ...this.layoutPresets[full && 'full'],
-      ...this.layoutPresets[landing && 'landing'],
-      ...rest
-    };
-
     const inputRange =
       keys ||
       Array(state.length)
@@ -187,6 +180,20 @@ export default class Behavior extends React.PureComponent {
     const height = addProp('height', null);
     const width = addProp('width', null);
 
+    const viewStyles = {
+      ...this.layoutPresets[absolute && 'absolute'],
+      ...this.layoutPresets[centered && 'centered'],
+      ...this.layoutPresets[fixed && 'fixed'],
+      ...this.layoutPresets[full && 'full'],
+      ...this.layoutPresets[landing && 'landing']
+    };
+
+    const propStyles = Object.keys(rest).reduce((obj, key) => {
+      if (skipProps.includes(key)) return obj;
+
+      return { ...obj, [key]: rest[key] };
+    }, {});
+
     const nativeStyles = {
       opacity,
       transform: [{ rotate }, { scale }, { translateX }, { translateY }]
@@ -196,7 +203,7 @@ export default class Behavior extends React.PureComponent {
 
     return (
       <Animated.View
-        style={[style, viewStyles, nativeStyles]}
+        style={[style, viewStyles, propStyles, nativeStyles]}
         {...{ pointerEvents }}>
         <Animated.View style={styles}>{children}</Animated.View>
       </Animated.View>