@momo-kits/foundation 0.80.8-beta.6 → 0.80.8-beta.9

package/Layout/Card.tsx

@@ -7,16 +7,23 @@ import Item from './Item';
 import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
-import {Colors, Spacing} from '../Consts';
+import {Colors, Radius, Shadow, Spacing} from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
    * Optional. Background image for the card.
    */
   backgroundImage?: string;
+
+  useShadow?: boolean;
 }
 
-const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  backgroundImage,
+  useShadow = false,
+}) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
@@ -127,22 +134,28 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
     return element;
   };
 
+  const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
       <View
         accessibilityLabel={`Card`}
         style={[
+          {
+            backgroundColor: theme.colors.background.surface,
+            borderRadius: Radius.M,
+          },
           style,
           styles.card,
           {
             width: widthSection,
             marginHorizontal: gridContext.margin,
           },
+          useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}
-            style={[style, styles.imageBackground]}
+            style={styles.imageBackground}
           />
         )}
         {renderView(validateChildren(children, [Item]))}

package/Layout/Screen.tsx

@@ -227,6 +227,7 @@ const Screen: React.FC<ScreenProps> = ({
         style={{
           position: 'absolute',
           width: '100%',
+          maxHeight: 215,
         }}>
         {renderHeader()}
       </View>

package/Layout/styles.ts

@@ -47,6 +47,7 @@ export default StyleSheet.create({
     marginLeft: undefined,
     marginRight: undefined,
     marginVertical: undefined,
+    overflow: 'hidden',
   },
   item: {
     overflow: 'hidden',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.80.8-beta.6",
+    "version": "0.80.8-beta.9",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {