chore: cleanup

example/metro.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
+const blacklist = require('metro-config/src/defaults/blacklist');
 const escape = require('escape-string-regexp');
 const pak = require('../package.json');
 
@@ -16,7 +16,7 @@ module.exports = {
   // We need to make sure that only one version is loaded for peerDependencies
   // So we blacklist them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: exclusionList(modules.map((m) => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`))),
+    blacklistRE: blacklist(modules.map((m) => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`))),
 
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);

example/src/App.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { LogBox } from 'react-native';
 import { Provider as StyleProvider } from 'skyle';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
@@ -11,7 +12,6 @@ import FormExampleScreen from './screens/FormExampleScreen';
 import TouchableExampleScreen from './screens/TouchableExampleScreen';
 import ThemeExampleScreen from './screens/ThemeExampleScreen';
 import ShadowsExampleScreen from './screens/ShadowsExampleScreen';
-import { LogBox } from 'react-native';
 import BackgroundsExampleScreen from './screens/BackgroundsExampleScreen';
 
 LogBox.ignoreAllLogs();

example/src/screens/FormExampleScreen.tsx

@@ -66,8 +66,8 @@ const styles = StyleSheet.create((o) => ({
     margin: [50, 0],
     width: 120,
     height: 120,
-    borderRadius: 100,
-    boxShadow: '0px 0px 20px #999',
+    overflow: 'visible',
+    boxShadow: '0px 0px 10px #aaa',
   },
   input: {
     backgroundColor: '#e9e9e9',

example/src/screens/ShadowsExampleScreen.tsx

@@ -55,7 +55,7 @@ const styles = StyleSheet.create(() => ({
     alignSelf: 'center',
     margin: [100, 0],
     backgroundColor: 'white',
-    boxShadow: '0px 0px 15px gray',
+    boxShadow: '1px 1px 15px gray',
     transition: [['width', 'boxShadow', 'borderRadius'], 500],
 
     '&:active': {

package.json

@@ -28,7 +28,7 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepare": "bob build",
     "release": "release-it",
-    "example": "yarn --cwd example",
+    "example": "yarn ./example",
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods"
   },

src/override-native.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import StyleSheet from './StyleSheet';
 import { createComponent } from './Animated';
 import BoxShadow from './components/BoxShadow';
+import { Platform } from 'react-native';
 
 export function overrideNative(nativeComp: any) {
   const NativeComp = Object.assign({}, nativeComp);
@@ -17,7 +18,8 @@ export function overrideNative(nativeComp: any) {
           !k.includes('backgroundImage') &&
           !k.includes('transition') &&
           !k.includes('&') &&
-          !(k.includes('shadow') && !BoxShadow.isNativelySupported()),
+          !(Platform.OS !== 'web' && k.includes('pointerEvents')) &&
+          !(k.includes('shadow') && !k.includes('elevation') && !BoxShadow.isNativelySupported()),
       )
     ) {
       return <NativeComp ref={ref} {...props} />;

src/preprocessors/box-shadow.ts

@@ -4,8 +4,8 @@ import isColor from '../utils/is-color';
 export const boxShadowPreprocessor = (key: string, value: any) => {
   const valuesArr = typeof value === 'string' ? value.split(' ') : Array.isArray(value) ? value : [];
 
-  const width = toLength(valuesArr[0]);
-  const height = toLength(valuesArr[1]);
+  const width = +(toLength(valuesArr[0]) || 0) || 0;
+  const height = +(toLength(valuesArr[1]) || 0) || 0;
 
   if (valuesArr.length) {
     return {

src/preprocessors/numeral.ts

@@ -2,9 +2,9 @@ import { toLength } from '../utils/values';
 
 export const numeralPreprocessor = (key: string, value: any) => {
   if (typeof value === 'string') {
-    const parsedValue = toLength(value);
+    const parsedValue = toLength(value) || '';
 
-    if (!parsedValue) {
+    if (isNaN(+parsedValue)) {
       return null;
     }
 

src/preprocessors/text-shadow.ts

@@ -4,8 +4,8 @@ import isColor from '../utils/is-color';
 export const textShadowPreprocessor = (key: string, value: any) => {
   const valuesArr = typeof value === 'string' ? value.split(' ') : Array.isArray(value) ? value : [];
 
-  const width = toLength(valuesArr[0]);
-  const height = toLength(valuesArr[1]);
+  const width = +(toLength(valuesArr[0]) || 0) || 0;
+  const height = +(toLength(valuesArr[1]) || 0) || 0;
 
   if (valuesArr.length) {
     return {

src/utils/values.ts

@@ -6,7 +6,10 @@ import { functionalNotation } from './functional-notation';
 const RE_LENGTH_UNIT = /(cm|mm|Q|in|pt|pc|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax)?\s*$/;
 const RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?\s*$/;
 
-export function toDecimal(ratio: number | string, defaultRaw = false) {
+export function toDecimal(ratio?: number | string, defaultRaw = false) {
+  if (!ratio) {
+    return ratio;
+  }
   let decimal = +ratio;
 
   if (!isNaN(decimal)) {
@@ -31,7 +34,10 @@ export function toDpi(resolution: number | string, defaultRaw = false) {
   }
 }
 
-export function toPx(length: number | string, defaultRaw = false) {
+export function toPx(length?: number | string, defaultRaw = false) {
+  if (!length) {
+    return length;
+  }
   const value = parseFloat(`${length}`);
   const units = `${length}`.match(RE_LENGTH_UNIT)?.[1];
   const dims = Dimensions.get('window');
@@ -84,9 +90,12 @@ export function isLength(value: string | number) {
   return LENGTH.test(`${value}`) || ZERO.test(`${value}`);
 }
 
-export function toLength(value: string | number): string | number {
+export function toLength(value?: string | number): string | number | undefined {
+  if (!value) {
+    return value;
+  }
   const fnValue = functionalNotation(`${value}`);
-  const parsedValue = toPx(toDecimal(`${fnValue || value}`, true), true);
+  const parsedValue = toPx(toDecimal(fnValue ?? value, true), true);
   const rawValue = (`${parsedValue}`.endsWith('%') ? parsedValue : parseFloat(`${parsedValue}`)) || undefined;
   return rawValue ?? fnValue ?? value;
 }