@sdcx/bottom-sheet 0.1.0

package/ios/BottomSheet.xcodeproj/project.pbxproj

@@ -0,0 +1,283 @@
+// !$*UTF8*$!
+{
+  archiveVersion = 1;
+  classes = {
+  };
+  objectVersion = 48;
+  objects = {
+
+/* Begin PBXBuildFile section */
+    91C884A6202C3E8600EC0A20 /* undefined.m in Sources */ = {isa = PBXBuildFile; fileRef = 91C884A1202C3E8600EC0A20 /* undefined.m */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXCopyFilesBuildPhase section */
+    910362D01FE9318600F4DA8E /* CopyFiles */ = {
+      isa = PBXCopyFilesBuildPhase;
+      buildActionMask = 2147483647;
+      dstPath = "include/$(PRODUCT_NAME)";
+      dstSubfolderSpec = 16;
+      files = (
+      );
+      runOnlyForDeploymentPostprocessing = 0;
+    };
+/* End PBXCopyFilesBuildPhase section */
+
+/* Begin PBXFileReference section */
+    910362D21FE9318600F4DA8E /* libBottomSheet.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libBottomSheet.a; sourceTree = BUILT_PRODUCTS_DIR; };
+    91C884A1202C3E8600EC0A20 /* undefined.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = undefined.m; sourceTree = "<group>"; };
+    91C884A2202C3E8600EC0A20 /* undefined.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = undefined.h; sourceTree = "<group>"; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+    910362CF1FE9318600F4DA8E /* Frameworks */ = {
+      isa = PBXFrameworksBuildPhase;
+      buildActionMask = 2147483647;
+      files = (
+      );
+      runOnlyForDeploymentPostprocessing = 0;
+    };
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+    910362C91FE9318600F4DA8E = {
+      isa = PBXGroup;
+      children = (
+        910362D41FE9318600F4DA8E /* BottomSheet */,
+        910362D31FE9318600F4DA8E /* Products */,
+      );
+      sourceTree = "<group>";
+    };
+    910362D31FE9318600F4DA8E /* Products */ = {
+      isa = PBXGroup;
+      children = (
+        910362D21FE9318600F4DA8E /* libBottomSheet.a */,
+      );
+      name = Products;
+      sourceTree = "<group>";
+    };
+    910362D41FE9318600F4DA8E /* BottomSheet */ = {
+      isa = PBXGroup;
+      children = (
+        91C884A2202C3E8600EC0A20 /* undefined.h */,
+        91C884A1202C3E8600EC0A20 /* undefined.m */,
+      );
+      path = BottomSheet;
+      sourceTree = "<group>";
+    };
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+    910362D11FE9318600F4DA8E /* BottomSheet */ = {
+      isa = PBXNativeTarget;
+      buildConfigurationList = 910362DB1FE9318600F4DA8E /* Build configuration list for PBXNativeTarget "BottomSheet" */;
+      buildPhases = (
+        910362CE1FE9318600F4DA8E /* Sources */,
+        910362CF1FE9318600F4DA8E /* Frameworks */,
+        910362D01FE9318600F4DA8E /* CopyFiles */,
+      );
+      buildRules = (
+      );
+      dependencies = (
+      );
+      name = BottomSheet;
+      productName = BottomSheet;
+      productReference = 910362D21FE9318600F4DA8E /* libBottomSheet.a */;
+      productType = "com.apple.product-type.library.static";
+    };
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+    910362CA1FE9318600F4DA8E /* Project object */ = {
+      isa = PBXProject;
+      attributes = {
+        LastUpgradeCheck = 0920;
+        ORGANIZATIONNAME = Listen;
+        TargetAttributes = {
+          910362D11FE9318600F4DA8E = {
+            CreatedOnToolsVersion = 9.2;
+            ProvisioningStyle = Automatic;
+          };
+        };
+      };
+      buildConfigurationList = 910362CD1FE9318600F4DA8E /* Build configuration list for PBXProject "BottomSheet" */;
+      compatibilityVersion = "Xcode 8.0";
+      developmentRegion = en;
+      hasScannedForEncodings = 0;
+      knownRegions = (
+        en,
+      );
+      mainGroup = 910362C91FE9318600F4DA8E;
+      productRefGroup = 910362D31FE9318600F4DA8E /* Products */;
+      projectDirPath = "";
+      projectRoot = "";
+      targets = (
+        910362D11FE9318600F4DA8E /* BottomSheet */,
+      );
+    };
+/* End PBXProject section */
+
+/* Begin PBXSourcesBuildPhase section */
+    910362CE1FE9318600F4DA8E /* Sources */ = {
+      isa = PBXSourcesBuildPhase;
+      buildActionMask = 2147483647;
+      files = (
+        91C884A6202C3E8600EC0A20 /* undefined.m in Sources */,
+      );
+      runOnlyForDeploymentPostprocessing = 0;
+    };
+/* End PBXSourcesBuildPhase section */
+
+/* Begin XCBuildConfiguration section */
+    910362D91FE9318600F4DA8E /* Debug */ = {
+      isa = XCBuildConfiguration;
+      buildSettings = {
+        ALWAYS_SEARCH_USER_PATHS = NO;
+        CLANG_ANALYZER_NONNULL = YES;
+        CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+        CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+        CLANG_CXX_LIBRARY = "libc++";
+        CLANG_ENABLE_MODULES = YES;
+        CLANG_ENABLE_OBJC_ARC = YES;
+        CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+        CLANG_WARN_BOOL_CONVERSION = YES;
+        CLANG_WARN_COMMA = YES;
+        CLANG_WARN_CONSTANT_CONVERSION = YES;
+        CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+        CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+        CLANG_WARN_EMPTY_BODY = YES;
+        CLANG_WARN_ENUM_CONVERSION = YES;
+        CLANG_WARN_INFINITE_RECURSION = YES;
+        CLANG_WARN_INT_CONVERSION = YES;
+        CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+        CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+        CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+        CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+        CLANG_WARN_STRICT_PROTOTYPES = YES;
+        CLANG_WARN_SUSPICIOUS_MOVE = YES;
+        CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+        CLANG_WARN_UNREACHABLE_CODE = YES;
+        CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+        CODE_SIGN_IDENTITY = "iPhone Developer";
+        COPY_PHASE_STRIP = NO;
+        DEBUG_INFORMATION_FORMAT = dwarf;
+        ENABLE_STRICT_OBJC_MSGSEND = YES;
+        ENABLE_TESTABILITY = YES;
+        GCC_C_LANGUAGE_STANDARD = gnu11;
+        GCC_DYNAMIC_NO_PIC = NO;
+        GCC_NO_COMMON_BLOCKS = YES;
+        GCC_OPTIMIZATION_LEVEL = 0;
+        GCC_PREPROCESSOR_DEFINITIONS = (
+          "DEBUG=1",
+          "$(inherited)",
+        );
+        GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+        GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+        GCC_WARN_UNDECLARED_SELECTOR = YES;
+        GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+        GCC_WARN_UNUSED_FUNCTION = YES;
+        GCC_WARN_UNUSED_VARIABLE = YES;
+        IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+        MTL_ENABLE_DEBUG_INFO = YES;
+        ONLY_ACTIVE_ARCH = YES;
+        SDKROOT = iphoneos;
+      };
+      name = Debug;
+    };
+    910362DA1FE9318600F4DA8E /* Release */ = {
+      isa = XCBuildConfiguration;
+      buildSettings = {
+        ALWAYS_SEARCH_USER_PATHS = NO;
+        CLANG_ANALYZER_NONNULL = YES;
+        CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+        CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+        CLANG_CXX_LIBRARY = "libc++";
+        CLANG_ENABLE_MODULES = YES;
+        CLANG_ENABLE_OBJC_ARC = YES;
+        CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+        CLANG_WARN_BOOL_CONVERSION = YES;
+        CLANG_WARN_COMMA = YES;
+        CLANG_WARN_CONSTANT_CONVERSION = YES;
+        CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+        CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+        CLANG_WARN_EMPTY_BODY = YES;
+        CLANG_WARN_ENUM_CONVERSION = YES;
+        CLANG_WARN_INFINITE_RECURSION = YES;
+        CLANG_WARN_INT_CONVERSION = YES;
+        CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+        CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+        CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+        CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+        CLANG_WARN_STRICT_PROTOTYPES = YES;
+        CLANG_WARN_SUSPICIOUS_MOVE = YES;
+        CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+        CLANG_WARN_UNREACHABLE_CODE = YES;
+        CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+        CODE_SIGN_IDENTITY = "iPhone Developer";
+        COPY_PHASE_STRIP = NO;
+        DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+        ENABLE_NS_ASSERTIONS = NO;
+        ENABLE_STRICT_OBJC_MSGSEND = YES;
+        GCC_C_LANGUAGE_STANDARD = gnu11;
+        GCC_NO_COMMON_BLOCKS = YES;
+        GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+        GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+        GCC_WARN_UNDECLARED_SELECTOR = YES;
+        GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+        GCC_WARN_UNUSED_FUNCTION = YES;
+        GCC_WARN_UNUSED_VARIABLE = YES;
+        IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+        MTL_ENABLE_DEBUG_INFO = NO;
+        SDKROOT = iphoneos;
+        VALIDATE_PRODUCT = YES;
+      };
+      name = Release;
+    };
+    910362DC1FE9318600F4DA8E /* Debug */ = {
+      isa = XCBuildConfiguration;
+      buildSettings = {
+        CODE_SIGN_STYLE = Automatic;
+        DEVELOPMENT_TEAM = 9H9696K6NL;
+        OTHER_LDFLAGS = "-ObjC";
+        PRODUCT_NAME = "$(TARGET_NAME)";
+        SKIP_INSTALL = YES;
+        TARGETED_DEVICE_FAMILY = "1,2";
+      };
+      name = Debug;
+    };
+    910362DD1FE9318600F4DA8E /* Release */ = {
+      isa = XCBuildConfiguration;
+      buildSettings = {
+        CODE_SIGN_STYLE = Automatic;
+        DEVELOPMENT_TEAM = 9H9696K6NL;
+        OTHER_LDFLAGS = "-ObjC";
+        PRODUCT_NAME = "$(TARGET_NAME)";
+        SKIP_INSTALL = YES;
+        TARGETED_DEVICE_FAMILY = "1,2";
+      };
+      name = Release;
+    };
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+    910362CD1FE9318600F4DA8E /* Build configuration list for PBXProject "BottomSheet" */ = {
+      isa = XCConfigurationList;
+      buildConfigurations = (
+        910362D91FE9318600F4DA8E /* Debug */,
+        910362DA1FE9318600F4DA8E /* Release */,
+      );
+      defaultConfigurationIsVisible = 0;
+      defaultConfigurationName = Release;
+    };
+    910362DB1FE9318600F4DA8E /* Build configuration list for PBXNativeTarget "BottomSheet" */ = {
+      isa = XCConfigurationList;
+      buildConfigurations = (
+        910362DC1FE9318600F4DA8E /* Debug */,
+        910362DD1FE9318600F4DA8E /* Release */,
+      );
+      defaultConfigurationIsVisible = 0;
+      defaultConfigurationName = Release;
+    };
+/* End XCConfigurationList section */
+  };
+  rootObject = 910362CA1FE9318600F4DA8E /* Project object */;
+}    

package/lib/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { NativeSyntheticEvent, ViewProps } from 'react-native';
+export interface OffsetChangedEventData {
+    offset: number;
+    expandedOffset: number;
+    collapsedOffset: number;
+}
+export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden';
+export interface StateChangedEventData {
+    state: BottomSheetState;
+}
+interface NativeBottomSheetProps extends ViewProps {
+    onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
+    onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
+    peekHeight?: number;
+    state?: BottomSheetState;
+}
+declare const BottomSheet: React.ForwardRefExoticComponent<NativeBottomSheetProps & {
+    fitToContents?: boolean | undefined;
+} & React.RefAttributes<React.Component<NativeBottomSheetProps, {}, any> & Readonly<import("react-native").NativeMethods>>>;
+export default BottomSheet;

package/lib/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Platform, requireNativeComponent, StyleSheet, View } from 'react-native';
+import splitLayoutProps from './splitLayoutProps';
+const NativeBottomSheet = requireNativeComponent('BottomSheet');
+const BottomSheet = React.forwardRef((props, ref) => {
+    const { style, children, peekHeight = 200, state = 'collapsed', fitToContents, ...rest } = props;
+    const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style));
+    if (Platform.OS === 'android') {
+        return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} state={state} {...rest} ref={ref}>
+        <View style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner]} collapsable={false}>
+          {children}
+        </View>
+      </NativeBottomSheet>);
+    }
+    else {
+        return (<View style={[StyleSheet.absoluteFill, outer]} pointerEvents="box-none">
+        <NativeBottomSheet style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner]} peekHeight={peekHeight} state={state} {...rest} ref={ref}>
+          {children}
+        </NativeBottomSheet>
+      </View>);
+    }
+});
+const styles = StyleSheet.create({
+    fitToContents: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+});
+export default BottomSheet;

package/lib/splitLayoutProps.d.ts

@@ -0,0 +1,15 @@
+import { ViewStyle } from 'react-native';
+export default function splitLayoutProps(props?: ViewStyle): {
+    outer: {
+        [key: string]: string | number | import("react-native").OpaqueColorValue | {
+            width: number;
+            height: number;
+        } | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | number[] | undefined;
+    };
+    inner: {
+        [key: string]: string | number | import("react-native").OpaqueColorValue | {
+            width: number;
+            height: number;
+        } | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | number[] | undefined;
+    };
+};

package/lib/splitLayoutProps.js

@@ -0,0 +1,41 @@
+export default function splitLayoutProps(props) {
+    let outer = {};
+    let inner = {};
+    if (props != null) {
+        for (const prop of Object.keys(props)) {
+            switch (prop) {
+                case 'margin':
+                case 'marginHorizontal':
+                case 'marginVertical':
+                case 'marginBottom':
+                case 'marginTop':
+                case 'marginLeft':
+                case 'marginRight':
+                case 'flex':
+                case 'flexGrow':
+                case 'flexShrink':
+                case 'flexBasis':
+                case 'alignSelf':
+                case 'height':
+                case 'minHeight':
+                case 'maxHeight':
+                case 'width':
+                case 'minWidth':
+                case 'maxWidth':
+                case 'position':
+                case 'left':
+                case 'right':
+                case 'bottom':
+                case 'top':
+                case 'transform':
+                case 'zIndex':
+                    outer[prop] = props[prop];
+                    break;
+                default:
+                    inner[prop] = props[prop];
+                    break;
+            }
+        }
+    }
+    return { outer, inner };
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@sdcx/bottom-sheet",
+  "description": "A react-native bottom sheet component",
+  "version": "0.1.0",
+  "main": "./lib/index.js",
+  "typings": "./lib/index.d.ts",
+  "react-native": "src/index",
+  "nativePackage": true,
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "RNBottomSheet.podspec",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__"
+  ],
+  "repository": "https://github.com/sdcxtech/react-native-troika",
+  "homepage": "https://github.com/sdcxtech/react-native-troika#readme",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "bottom-sheet"
+  ],
+  "scripts": {
+    "build": "rm -rf ./lib && tsc -p tsconfig.build.json",
+    "prepare": "npm run build",
+    "tsc": "tsc",
+    "test": "jest",
+    "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-native": ">=0.60"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/runtime": "^7.13.10",
+    "@react-native-community/eslint-config": "^3.0.0",
+    "@types/jest": "^26.0.21",
+    "@types/react": "^17.0.2",
+    "@types/react-native": "^0.67.0",
+    "@types/react-test-renderer": "17.0.2",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.66.2",
+    "react": "17.0.2",
+    "react-native": "^0.67.4",
+    "react-test-renderer": "17.0.2",
+    "eslint": "^7.32.0",
+    "typescript": "^4.6.4"
+  },
+  "jest": {
+    "preset": "react-native",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ]
+  }
+}

package/src/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { NativeSyntheticEvent, Platform, requireNativeComponent, StyleSheet, View, ViewProps } from 'react-native'
+import splitLayoutProps from './splitLayoutProps'
+
+export interface OffsetChangedEventData {
+  offset: number
+  expandedOffset: number
+  collapsedOffset: number
+}
+
+export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden'
+
+export interface StateChangedEventData {
+  state: BottomSheetState
+}
+
+interface NativeBottomSheetProps extends ViewProps {
+  onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void
+  onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void
+  peekHeight?: number
+  state?: BottomSheetState
+}
+
+type BottomSheetProps = NativeBottomSheetProps & {
+  fitToContents?: boolean
+}
+
+const NativeBottomSheet = requireNativeComponent<NativeBottomSheetProps>('BottomSheet')
+
+type NativeBottomSheetInstance = InstanceType<typeof NativeBottomSheet>
+
+const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps>((props, ref) => {
+  const { style, children, peekHeight = 200, state = 'collapsed', fitToContents, ...rest } = props
+  const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style))
+
+  if (Platform.OS === 'android') {
+    return (
+      <NativeBottomSheet
+        style={[StyleSheet.absoluteFill, outer]}
+        peekHeight={peekHeight}
+        state={state}
+        {...rest}
+        ref={ref}>
+        <View style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner]} collapsable={false}>
+          {children}
+        </View>
+      </NativeBottomSheet>
+    )
+  } else {
+    return (
+      <View style={[StyleSheet.absoluteFill, outer]} pointerEvents="box-none">
+        <NativeBottomSheet
+          style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner]}
+          peekHeight={peekHeight}
+          state={state}
+          {...rest}
+          ref={ref}>
+          {children}
+        </NativeBottomSheet>
+      </View>
+    )
+  }
+})
+
+const styles = StyleSheet.create({
+  fitToContents: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+})
+
+export default BottomSheet

package/src/splitLayoutProps.ts

@@ -0,0 +1,47 @@
+import { ViewStyle } from 'react-native'
+
+type StyleKey = keyof ViewStyle
+
+export default function splitLayoutProps(props?: ViewStyle) {
+  let outer: { [key: string]: ViewStyle[StyleKey] } = {}
+  let inner: { [key: string]: ViewStyle[StyleKey] } = {}
+
+  if (props != null) {
+    for (const prop of Object.keys(props) as StyleKey[]) {
+      switch (prop) {
+        case 'margin':
+        case 'marginHorizontal':
+        case 'marginVertical':
+        case 'marginBottom':
+        case 'marginTop':
+        case 'marginLeft':
+        case 'marginRight':
+        case 'flex':
+        case 'flexGrow':
+        case 'flexShrink':
+        case 'flexBasis':
+        case 'alignSelf':
+        case 'height':
+        case 'minHeight':
+        case 'maxHeight':
+        case 'width':
+        case 'minWidth':
+        case 'maxWidth':
+        case 'position':
+        case 'left':
+        case 'right':
+        case 'bottom':
+        case 'top':
+        case 'transform':
+        case 'zIndex':
+          outer[prop] = props[prop]
+          break
+        default:
+          inner[prop] = props[prop]
+          break
+      }
+    }
+  }
+
+  return { outer, inner }
+}