Fix elevation problem for iOS

src/components/CTAButton.js

@@ -4,7 +4,7 @@ import { View, Text, StyleSheet } from 'react-native';
 
 import { TouchableRipple } from 'react-native-paper';
 
-import { fonts, colors } from '../styles';
+import { fonts, colors, elevations } from '../styles';
 
 export default class CTAButton extends React.PureComponent {
   constructor(props) {
@@ -34,7 +34,7 @@ const buttonStyles = StyleSheet.create({
   buttonOuter: {
     overflow: 'hidden',
     borderRadius: 30,
-    elevation: 10,
+    ...elevations.ten,
     backgroundColor: colors.primary
   },
   button: {

src/components/CalendarDate.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { View, Text, StyleSheet } from 'react-native';
 
-import { fonts, colors } from '../styles';
+import { fonts, colors, elevations } from '../styles';
 
 export default class CalendarDate extends React.PureComponent {
   constructor(props) {
@@ -72,7 +72,7 @@ const calendarStyles = StyleSheet.create({
     width: 72,
     borderRadius: 3,
     backgroundColor: colors.white,
-    elevation: 2,
+    ...elevations.two,
     overflow: 'hidden'
   },
   month: {
@@ -113,7 +113,7 @@ const miniCalendarStyles = StyleSheet.create({
     width: 40,
     borderRadius: 2,
     backgroundColor: colors.white,
-    elevation: 1,
+    ...elevations.one,
     overflow: 'hidden'
   },
   month: {

src/components/RoundIconCarousel.js

@@ -6,7 +6,7 @@ import Carousel from 'react-native-snap-carousel';
 import { Icon } from 'react-native-elements';
 import { TouchableRipple } from 'react-native-paper';
 
-import { colors, fonts } from '../styles';
+import { colors, fonts, elevations } from '../styles';
 
 export default class RoundIconCarousel extends React.PureComponent {
   constructor(props) {
@@ -93,7 +93,7 @@ const classesCarouselStyles = StyleSheet.create({
     height: 72,
     width: 72,
     borderRadius: 36,
-    elevation: 2,
+    ...elevations.two,
     overflow: 'hidden'
   },
   container: {

src/components/TaskListCard.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 
-import { fonts, styles } from '../styles';
+import { fonts, styles, elevations } from '../styles';
 
 export default TaskListCard = props => (
   <View
@@ -39,7 +39,7 @@ const cardStyles = StyleSheet.create({
     backgroundColor: '#fff',
     borderRadius: 4,
     flex: 1,
-    elevation: 1,
+    ...elevations.one,
     paddingLeft: 32
   },
   title: {

src/components/UpcomingCarousel.js

@@ -6,7 +6,7 @@ import Carousel from 'react-native-snap-carousel';
 import { TouchableRipple } from 'react-native-paper';
 
 import CalendarDate from '../components/CalendarDate';
-import { colors, fonts } from '../styles';
+import { colors, fonts, elevations } from '../styles';
 
 export default class UpcomingCarousel extends React.Component {
   constructor(props) {
@@ -253,7 +253,7 @@ const upcomingCarouselStyles = StyleSheet.create({
     backgroundColor: colors.white,
     height: 100,
     borderRadius: 4,
-    elevation: 13 // Really increase this so the shadows appear blurry like iOS,
+    ...elevations.thirteen // Really increase this so the shadows appear blurry like iOS,
   },
   container: {
     flexDirection: 'row'

src/screens/ManagebacAlertScreen.js

@@ -14,7 +14,7 @@ import { BASE_URL } from '../../env';
 import HTMLView from 'react-native-htmlview';
 
 import { Storage } from '../helpers';
-import { colors } from '../styles';
+import { colors, elevations } from '../styles';
 
 export default class ManagebacAlertScreen extends React.Component {
   isMounted = false;
@@ -140,7 +140,7 @@ const alertStyles = StyleSheet.create({
     backgroundColor: colors.lightBlue2,
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderColor: colors.gray2,
-    elevation: 2
+    ...elevations.two
   },
   bold: {
     fontWeight: 'bold'

src/screens/ManagebacMessageThreadScreen.js

@@ -23,7 +23,7 @@ import { BASE_URL } from '../../env';
 import HeaderIcon from '../components/HeaderIcon';
 import EndOfList from '../components/EndOfList';
 import { Storage } from '../helpers';
-import { colors } from '../styles';
+import { colors, elevations } from '../styles';
 
 class ManagebacMessageThreadScreen extends React.Component {
   isMounted = false;
@@ -479,18 +479,18 @@ const messageThreadStyles = StyleSheet.create({
     backgroundColor: colors.lightBackground
   },
   topLevel: {
-    elevation: 3,
+    ...elevations.three,
     backgroundColor: colors.white,
     marginBottom: 16
   },
   level2: {
-    elevation: 2,
+    ...elevations.two,
     backgroundColor: colors.white,
     marginLeft: 16,
     marginBottom: 16
   },
   level3: {
-    elevation: 1,
+    ...elevations.one,
     backgroundColor: colors.white,
     marginLeft: 32,
     marginBottom: 16
@@ -525,7 +525,7 @@ const messageThreadStyles = StyleSheet.create({
   },
   replyButtonContainer: {
     backgroundColor: colors.white,
-    elevation: 4,
+    ...elevations.four,
     borderRadius: 30,
     overflow: 'hidden',
     flexDirection: 'row',

src/screens/ManagebacViewCASReflectionsScreen.js

@@ -26,7 +26,7 @@ import HeaderIcon from '../components/HeaderIcon';
 import PreloadImage from '../components/PreloadImage';
 import ExperienceUneditableWarning from '../components/ExperienceUneditableWarning';
 import { Storage } from '../helpers';
-import { fonts, colors } from '../styles';
+import { fonts, colors, elevations } from '../styles';
 
 export default class ManagebacViewCASReflectionsScreen extends React.Component {
   isMounted = false;
@@ -475,7 +475,7 @@ const reflectionListStyles = StyleSheet.create({
     fontSize: 12
   },
   itemContentWrapper: {
-    elevation: 2,
+    ...elevations.two,
     marginHorizontal: 16,
     backgroundColor: colors.white,
     borderRadius: 2,

src/screens/SettingsScreen.js

@@ -18,7 +18,7 @@ import { connect } from 'react-redux';
 import { version } from '../../package.json';
 
 import { Storage } from '../helpers';
-import { colors, fonts } from '../styles';
+import { colors, fonts, elevations } from '../styles';
 
 class SettingsScreen extends React.Component {
   settingsSections = [
@@ -239,7 +239,7 @@ const settingsStyles = StyleSheet.create({
     alignItems: 'center',
     paddingVertical: 32,
     marginBottom: 8,
-    elevation: 2
+    ...elevations.two
   },
   profileIcon: {
     width: 64,

src/styles.js

@@ -10,7 +10,7 @@ import { StyleSheet } from 'react-native';
 /**
  * The colors are generated with the following method:
  * dark: [1/2] original (50%) #000000 (50%)
- * dark2: [1/6] original (16.6%) #000000 (83.4%) 
+ * dark2: [1/6] original (16.6%) #000000 (83.4%)
  * light: [1/6] original (50%) #ffffff (50%)
  * light2: [1/6] original (16.6%) #ffffff (83.4%)
  */
@@ -61,6 +61,75 @@ const fonts = StyleSheet.create({
   }
 });
 
+const elevations = StyleSheet.create({
+  one: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 1.0,
+
+    elevation: 1
+  },
+  two: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41,
+
+    elevation: 2
+  },
+  three: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+
+    elevation: 3
+  },
+  four: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+
+    elevation: 4
+  },
+  ten: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 5
+    },
+    shadowOpacity: 0.34,
+    shadowRadius: 6.27,
+
+    elevation: 10
+  },
+  thirteen: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 6
+    },
+    shadowOpacity: 0.39,
+    shadowRadius: 8.3,
+
+    elevation: 13
+  }
+});
+
 /*modularized styles*/
 const styles = StyleSheet.create({
   //apply to any
@@ -170,4 +239,4 @@ const labelColors = name => {
   return color;
 };
 
-export { styles, colors, preset, labelColors, fonts };
+export { styles, colors, preset, labelColors, fonts, elevations };