Replace CSS boxShadow with react native compatible params

Author: tanx

src/component/header.js

@@ -16,11 +16,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   shadow: {
-    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.3)',
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 4,
+    shadowColor: color.black,
+    shadowOpacity: 0.3,
     zIndex: 1,
   },
   separator: {
-    boxShadow: `0 0.25px ${color.white}`,
+    shadowOffset: { width: 0, height: 0.25 },
+    shadowColor: color.white,
   },
   centerTitle: {
     justifyContent: 'center',

src/component/list.js

@@ -74,7 +74,8 @@ const itemStyles = StyleSheet.create({
     alignItems: 'center',
     height: 40,
     marginTop: 1, // prevent box-shadow blinking when pressing item
-    boxShadow: `0 0.5px ${color.greyBorder}`,
+    shadowOffset: { width: 0, height: 0.5 },
+    shadowColor: color.greyBorder,
   },
 });
 
@@ -103,7 +104,7 @@ ListItem.propTypes = {
 
 const headStyles = StyleSheet.create({
   head: {
-    boxShadow: '0',
+    shadowOffset: { width: 0, height: 0 },
   },
 });
 

src/component/style.js

@@ -1,4 +1,5 @@
 export const color = {
+  black: '#000000',
   white: '#FFFFFF',
   whiteBg: '#F5F5F5',
   grey: '#C5C8CF',

src/view/home.js

@@ -233,7 +233,8 @@ const qrStyles = StyleSheet.create({
   separator: {
     flex: 1,
     height: 1,
-    boxShadow: `0 0.25px ${color.white}`,
+    shadowOffset: { width: 0, height: 0.25 },
+    shadowColor: color.white,
   },
   button: {
     top: -19,