Merge pull request #5 from dimaportenko/issues-2

fix: issue-2 and add tests

Author: dimaportenko

example/src/App.tsx

@@ -119,7 +119,6 @@ const styles = StyleSheet.create({
     shadowRadius: 4.65,
   },
   shadow6: {
-    shadowColor: '#000',
     shadowOffset: {
       width: 2,
       height: 4,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimaportenko/react-native-shadow-view",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "React Native library with Android native view which supports same shadows styles as iOS ",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/__tests__/index.test.tsx

@@ -1 +1,88 @@
-it.todo('write a test');
+import { getShadowPropsFromStyle } from '../';
+
+describe('getShadowPropsFromStyle function test', () => {
+  const emptyProps = {
+    shadowColor: undefined,
+    shadowOffset: undefined,
+    shadowOpacity: undefined,
+    shadowRadius: undefined,
+  };
+  const pinkColorInDecemal = 4294951115;
+  const blackColorInDecemal = 4278190080;
+
+  test('empty styles return empty object', () => {
+    const result = getShadowPropsFromStyle({});
+    expect(result).toStrictEqual(emptyProps);
+  });
+
+  test('non shadow properties returns empty object', () => {
+    const result = getShadowPropsFromStyle({
+      width: 100,
+      backgroundColor: 'blue',
+    });
+    expect(result).toStrictEqual(emptyProps);
+  });
+
+  test('shadow styles return shadow properties', () => {
+    const result = getShadowPropsFromStyle({
+      shadowColor: 'pink',
+      shadowOffset: {
+        width: -4,
+        height: 4,
+      },
+      shadowOpacity: 1,
+      shadowRadius: 4.65,
+    });
+    expect(result).toStrictEqual({
+      shadowColor: pinkColorInDecemal,
+      shadowOffset: {
+        width: -4,
+        height: 4,
+      },
+      shadowOpacity: 1,
+      shadowRadius: 4.65,
+    });
+  });
+
+  test('return black shadow property if not set but shadowOffset is presented', () => {
+    const result = getShadowPropsFromStyle({
+      shadowOffset: {
+        width: -4,
+        height: 4,
+      },
+    });
+    expect(result).toStrictEqual({
+      shadowColor: blackColorInDecemal,
+      shadowOffset: {
+        width: -4,
+        height: 4,
+      },
+      shadowOpacity: undefined,
+      shadowRadius: undefined,
+    });
+  });
+
+  test('return black shadow property if not set but shadowOffset is presented', () => {
+    const result = getShadowPropsFromStyle({
+      shadowOpacity: 1,
+    });
+    expect(result).toStrictEqual({
+      shadowColor: blackColorInDecemal,
+      shadowOffset: undefined,
+      shadowOpacity: 1,
+      shadowRadius: undefined,
+    });
+  });
+
+  test('return black shadow property if not set but shadowRadius is presented', () => {
+    const result = getShadowPropsFromStyle({
+      shadowRadius: 4,
+    });
+    expect(result).toStrictEqual({
+      shadowColor: blackColorInDecemal,
+      shadowOffset: undefined,
+      shadowOpacity: undefined,
+      shadowRadius: 4,
+    });
+  });
+});

src/index.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   ViewProps,
   View,
+  ViewStyle,
 } from 'react-native';
 import ShadowComponent from './nativeComponent';
 
@@ -30,6 +31,24 @@ export type ShadowProps =
 
 type Props = ViewProps;
 
+export const getShadowPropsFromStyle = (flattenStyles: ViewStyle) => {
+  if (
+    (flattenStyles.shadowOffset ||
+      flattenStyles.shadowOpacity ||
+      flattenStyles.shadowRadius) &&
+    !flattenStyles.shadowColor
+  ) {
+    flattenStyles.shadowColor = '#000000';
+  }
+  const shadowStyle: ShadowProps = {
+    shadowColor: processColor(flattenStyles.shadowColor),
+    shadowOffset: flattenStyles.shadowOffset,
+    shadowOpacity: flattenStyles.shadowOpacity,
+    shadowRadius: flattenStyles.shadowRadius,
+  };
+  return shadowStyle;
+};
+
 export const ShadowView: FC<Props> = ({ children, style, ...otherProps }) => {
   if (Platform.OS !== 'android') {
     return (
@@ -38,13 +57,8 @@ export const ShadowView: FC<Props> = ({ children, style, ...otherProps }) => {
       </View>
     );
   }
-  const flattenStyles = StyleSheet.flatten(style);
-  const shadowStyle: ShadowProps = {
-    shadowColor: processColor(flattenStyles.shadowColor),
-    shadowOffset: flattenStyles.shadowOffset,
-    shadowOpacity: flattenStyles.shadowOpacity,
-    shadowRadius: flattenStyles.shadowRadius,
-  };
+  const flattenStyles = StyleSheet.flatten(style ?? {});
+  const shadowStyle: ShadowProps = getShadowPropsFromStyle(flattenStyles);
 
   if (
     flattenStyles.borderRadius ||