Reuse 'LayoutSingleColumn' component on homepage and profile page

kiwicom · Jun 18, 2018 · 3fd026d · 3fd026d
1 parent a8debbb
commit 3fd026d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git a/app/core/src/screens/homepage/Homepage.js b/app/core/src/screens/homepage/Homepage.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { TextButton } from '@kiwicom/mobile-shared';
+import { TextButton, LayoutSingleColumn } from '@kiwicom/mobile-shared';
 import { type NavigationType } from '@kiwicom/mobile-navigation';
 import {
   Translation,
@@ -11,7 +11,7 @@ import {
 } from '@kiwicom/mobile-localization';
 
 type Props = {|
-  navigation: NavigationType,
+  +navigation: NavigationType,
 |};
 
 function Section({ children }: { children: React.Node }) {
@@ -75,7 +75,7 @@ export default class Homepage extends React.Component<Props> {
 
   render = () => {
     return (
-      <React.Fragment>
+      <LayoutSingleColumn>
         <Section>
           <TextButton
             title={<Translation passThrough="Hotels" />}
@@ -108,7 +108,7 @@ export default class Homepage extends React.Component<Props> {
             onPress={this.searchWithDates}
           />
         </Section>
-      </React.Fragment>
+      </LayoutSingleColumn>
     );
   };
 }
diff --git a/app/hotels/src/singleHotel/roomList/RoomList.js b/app/hotels/src/singleHotel/roomList/RoomList.js
@@ -1,7 +1,6 @@
 // @flow
 
 import * as React from 'react';
-import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { StyleSheet, Text, Color } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
@@ -31,7 +30,7 @@ class RoomList extends React.Component<Props> {
     const data = this.props.data || [];
 
     return (
-      <View style={styles.wrapper}>
+      <React.Fragment>
         <Text style={styles.title}>
           <Translation id="single_hotel.room_list.rooms" />
         </Text>
@@ -45,15 +44,12 @@ class RoomList extends React.Component<Props> {
             openGallery={openGallery}
           />
         ))}
-      </View>
+      </React.Fragment>
     );
   };
 }
 
 const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-  },
   title: {
     fontSize: 14,
     color: Color.textLight,

diff --git a/app/profile/index.js b/app/profile/index.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { AsyncStorage, Alert } from 'react-native';
-import { SimpleCard } from '@kiwicom/mobile-shared';
+import { SimpleCard, LayoutSingleColumn } from '@kiwicom/mobile-shared';
 
 import Login from './components/authentication/Login';
 import Logout from './components/authentication/Logout';
@@ -21,10 +21,12 @@ export default class LoginScreen extends React.Component<{||}> {
 
   render = () => {
     return (
-      <SimpleCard>
-        <Login onLogin={this.onLogin} />
-        <Logout onLogout={this.onLogout} />
-      </SimpleCard>
+      <LayoutSingleColumn>
+        <SimpleCard>
+          <Login onLogin={this.onLogin} />
+          <Logout onLogout={this.onLogout} />
+        </SimpleCard>
+      </LayoutSingleColumn>
     );
   };
 }
diff --git a/packages/shared/src/view/LayoutSingleColumn.js b/packages/shared/src/view/LayoutSingleColumn.js
@@ -18,6 +18,7 @@ type Props = {|
  */
 export default function LayoutSingleColumn(props: Props) {
   const innerStyle = {
+    width: '100%',
     maxWidth: Device.getWideDeviceThreshold(),
   };