make the homescreen resize correctly in landscape

Author: hawkrives

source/views/home/button.js

@@ -14,9 +14,10 @@ export function HomeScreenButton({
   view: ViewType,
   onPress: () => any,
 }) {
-  const screenWidth = Dimensions.get('window').width
+  // const screenWidth = Dimensions.get('window').width
   const style = {
-    width: screenWidth / 2 - CELL_MARGIN * 1.5,
+    // width: screenWidth / 2 - CELL_MARGIN * 1.5,
+    // flex: 1,
     backgroundColor: view.tint,
   }
 
@@ -41,12 +42,16 @@ const cellHorizontalPadding = 4
 const styles = StyleSheet.create({
   // Main buttons for actions on home screen
   rectangle: {
+    flex: 1,
+
     alignItems: 'center',
     justifyContent: 'center',
+
     paddingTop: cellVerticalPadding,
     paddingBottom: cellVerticalPadding / 2,
     paddingHorizontal: cellHorizontalPadding,
     borderRadius: Platform.OS === 'ios' ? 6 : 3,
+
     elevation: 2,
 
     marginTop: CELL_MARGIN / 2,
@@ -61,9 +66,9 @@ const styles = StyleSheet.create({
   },
   rectangleButtonText: {
     color: c.white,
-    marginTop: cellVerticalPadding / 2,
+    // marginTop: cellVerticalPadding / 2,
     fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif-condensed',
-    textAlign: 'center',
+    // textAlign: 'center',
     fontSize: 14,
   },
 })

source/views/home/home.js

@@ -13,17 +13,31 @@ import sortBy from 'lodash/sortBy'
 import type {TopLevelViewPropsType} from '../types'
 import type {ViewType} from '../views'
 import {allViews} from '../views'
+import {Column} from '../components/layout'
 import {HomeScreenButton, CELL_MARGIN} from './button'
 import {trackedOpenUrl} from '../components/open-url'
 import {EditHomeButton, OpenSettingsButton} from '../components/nav-buttons'
 
+function partitionByIndex<T>(arr: T[]): [T[], T[]] {
+  return arr.reduce(
+    (acc, val, idx) => {
+      return idx % 2 === 0
+        ? [acc[0].concat(val), acc[1]]
+        : [acc[0], acc[1].concat(val)]
+    },
+    [[], []],
+  )
+}
+
 function HomePage({
   navigation,
   order,
   views = allViews,
 }: {order: string[], views: ViewType[]} & TopLevelViewPropsType) {
   const sortedViews = sortBy(views, view => order.indexOf(view.view))
 
+  const columns = partitionByIndex(sortedViews)
+
   return (
     <ScrollView
       overflow="hidden"
@@ -34,18 +48,22 @@ function HomePage({
     >
       <StatusBar barStyle="light-content" backgroundColor={c.gold} />
 
-      {sortedViews.map(view =>
-        <HomeScreenButton
-          key={view.view}
-          view={view}
-          onPress={() => {
-            if (view.type === 'url') {
-              return trackedOpenUrl({url: view.url, id: view.view})
-            } else {
-              return navigation.navigate(view.view)
-            }
-          }}
-        />,
+      {columns.map((contents, i) =>
+        <Column key={i} flex={1}>
+          {contents.map(view =>
+            <HomeScreenButton
+              key={view.view}
+              view={view}
+              onPress={() => {
+                if (view.type === 'url') {
+                  return trackedOpenUrl({url: view.url, id: view.view})
+                } else {
+                  return navigation.navigate(view.view)
+                }
+              }}
+            />,
+          )}
+        </Column>,
       )}
     </ScrollView>
   )
@@ -72,9 +90,6 @@ const styles = StyleSheet.create({
     marginTop: CELL_MARGIN / 2,
     paddingBottom: CELL_MARGIN / 2,
 
-    alignItems: 'flex-start',
-    justifyContent: 'center',
     flexDirection: 'row',
-    flexWrap: 'wrap',
   },
 })