Small adjustments (reenabled pagingEnabled for ios, improved padding on android, ...

.vscode/settings.json

@@ -1,3 +1,4 @@
 // Place your settings in this file to overwrite default and user settings.
 {
+  "javascript.validate.enable": false
 }

src/components/Screen.js

@@ -1,9 +1,12 @@
 // @flow
 
 import styled from 'styled-components/native';
+import { Platform } from 'react-native';
+
+import { contentPadding } from '../styles/variables';
 
 export default styled.View`
   flex: 1;
   background-color: ${({ background, theme }) => background || theme.base00};
-  padding-top: 22;
+  padding-top: ${(Platform.OS === 'ios' ? 22 : 0) + (contentPadding / 2)};
 `;

src/components/columns/_Column.js

@@ -10,7 +10,7 @@ import { contentPadding, radius as defaultRadius } from '../../styles/variables'
 export const columnMargin = 2;
 
 // because android does not support overflow visible (RN < 0.41)
-export const columnPreviewWidth = Platform.OS === 'ios' ? contentPadding : 0;
+export const columnPreviewWidth = contentPadding;
 
 export const maxWidth = Platform.OS === 'android' ? 800 : 680;
 export const getFullWidth = () => Dimensions.get('window').width;

src/components/columns/_Columns.js

@@ -3,23 +3,17 @@
 import React from 'react';
 import styled from 'styled-components/native';
 import ImmutableListView from 'react-native-immutable-list-view';
-import withOrientation from '../../hoc/withOrientation';
 import { Platform } from 'react-native';
 import { List } from 'immutable';
 
 import NewColumn from './NewColumn';
+import withOrientation from '../../hoc/withOrientation';
 import { getFullWidth, getWidth } from './_Column';
 import type { ActionCreators } from '../../utils/types';
 
 export const StyledImmutableListViewListView = styled(ImmutableListView)`
   flex: 1;
-  ${
-    Platform.select({
-      ios: {
-        overflow: 'hidden',
-      },
-    })
-  }
+  ${Platform.OS === 'android' ? null : { overflow: 'visible' }}
 `;
 
 @withOrientation
@@ -40,8 +34,7 @@ export default class extends React.PureComponent {
 
     const _addColumnFn = column
       ? addColumnFn.bind(this, { order: column.get('order') })
-      : addColumnFn
-    ;
+      : addColumnFn;
 
     return (
       <NewColumn
@@ -54,12 +47,12 @@ export default class extends React.PureComponent {
     );
   }
 
-  renderRow = (mainRenderRow) => (column, ...otherArgs) => {
+  renderRow = mainRenderRow => (column, ...otherArgs) => {
     if (!column) return null;
 
     if (column.get('id') === 'new') return this.renderNewColumn(column);
     return mainRenderRow(column, ...otherArgs);
-  }
+  };
 
   render() {
     const {
@@ -77,26 +70,15 @@ export default class extends React.PureComponent {
         immutableData={columns}
         initialListSize={initialListSize}
         renderRow={this.renderRow(mainRenderRow)}
-        removeClippedSubviews={false}
         horizontal
-        {...(Platform.OS === 'ios' ? {
-          decelerationRate: 0,
-          pagingEnabled: false,
-          snapToInterval: width,
-          snapToAlignment: 'start',
-          contentContainerStyle: {
-            overflow: 'hidden',
-            paddingHorizontal: (getFullWidth() - width) / 2,
-          },
-        } : {
-          pagingEnabled: true,
-          contentContainerStyle: {
-            overflow: 'hidden',
-          },
-          style: {
-            marginHorizontal: (getFullWidth() - width) / 2,
-          },
-        })}
+        pagingEnabled
+        removeClippedSubviews
+        style={{
+          marginHorizontal: (getFullWidth() - width) / 2,
+        }}
+        contentContainerStyle={{
+          overflow: 'hidden',
+        }}
         {...props}
       />
     );