ordering-ui-react-native 0.13.4 → 0.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.13.4",
+  "version": "0.13.5",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/uber-eats/src/components/Cart/index.tsx

@@ -239,9 +239,9 @@ const CartUI = (props: any) => {
               </OSTotal>
               {cart?.status !== 2 && (
                 <OSTable>
-                  <View style={{ width: '100%', marginTop: 20 }}>
+                  <View style={{ flex: 1, marginTop: 20, paddingBottom: 20 }}>
                     <OText>{t('COMMENTS', 'Comments')}</OText>
-                    <View style={{ flex: 1, width: '100%' }}>
+                    <View style={{ flex: 1 }}>
                       <OInput
                         value={cart?.comment}
                         placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}

package/themes/uber-eats/src/components/Cart/styles.tsx

@@ -6,7 +6,7 @@ export const CContainer = styled.View`
 
 export const CartContent = styled.View`
   ${((props: any) => props.isBusinessCart && css`
-    margin-bottom: 45px;
+    margin-bottom: 65px;
   `)}
 `
 

package/themes/uber-eats/src/components/shared/OBottomPopup.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, ScrollView, Text } from 'react-native'
+import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, ScrollView, Text, Platform } from 'react-native'
 import { OText } from '../shared'
 import Icon from 'react-native-vector-icons/Feather'
-import { useTheme } from 'styled-components/native'
+import styled,{ useTheme } from 'styled-components/native'
 
 const deviceHeight = Dimensions.get('window').height
 
@@ -24,6 +24,11 @@ const OBottomPopup = (props: Props) => {
 
   const theme = useTheme()
 
+  const KeyboardView = styled.KeyboardAvoidingView`
+    flex-grow: 1;
+    flex-shrink: 1;
+  `;
+
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -79,26 +84,31 @@ const OBottomPopup = (props: Props) => {
           <View style={styles.touchableOutsideStyle} />
         </TouchableWithoutFeedback>
         <View style={styles.bottomContainer}>
-          <ScrollView showsVerticalScrollIndicator={false}>
-            {customHeaderShow ? (
-              <View style={styles.customHeaderStyle}>
-                <OText size={16} numberOfLines={1} style={styles.customTitleStyle}>
+          <KeyboardView
+            enabled
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          >
+            <ScrollView showsVerticalScrollIndicator={false} >
+              {customHeaderShow ? (
+                <View style={styles.customHeaderStyle}>
+                  <OText size={16} numberOfLines={1} style={styles.customTitleStyle}>
+                    {title}
+                  </OText>
+                  <Icon
+                    name='x'
+                    size={30}
+                    style={styles.closeBtnStyle}
+                    onPress={onClose}
+                  />
+                </View>
+              ) : (
+                <Text style={styles.titleStyle}>
                   {title}
-                </OText>
-                <Icon
-                  name='x'
-                  size={30}
-                  style={styles.closeBtnStyle}
-                  onPress={onClose}
-                />
-              </View>
-            ) : (
-              <Text style={styles.titleStyle}>
-                {title}
-              </Text>
-            )}
-            {children}
-          </ScrollView>
+                </Text>
+              )}
+              {children}
+            </ScrollView>
+          </KeyboardView>
         </View>
       </View>
     </Modal>