#New Feature: Shadow. New Props: shadowStyle and shadowColor

README.md

@@ -76,6 +76,8 @@ npm i react-native-easy-state-view
 | buttonTextStyle             | style     | check the source code  | use this to implement your own style for button's text style |
 | buttonTextColor             | color     | "white"                | use this to change button's text color                       |
 | buttonText                  | string    | "Let's Go!"            | use this to set your button's text                           |
+| shadowColor                 | color     | "#000"                 | use this to change button's shadow color                     |
+| shadowStyle                 | style     | _shadowStyle           | use this to set your own shadow style                        |
 
 # Change Log
 

lib/src/components/StateView.js

@@ -3,6 +3,7 @@ import { Image, View, Text } from "react-native";
 import PropTypes from "prop-types";
 import Ripple from "react-native-material-ripple";
 import styles, {
+  _shadowStyle,
   buttonContainer,
   buttonTextContainer
 } from "./styles/StateView.style";
@@ -20,7 +21,9 @@ const StateView = props => {
     titleStyle,
     buttonText,
     rippleColor,
+    shadowStyle,
     buttonColor,
+    shadowColor,
     imageSource,
     enableButton,
     subtitleStyle,
@@ -58,7 +61,10 @@ const StateView = props => {
             onPress={onPress}
             rippleColor={rippleColor || "white"}
             rippleDuration={rippleDuration || 750}
-            style={buttonContainerStyle || buttonContainer(buttonColor)}
+            style={[
+              shadowStyle || _shadowStyle(shadowColor),
+              buttonContainerStyle || buttonContainer(buttonColor)
+            ]}
             rippleContainerBorderRadius={rippleContainerBorderRadius || 16}
           >
             <Text
@@ -95,25 +101,25 @@ StateView.propTypes = {
 };
 
 StateView.defaultProps = {
-  style: styles.container,
   title: "",
-  onPress: () => {},
   subtitle: "",
   isCenter: true,
-  imageStyle: styles.imageStyle,
-  titleStyle: styles.titleStyle,
   buttonText: " ",
+  onPress: () => {},
   rippleColor: "white",
-  buttonColor: "#FFAF10",
   enableButton: false,
-  subtitleStyle: styles.subTitleStyle,
   rippleDuration: 750,
   buttonComponent: null,
-  imageResizeMode: "contain",
+  buttonColor: "#FFAF10",
+  style: styles.container,
   buttonTextColor: "white",
+  imageResizeMode: "contain",
+  imageStyle: styles.imageStyle,
+  titleStyle: styles.titleStyle,
+  rippleContainerBorderRadius: 16,
+  subtitleStyle: styles.subTitleStyle,
   buttonTextStyle: styles.buttonTextStyle,
-  buttonContainerStyle: styles.buttonContainerStyle,
-  rippleContainerBorderRadius: 16
+  buttonContainerStyle: styles.buttonContainerStyle
 };
 
 export default StateView;

lib/src/components/styles/StateView.style.js

@@ -1,24 +1,43 @@
-
+import { Platform } from "react-native";
 
 export function buttonContainer(buttonColor) {
-  return ({
+  return {
     margin: 36,
     paddingTop: 12,
     borderRadius: 16,
     paddingBottom: 12,
     backgroundColor: buttonColor || "#FFAF10"
-  })
+  };
 }
 
 export function buttonTextContainer(buttonTextColor) {
-  return ({
+  return {
     fontSize: 16,
     fontWeight: "700",
     textAlign: "center",
     color: buttonTextColor || "white"
-  })
+  };
 }
 
+export const _shadowStyle = shadowColor => {
+  return {
+    ...Platform.select({
+      ios: {
+        shadowRadius: 2,
+        shadowOpacity: 0.3,
+        shadowColor: shadowColor || "#000",
+        shadowOffset: {
+          width: 2,
+          height: 3
+        }
+      },
+      android: {
+        elevation: 5
+      }
+    })
+  };
+};
+
 export default {
   titleStyle: {
     padding: 16,
@@ -40,5 +59,5 @@ export default {
   center: {
     alignSelf: "center",
     alignContent: "center"
-  },
+  }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-easy-state-view",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Fully customizable State View for React Native.",
   "keywords": [
     "react-native",