fix: Fix shadow consistency ios/android (#140)

shootismoke · Jul 22, 2019 · 22604e4 · 22604e4
1 parent 8050d31
commit 22604e4
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 24 deletions.
diff --git a/App/Screens/Details/Header/Header.tsx b/App/Screens/Details/Header/Header.tsx
@@ -110,7 +110,7 @@ const styles = StyleSheet.create({
  marginRight: theme.spacing.normal
  },
  container: {
- ...theme.elevatedLevel1('bottom'),
+ ...theme.elevationShadowStyle(2, 'bottom'),
  ...theme.withPadding,
  backgroundColor: 'white',
  paddingBottom: theme.spacing.small,

diff --git a/App/components/Banner/Banner.tsx b/App/components/Banner/Banner.tsx
@@ -51,8 +51,12 @@ export function Banner ({
  onPress={asTouchable ? onClick : undefined}
  style={[
  styles.container,
- elevated === true ? theme.elevatedLevel1(shadowPosition) : null,
- elevated === 'very' ? theme.elevatedLevel2(shadowPosition) : null
+ elevated === true
+ ? theme.elevationShadowStyle(2, shadowPosition)
+ : null,
+ elevated === 'very'
+ ? theme.elevationShadowStyle(10, shadowPosition)
+ : null
  ]}
  underlayColor={asTouchable ? theme.primaryColor : undefined} // https://github.com/facebook/react-native/issues/11834
  >

diff --git a/App/components/BoxButton/BoxButton.tsx b/App/components/BoxButton/BoxButton.tsx
@@ -56,14 +56,10 @@ const styles = StyleSheet.create({
  borderColor: 'rgba(0, 0, 0, 0.1)',
  borderRadius: scale(12),
  borderWidth: 1,
- elevation: 1,
  marginBottom: theme.spacing.tiny,
  paddingHorizontal: theme.spacing.small,
  paddingVertical: scale(4),
- shadowColor: 'black',
- shadowOffset: { width: 0, height: 6 },
- shadowOpacity: 0.1,
- shadowRadius: 4
+ ...theme.elevationShadowStyle(5)
  },
  boxButtonText: {
  ...theme.shitText,

diff --git a/App/util/theme.ts b/App/util/theme.ts
@@ -48,22 +48,25 @@ const fixTextMargin = {
  })
 };
 
-export const elevatedLevel1 = (position: ShadowPosition) => ({
- elevation: 2,
- shadowColor: 'black',
- shadowOffset: { width: 0, height: position === 'top' ? -2 : 2 },
- shadowOpacity: 0.2,
- shadowRadius: 2
-});
-
-export const elevatedLevel2 = (position: ShadowPosition) => ({
- elevation: 10,
- shadowColor: 'black',
- shadowOffset: { width: 0, height: position === 'top' ? -9 : 9 },
- shadowOpacity: 0.4,
- shadowRadius: 9,
- zIndex: 100
-});
+/**
+ * Get consistent shadows between iOS and Android
+ * @see https://stenbeck.io/styling-shadows-in-react-native-ios-and-android/
+ */
+export function elevationShadowStyle (
+ elevation: number,
+ position: ShadowPosition = 'bottom'
+) {
+ return {
+ elevation,
+ shadowColor: 'black',
+ shadowOffset: {
+ width: 0,
+ height: scale((position === 'bottom' ? 1 : -1) * 0.5 * elevation)
+ },
+ shadowOpacity: 0.3,
+ shadowRadius: scale(0.8 * elevation)
+ };
+}
 
 export const fullScreen = {
  backgroundColor,