react-native-system-ui 0.0.4 → 0.0.6

package/dist/es/components/form/Form.js

@@ -1,10 +1,11 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { View } from 'react-native';
+import { shallowEqualObject } from '../../utils';
 import { isPromiseLike } from '../../utils/promise';
 import { isNumber, isString, isText } from '../../utils/validate';
-import { FormContext } from './FormContext';
-import { getValueByName, normalizeTrigger, serializeNamePath, setValueByName } from './utils';
+import { FORM_ALL_FIELDS_KEY, getValueByName, normalizeTrigger, serializeNamePath, setValueByName } from './utils';
+export const FormContext = /*#__PURE__*/React.createContext(null);
 const runRuleValidation = (rule, value, values) => {
   const message = rule.message ?? '表单验证未通过';
   const empty = value == null || value === '' || Array.isArray(value) && value.length === 0;
@@ -24,21 +25,6 @@ const runRuleValidation = (rule, value, values) => {
   const result = rule.validator(value, values);
   return isPromiseLike(result) ? result.then(handle) : handle(result);
 };
-const shallowEqual = (prev, next) => {
-  if (prev === next) return true;
-  if (!prev || !next) return false;
-  const prevKeys = Object.keys(prev);
-  const nextKeys = Object.keys(next);
-  if (prevKeys.length !== nextKeys.length) {
-    return false;
-  }
-  for (const key of prevKeys) {
-    if (prev[key] !== next[key]) {
-      return false;
-    }
-  }
-  return true;
-};
 const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     initialValues: initialValuesProp,
@@ -54,49 +40,55 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const defaultInitialValuesRef = useRef({});
   const mergedInitialValues = initialValuesProp ?? defaultInitialValuesRef.current;
-  const [values, setValues] = useState(mergedInitialValues);
-  const [errors, setErrors] = useState({});
+  const [, setFormVersion] = useState(0);
+  const errorsRef = useRef({});
   const lastInitialValuesRef = useRef(mergedInitialValues);
   const fieldsRef = useRef({});
   const dependencyGraphRef = useRef(new Map());
-  const valuesRef = useRef(values);
-  const errorsRef = useRef(errors);
+  const valuesRef = useRef(mergedInitialValues);
   const validationSeqRef = useRef({});
   const subscribersRef = useRef(new Set());
+  const notify = useCallback((changedValues, nextValues) => {
+    subscribersRef.current.forEach(listener => listener(changedValues, nextValues));
+  }, []);
   useEffect(() => {
-    if (shallowEqual(lastInitialValuesRef.current, mergedInitialValues)) {
+    if (shallowEqualObject(lastInitialValuesRef.current, mergedInitialValues)) {
       return;
     }
     lastInitialValuesRef.current = mergedInitialValues;
     valuesRef.current = mergedInitialValues;
     errorsRef.current = {};
-    setValues(mergedInitialValues);
-    setErrors({});
-  }, [mergedInitialValues]);
+    setFormVersion(version => version + 1);
+    notify({
+      [FORM_ALL_FIELDS_KEY]: true
+    }, mergedInitialValues);
+  }, [mergedInitialValues, notify]);
   const setFieldErrors = useCallback((name, nextErrors) => {
     const key = serializeNamePath(name);
-    setErrors(prev => {
-      const prevErrors = prev[key];
-      if (!nextErrors.length) {
-        if (!prevErrors) return prev;
-        const clone = {
-          ...prev
-        };
-        delete clone[key];
-        errorsRef.current = clone;
-        return clone;
-      }
-      if (prevErrors?.[0] === nextErrors[0] && prevErrors.length === nextErrors.length) {
-        return prev;
-      }
+    const prevErrors = errorsRef.current[key];
+    if (!nextErrors.length) {
+      if (!prevErrors) return;
       const clone = {
-        ...prev,
-        [key]: nextErrors
+        ...errorsRef.current
       };
+      delete clone[key];
       errorsRef.current = clone;
-      return clone;
-    });
-  }, []);
+      notify({
+        [key]: getValueByName(valuesRef.current, name)
+      }, valuesRef.current);
+      return;
+    }
+    if (prevErrors?.[0] === nextErrors[0] && prevErrors.length === nextErrors.length) {
+      return;
+    }
+    errorsRef.current = {
+      ...errorsRef.current,
+      [key]: nextErrors
+    };
+    notify({
+      [key]: getValueByName(valuesRef.current, name)
+    }, valuesRef.current);
+  }, [notify]);
   const registerField = useCallback((name, options) => {
     const key = serializeNamePath(name);
     const prev = fieldsRef.current[key];
@@ -131,12 +123,11 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
       const existsInState = getValueByName(valuesRef.current, name);
       if (existsInState === undefined) {
-        setValues(prev => {
-          if (getValueByName(prev, name) !== undefined) return prev;
-          const next = setValueByName(prev, name, options.initialValue);
-          valuesRef.current = next;
-          return next;
-        });
+        const next = setValueByName(valuesRef.current, name, options.initialValue);
+        valuesRef.current = next;
+        notify({
+          [key]: options.initialValue
+        }, next);
       }
     }
     return () => {
@@ -154,9 +145,6 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
       setFieldErrors(name, []);
     };
   }, [setFieldErrors]);
-  const notify = useCallback((changedValues, nextValues) => {
-    subscribersRef.current.forEach(listener => listener(changedValues, nextValues));
-  }, []);
   const runFieldValidation = useCallback(async (name, trigger, valueOverride, valuesOverride) => {
     const key = serializeNamePath(name);
     const validationSeq = (validationSeqRef.current[key] ?? 0) + 1;
@@ -205,26 +193,24 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [runFieldValidation]);
   const setFieldValue = useCallback((name, value, trigger) => {
     const nameKey = serializeNamePath(name);
-    setValues(prev => {
-      const prevValue = getValueByName(prev, name);
-      if (prevValue === value) return prev;
-      const next = setValueByName(prev, name, value);
-      valuesRef.current = next;
-      onValuesChange?.(next, nameKey, value);
-      runFieldValidation(name, trigger, value, next);
-      const dependents = dependencyGraphRef.current.get(nameKey);
-      if (dependents?.size) {
-        for (const dependentKey of dependents) {
-          const meta = fieldsRef.current[dependentKey];
-          if (!meta) continue;
-          runFieldValidation(meta.name, trigger, getValueByName(next, meta.name), next);
-        }
+    const prev = valuesRef.current;
+    const prevValue = getValueByName(prev, name);
+    if (prevValue === value) return;
+    const next = setValueByName(prev, name, value);
+    valuesRef.current = next;
+    onValuesChange?.(next, nameKey, value);
+    runFieldValidation(name, trigger, value, next);
+    const dependents = dependencyGraphRef.current.get(nameKey);
+    if (dependents?.size) {
+      for (const dependentKey of dependents) {
+        const meta = fieldsRef.current[dependentKey];
+        if (!meta) continue;
+        runFieldValidation(meta.name, trigger, getValueByName(next, meta.name), next);
       }
-      notify({
-        [nameKey]: value
-      }, next);
-      return next;
-    });
+    }
+    notify({
+      [nameKey]: value
+    }, next);
   }, [notify, onValuesChange, runFieldValidation]);
   const formApi = {
     submit: async () => {
@@ -237,16 +223,18 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     },
     getFieldsValue: () => valuesRef.current,
-    setFieldsValue: next => {
-      setValues(prev => {
-        let merged = prev;
-        const changed = {};
-        Object.keys(next).forEach(key => {
-          const newVal = next[key];
-          if (getValueByName(merged, key) === newVal) return;
-          changed[key] = newVal;
-          merged = setValueByName(merged, key, newVal);
-          onValuesChange?.(merged, key, newVal);
+    setFieldsValue: (next, options) => {
+      const shouldValidate = options?.validate ?? false;
+      const prev = valuesRef.current;
+      let merged = prev;
+      const changed = {};
+      Object.keys(next).forEach(key => {
+        const newVal = next[key];
+        if (getValueByName(merged, key) === newVal) return;
+        changed[key] = newVal;
+        merged = setValueByName(merged, key, newVal);
+        onValuesChange?.(merged, key, newVal);
+        if (shouldValidate) {
           runFieldValidation(key, undefined, newVal, merged);
           const dependents = dependencyGraphRef.current.get(key);
           if (dependents?.size) {
@@ -256,12 +244,11 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
               runFieldValidation(meta.name, undefined, getValueByName(merged, meta.name), merged);
             }
           }
-        });
-        if (merged === prev) return prev;
-        valuesRef.current = merged;
-        notify(changed, merged);
-        return merged;
+        }
       });
+      if (merged === prev) return;
+      valuesRef.current = merged;
+      notify(changed, merged);
     },
     resetFields: () => {
       let next = lastInitialValuesRef.current;
@@ -272,25 +259,21 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
       });
       valuesRef.current = next;
       errorsRef.current = {};
-      setValues(next);
-      setErrors({});
-      notify(next, next);
+      notify({
+        [FORM_ALL_FIELDS_KEY]: true
+      }, next);
     },
     validateFields,
     getFieldError: name => errorsRef.current[serializeNamePath(name)] ?? []
   };
   useImperativeHandle(ref, () => formApi, [formApi]);
-  const getFieldError = useCallback(name => errors[serializeNamePath(name)], [errors]);
-  const getFieldValue = useCallback(name => getValueByName(values, name), [values]);
-  const contextValidateField = useCallback((name, trigger) => runFieldValidation(name, trigger), [runFieldValidation]);
   const contextValue = {
-    values,
-    getFieldValue,
+    getFieldValue: name => getValueByName(valuesRef.current, name),
     setFieldValue,
     registerField,
-    getFieldError,
-    validateField: contextValidateField,
-    getFieldsValue: () => values,
+    getFieldError: name => errorsRef.current[serializeNamePath(name)],
+    validateField: (name, trigger) => runFieldValidation(name, trigger),
+    getFieldsValue: () => valuesRef.current,
     subscribe: listener => {
       subscribersRef.current.add(listener);
       return () => subscribersRef.current.delete(listener);
@@ -322,11 +305,18 @@ export const useWatch = (name, formRef) => {
   useEffect(() => {
     if (!context?.subscribe) return undefined;
     return context.subscribe((changed, all) => {
+      if (FORM_ALL_FIELDS_KEY in changed) {
+        setValue(getSnapshot(all));
+        return;
+      }
       if (!names || names.some(key => serializeNamePath(key) in changed)) {
         setValue(getSnapshot(all));
       }
     });
   }, [context, getSnapshot, names]);
+  useEffect(() => {
+    setValue(getSnapshot());
+  }, [getSnapshot]);
   return value;
 };
 export const FormSubscribe = ({
@@ -338,7 +328,7 @@ export const FormSubscribe = ({
   useEffect(() => {
     if (!context?.subscribe) return undefined;
     return context.subscribe(next => {
-      if (to && !Object.keys(next).some(key => to.includes(key))) return;
+      if (to && !(FORM_ALL_FIELDS_KEY in next) && !Object.keys(next).some(key => to.includes(key))) return;
       setChanged(next);
     });
   }, [context, to]);

package/dist/es/components/form/FormContext.js

@@ -1,2 +1 @@
-import React from 'react';
-export const FormContext = /*#__PURE__*/React.createContext(null);
+export { FormContext } from './Form';

package/dist/es/components/form/FormItem.js

@@ -1,7 +1,7 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { isFunction, isString } from '../../utils';
 import { FormContext } from './FormContext';
-import { normalizeTrigger } from './utils';
+import { FORM_ALL_FIELDS_KEY, normalizeTrigger, serializeNamePath } from './utils';
 const EMPTY_RULES = [];
 export const FormItem = ({
   name,
@@ -33,11 +33,37 @@ export const FormItem = ({
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
   const normalizedRules = rules ?? EMPTY_RULES;
-  const prevValuesRef = useRef(context.values);
+  const prevValuesRef = useRef(context.getFieldsValue());
+  const [, forceUpdate] = useState(0);
+  const nameKey = name ? serializeNamePath(name) : undefined;
+  const subscribeAll = renderProps && !nameKey && !shouldUpdate;
   useEffect(() => {
-    prevValuesRef.current = context.values;
-  }, [context.values]);
-  const shouldRender = !shouldUpdate || shouldUpdate(prevValuesRef.current, context.values);
+    if (!context?.subscribe) return undefined;
+    return context.subscribe((changed, all) => {
+      if (FORM_ALL_FIELDS_KEY in changed) {
+        forceUpdate(version => version + 1);
+        return;
+      }
+      if (subscribeAll) {
+        forceUpdate(version => version + 1);
+        return;
+      }
+      if (shouldUpdate) {
+        if (shouldUpdate(prevValuesRef.current, all)) {
+          forceUpdate(version => version + 1);
+        }
+        return;
+      }
+      if (nameKey && nameKey in changed) {
+        forceUpdate(version => version + 1);
+      }
+    });
+  }, [context, nameKey, shouldUpdate, subscribeAll]);
+  const currentValues = context.getFieldsValue();
+  useEffect(() => {
+    prevValuesRef.current = currentValues;
+  }, [currentValues]);
+  const shouldRender = !shouldUpdate || shouldUpdate(prevValuesRef.current, currentValues);
   useEffect(() => {
     if (!name) return undefined;
     return context.registerField(name, {

package/dist/es/components/form/FormList.js

@@ -1,6 +1,6 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { FormContext } from './FormContext';
-import { getValueByName } from './utils';
+import { FORM_ALL_FIELDS_KEY, getValueByName, serializeNamePath } from './utils';
 export const FormList = ({
   name,
   initialValue,
@@ -8,9 +8,15 @@ export const FormList = ({
 }) => {
   const context = useContext(FormContext);
   const keyRef = useRef(0);
+  const nameKey = serializeNamePath(name);
+  const [listValue, setListValue] = useState(() => {
+    if (!context) return [];
+    const current = getValueByName(context.getFieldsValue(), name);
+    return Array.isArray(current) ? current : [];
+  });
   const ensureInitial = useCallback(() => {
     if (!context) return;
-    const current = getValueByName(context.values, name);
+    const current = getValueByName(context.getFieldsValue(), name);
     if (current === undefined && initialValue !== undefined) {
       context.setFieldValue(name, initialValue);
     }
@@ -18,11 +24,18 @@ export const FormList = ({
   useEffect(() => {
     ensureInitial();
   }, [ensureInitial]);
+  useEffect(() => {
+    if (!context?.subscribe) return undefined;
+    return context.subscribe((changed, all) => {
+      if (FORM_ALL_FIELDS_KEY in changed || nameKey in changed) {
+        const nextRaw = getValueByName(all, name);
+        setListValue(Array.isArray(nextRaw) ? nextRaw : []);
+      }
+    });
+  }, [context, name, nameKey]);
   if (!context) {
     return null;
   }
-  const listValueRaw = getValueByName(context.values, name);
-  const listValue = Array.isArray(listValueRaw) ? listValueRaw : [];
   const fields = listValue.map((_, index) => ({
     name: index,
     key: keyRef.current + index,

package/dist/es/components/form/tokens.js

@@ -0,0 +1,5 @@
+import { createComponentTokensHook } from '../../design-system';
+const createFormTokens = _foundations => {
+  return {};
+};
+export const useFormTokens = createComponentTokensHook('form', createFormTokens);

package/dist/es/components/form/utils.js

@@ -1,5 +1,6 @@
 import { isNumber, isString } from '../../utils';
 export const normalizeTrigger = trigger => trigger ? Array.isArray(trigger) ? trigger : [trigger] : [];
+export const FORM_ALL_FIELDS_KEY = '__form_all__';
 export const toNamePath = name => {
   if (name === undefined || name === null) return [];
   if (Array.isArray(name)) return name;

package/dist/es/components/grid/Grid.js

@@ -1,9 +1,9 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import { View } from 'react-native';
+import React, { useMemo } from 'react';
+import { Platform, View } from 'react-native';
 import { createHairlineView } from '../../utils';
-import { GridContext } from './GridContext';
 import { useGridTokens } from './tokens';
+export const GridContext = /*#__PURE__*/React.createContext(null);
 export const Grid = props => {
   const {
     tokensOverride,
@@ -22,22 +22,28 @@ export const Grid = props => {
     ...rest
   } = props;
   const tokens = useGridTokens(tokensOverride);
-  const columnNumValue = columnNumProp ?? tokens.defaults.columnNum;
-  const columnNum = Number.isFinite(columnNumValue) && columnNumValue > 0 ? Math.floor(columnNumValue) : tokens.defaults.columnNum;
-  const gutterValue = gutterProp ?? tokens.defaults.gutter;
-  const gutter = Number.isFinite(gutterValue) && gutterValue > 0 ? gutterValue : 0;
-  const border = borderProp ?? tokens.defaults.border;
-  const center = centerProp ?? tokens.defaults.center;
-  const square = squareProp ?? tokens.defaults.square;
-  const direction = directionProp ?? tokens.defaults.direction;
-  const reverse = reverseProp ?? tokens.defaults.reverse;
-  const clickable = clickableProp ?? tokens.defaults.clickable;
-  const iconSizeValue = iconSizeProp ?? tokens.defaults.iconSize;
-  const iconSize = Number.isFinite(iconSizeValue) && iconSizeValue > 0 ? iconSizeValue : tokens.defaults.iconSize;
-  const childArray = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
+  const columnNum = useMemo(() => {
+    const columnNumValue = columnNumProp ?? tokens.defaults.columnNum;
+    return Number.isFinite(columnNumValue) && columnNumValue > 0 ? Math.floor(columnNumValue) : tokens.defaults.columnNum;
+  }, [columnNumProp, tokens.defaults.columnNum]);
+  const gutter = useMemo(() => {
+    const gutterValue = gutterProp ?? tokens.defaults.gutter;
+    return Number.isFinite(gutterValue) && gutterValue > 0 ? gutterValue : 0;
+  }, [gutterProp, tokens.defaults.gutter]);
+  const border = useMemo(() => borderProp ?? tokens.defaults.border, [borderProp, tokens.defaults.border]);
+  const center = useMemo(() => centerProp ?? tokens.defaults.center, [centerProp, tokens.defaults.center]);
+  const square = useMemo(() => squareProp ?? tokens.defaults.square, [squareProp, tokens.defaults.square]);
+  const direction = useMemo(() => directionProp ?? tokens.defaults.direction, [directionProp, tokens.defaults.direction]);
+  const reverse = useMemo(() => reverseProp ?? tokens.defaults.reverse, [reverseProp, tokens.defaults.reverse]);
+  const clickable = useMemo(() => clickableProp ?? tokens.defaults.clickable, [clickableProp, tokens.defaults.clickable]);
+  const iconSize = useMemo(() => {
+    const iconSizeValue = iconSizeProp ?? tokens.defaults.iconSize;
+    return Number.isFinite(iconSizeValue) && iconSizeValue > 0 ? iconSizeValue : tokens.defaults.iconSize;
+  }, [iconSizeProp, tokens.defaults.iconSize]);
+  const childArray = useMemo(() => React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)), [children]);
   const showBorder = border && !gutter;
   const borderColor = tokens.colors.border;
-  const topBorder = showBorder && /*#__PURE__*/React.createElement(View, {
+  const topBorder = useMemo(() => showBorder ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.border, tokens.layout.borderTop, createHairlineView({
       position: 'top',
       color: borderColor,
@@ -45,8 +51,8 @@ export const Grid = props => {
       right: 0,
       top: 0
     })]
-  });
-  const bottomBorder = showBorder && /*#__PURE__*/React.createElement(View, {
+  }) : null, [borderColor, showBorder, tokens.layout.border, tokens.layout.borderTop]);
+  const bottomBorder = useMemo(() => showBorder ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.border, tokens.layout.borderBottom, createHairlineView({
       position: 'bottom',
       color: borderColor,
@@ -54,8 +60,8 @@ export const Grid = props => {
       right: 0,
       bottom: 0
     })]
-  });
-  const contextValue = {
+  }) : null, [borderColor, showBorder, tokens.layout.border, tokens.layout.borderBottom]);
+  const contextValue = useMemo(() => ({
     columnNum,
     gutter,
     border,
@@ -68,16 +74,24 @@ export const Grid = props => {
     iconColor,
     count: childArray.length,
     tokens
-  };
+  }), [border, center, childArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
+  const webGridStyle = useMemo(() => Platform.OS === 'web' ? {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${columnNum}, minmax(0, 1fr))`,
+    columnGap: gutter,
+    rowGap: gutter
+  } : undefined, [columnNum, gutter]);
+  const containerStyle = useMemo(() => [tokens.layout.container, Platform.OS === 'web' ? webGridStyle : gutter ? {
+    paddingLeft: gutter
+  } : undefined, style], [gutter, style, tokens.layout.container, webGridStyle]);
+  const renderedChildren = useMemo(() => childArray.map((child, index) => /*#__PURE__*/React.cloneElement(child, {
+    gridItemIndex: index,
+    key: child.key ?? index
+  })), [childArray]);
   return /*#__PURE__*/React.createElement(GridContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({
-    style: [tokens.layout.container, gutter ? {
-      paddingLeft: gutter
-    } : undefined, style]
-  }, rest), topBorder, childArray.map((child, index) => /*#__PURE__*/React.cloneElement(child, {
-    gridItemIndex: index,
-    key: child.key ?? index
-  })), bottomBorder));
+    style: containerStyle
+  }, rest), topBorder, renderedChildren, bottomBorder));
 };
 Grid.displayName = 'Grid';

package/dist/es/components/grid/GridContext.js

@@ -1,2 +1 @@
-import React from 'react';
-export const GridContext = /*#__PURE__*/React.createContext(null);
+export { GridContext } from './Grid';

package/dist/es/components/grid/GridItem.js

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import React, { useContext, useMemo } from 'react';
+import { Platform, Pressable, Text, View } from 'react-native';
 import Badge from '../badge';
 import { createHairlineView, isFunction, isRenderable, isText } from '../../utils';
 import { GridContext } from './GridContext';
@@ -35,19 +35,19 @@ export const GridItem = props => {
     iconColor,
     count
   } = context;
-  const widthPercent = `${100 / columnNum}%`;
-  const isLastColumn = (gridItemIndex + 1) % columnNum === 0;
-  const rowIndex = Math.floor(gridItemIndex / columnNum);
-  const lastRowIndex = Math.floor((count - 1) / columnNum);
-  const contentWrapperStyle = [tokens.layout.itemContentBase, direction === 'horizontal' ? tokens.layout.itemHorizontal : tokens.layout.itemVertical, center && tokens.layout.itemCenter, reverse ? direction === 'horizontal' ? tokens.layout.itemReverseRow : tokens.layout.itemReverseColumn : null, square ? tokens.layout.itemContentSquare : null, {
+  const widthPercent = useMemo(() => `${100 / columnNum}%`, [columnNum]);
+  const isLastColumn = useMemo(() => (gridItemIndex + 1) % columnNum === 0, [columnNum, gridItemIndex]);
+  const rowIndex = useMemo(() => Math.floor(gridItemIndex / columnNum), [columnNum, gridItemIndex]);
+  const lastRowIndex = useMemo(() => Math.floor((count - 1) / columnNum), [columnNum, count]);
+  const contentWrapperStyle = useMemo(() => [tokens.layout.itemContentBase, direction === 'horizontal' ? tokens.layout.itemHorizontal : tokens.layout.itemVertical, center && tokens.layout.itemCenter, reverse ? direction === 'horizontal' ? tokens.layout.itemReverseRow : tokens.layout.itemReverseColumn : null, square ? tokens.layout.itemContentSquare : null, {
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
     backgroundColor: tokens.colors.background
-  }, contentStyle];
+  }, contentStyle], [center, contentStyle, direction, reverse, square, tokens.colors.background, tokens.layout.itemContentBase, tokens.layout.itemContentSquare, tokens.layout.itemHorizontal, tokens.layout.itemReverseColumn, tokens.layout.itemReverseRow, tokens.layout.itemVertical, tokens.layout.itemCenter, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
   const hasText = isRenderable(text);
-  const resolvedIconColor = iconColorProp ?? iconColor ?? tokens.colors.text;
-  let innerContent = children;
-  if (!innerContent) {
+  const resolvedIconColor = useMemo(() => iconColorProp ?? iconColor ?? tokens.colors.text, [iconColor, iconColorProp, tokens.colors.text]);
+  const innerContent = useMemo(() => {
+    if (children) return children;
     let iconElement = null;
     if (icon || badge || dot) {
       const {
@@ -80,9 +80,9 @@ export const GridItem = props => {
       }, textStyle],
       numberOfLines: tokens.defaults.textNumberOfLines
     }, text) : text);
-    innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, iconElement, textElement);
-  }
-  const rightBorder = border && !gutter && !isLastColumn && /*#__PURE__*/React.createElement(View, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, iconElement, textElement);
+  }, [badge, center, children, direction, dot, hasText, icon, iconSize, resolvedIconColor, reverse, text, textStyle, tokens.colors.text, tokens.defaults.textNumberOfLines, tokens.layout.iconWrapper, tokens.layout.text, tokens.spacing.iconGap, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeight]);
+  const rightBorder = useMemo(() => border && !gutter && !isLastColumn ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.itemBorderRight, createHairlineView({
       position: 'right',
       color: tokens.colors.border,
@@ -90,8 +90,8 @@ export const GridItem = props => {
       bottom: 0,
       right: 0
     })]
-  });
-  const bottomBorder = border && !gutter && rowIndex < lastRowIndex && /*#__PURE__*/React.createElement(View, {
+  }) : null, [border, gutter, isLastColumn, tokens.colors.border, tokens.layout.itemBorderRight]);
+  const bottomBorder = useMemo(() => border && !gutter && rowIndex < lastRowIndex ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.itemBorderBottom, createHairlineView({
       position: 'bottom',
       color: tokens.colors.border,
@@ -99,17 +99,17 @@ export const GridItem = props => {
       right: 0,
       bottom: 0
     })]
-  });
-  const content = /*#__PURE__*/React.createElement(View, {
+  }) : null, [border, gutter, lastRowIndex, rowIndex, tokens.colors.border, tokens.layout.itemBorderBottom]);
+  const content = useMemo(() => /*#__PURE__*/React.createElement(View, {
     style: contentWrapperStyle
-  }, innerContent, rightBorder, bottomBorder);
-  const baseItemStyle = {
-    width: widthPercent,
+  }, innerContent, rightBorder, bottomBorder), [bottomBorder, contentWrapperStyle, innerContent, rightBorder]);
+  const baseItemStyle = useMemo(() => ({
+    width: Platform.OS === 'web' ? undefined : widthPercent,
     flexGrow: 0,
     flexShrink: 0,
-    paddingRight: gutter ? gutter : undefined,
-    marginTop: gutter && rowIndex > 0 ? gutter : undefined
-  };
+    paddingRight: Platform.OS === 'web' ? undefined : gutter ? gutter : undefined,
+    marginTop: Platform.OS === 'web' ? undefined : gutter && rowIndex > 0 ? gutter : undefined
+  }), [gutter, rowIndex, widthPercent]);
   const isInteractive = clickable || isFunction(onPress);
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(Pressable, _extends({