@momo-kits/foundation 0.75.1-beta.15 → 0.75.1-beta.17

package/Layout/Card.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import {Dimensions, View} from 'react-native';
-import {validateChildren} from './utils';
+import {View} from 'react-native';
+import {useGridSystem, validateChildren} from './utils';
 import {CardProps, GridContextProps} from './types';
 import {GridContext} from './index';
 import {GRIDVIEW} from '../Consts';
 import Item from './Item';
 
 const Card: React.FC<CardProps> = ({children, style}) => {
-  const numberOfColumns = Dimensions.get('window').width > 600 ? 24 : 12;
+  const {numberOfColumns, window} = useGridSystem();
+
   const gutterSize = 8;
   const margin = 12;
 
-  const widthSection = Dimensions.get('window').width - margin * 2;
+  const widthSection = window.width - margin * 2;
   const totalGutterSize = gutterSize * (numberOfColumns - 1);
   const sizePerSpan = (widthSection - totalGutterSize - 24) / numberOfColumns;
 

package/Layout/GridSystem.tsx

@@ -1,16 +1,18 @@
 import React, {useContext} from 'react';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {Dimensions, StyleSheet, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import {ApplicationContext} from '../Navigation';
 import {Colors, Spacing} from '../Consts';
 import {GridContextProps} from './types';
+import {useGridSystem} from './utils';
 
 const GridSystem: React.FC = () => {
   const {theme} = useContext(ApplicationContext);
-  const numberOfColumns = Dimensions.get('window').width > 600 ? 24 : 12;
+  const {numberOfColumns, window} = useGridSystem();
+
   const gutterSize = 12;
   const margin = 12;
-  const widthSection = Dimensions.get('window').width - margin * 2;
+  const widthSection = window.width - margin * 2;
   const totalGutterSize = gutterSize * (numberOfColumns - 1);
   const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
 

package/Layout/ScreenContainer.tsx

@@ -57,7 +57,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
     const results = validateChildren(children, [Section, Card]);
     if (Array.isArray(results)) {
       return results.map((item, index) => {
-        const space = item.props.useMargin === false ? 0 : Spacing.M;
+        const space = item.props?.useMargin === false ? 0 : Spacing.M;
         return (
           <View
             key={`ScreenItem${index}`}

package/Layout/Section.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {Dimensions, View} from 'react-native';
-import {validateChildren} from './utils';
+import {View} from 'react-native';
+import {useGridSystem, validateChildren} from './utils';
 import {GridContextProps, SectionProps} from './types';
 import {GridContext} from './index';
 import {GRIDVIEW} from '../Consts';
@@ -11,13 +11,14 @@ const Section: React.FC<SectionProps> = ({
   useMargin = true,
   backgroundColor,
 }) => {
-  const numberOfColumns = Dimensions.get('window').width > 600 ? 24 : 12;
+  const {numberOfColumns, window} = useGridSystem();
+
   const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
     margin = 12;
   }
-  let widthSection = Dimensions.get('window').width;
+  let widthSection = window.width;
   if (useMargin) widthSection = widthSection - margin * 2;
   const totalGutterSize = gutterSize * (numberOfColumns - 1);
   const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;

package/Layout/utils.ts

@@ -1,5 +1,5 @@
-import {Alert} from 'react-native';
-import React from 'react';
+import {Alert, Dimensions} from 'react-native';
+import React, {useEffect, useState} from 'react';
 
 /**
  * validate children type
@@ -56,4 +56,25 @@ const validateChildren = (
   return results;
 };
 
-export {validateChildren};
+const useGridSystem = () => {
+  const [numberOfColumns, setNumberOfColumns] = useState(
+    Dimensions.get('window').width > 600 ? 24 : 12,
+  );
+
+  useEffect(() => {
+    const subscription: any = Dimensions.addEventListener(
+      'change',
+      ({window}: any) => {
+        const newColumns = window.width > 600 ? 24 : 12;
+        if (numberOfColumns !== newColumns) {
+          setNumberOfColumns(newColumns);
+        }
+      },
+    );
+    return () => subscription?.remove();
+  }, []);
+
+  return {numberOfColumns, window: Dimensions.get('window')};
+};
+
+export {validateChildren, useGridSystem};

package/package.json

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