react-native-system-ui 0.0.7 → 1.0.1

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

@@ -3,7 +3,8 @@ import { isFunction, isString } from '../../utils';
 import { FormContext } from './FormContext';
 import { FORM_ALL_FIELDS_KEY, normalizeTrigger, serializeNamePath } from './utils';
 const EMPTY_RULES = [];
-export const FormItem = ({
+const EMPTY_VALUES = {};
+const FormItemImpl = ({
   name,
   label,
   description,
@@ -21,139 +22,117 @@ export const FormItem = ({
   children
 }) => {
   const renderProps = typeof children === 'function';
-  const context = useContext(FormContext);
-  if (!context) {
-    if (renderProps) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, children({
-        getFieldValue: () => undefined,
-        getFieldsValue: () => ({}),
-        form: null
-      }));
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  }
-  const normalizedRules = rules ?? EMPTY_RULES;
-  const prevValuesRef = useRef(context.getFieldsValue());
+  const ctx = useContext(FormContext);
+  const normRules = rules ?? EMPTY_RULES;
+  const nKey = name ? serializeNamePath(name) : undefined;
+  const shouldAlwaysUp = renderProps && !nKey && !shouldUpdate;
+  const prevValsRef = useRef(EMPTY_VALUES);
   const [, forceUpdate] = useState(0);
-  const nameKey = name ? serializeNamePath(name) : undefined;
-  const subscribeAll = renderProps && !nameKey && !shouldUpdate;
   useEffect(() => {
-    if (!context?.subscribe) return undefined;
-    return context.subscribe((changed, all) => {
-      if (FORM_ALL_FIELDS_KEY in changed) {
-        forceUpdate(version => version + 1);
+    if (!ctx?.subscribe) return undefined;
+    return ctx.subscribe((ch, all) => {
+      if (FORM_ALL_FIELDS_KEY in ch) {
+        forceUpdate(v => v + 1);
         return;
       }
-      if (subscribeAll) {
-        forceUpdate(version => version + 1);
+      ;
+      if (shouldAlwaysUp) {
+        forceUpdate(v => v + 1);
         return;
       }
+      ;
       if (shouldUpdate) {
-        if (shouldUpdate(prevValuesRef.current, all)) {
-          forceUpdate(version => version + 1);
-        }
+        if (shouldUpdate(prevValsRef.current, all)) forceUpdate(v => v + 1);
         return;
       }
-      if (nameKey && nameKey in changed) {
-        forceUpdate(version => version + 1);
-      }
+      ;
+      if (nKey && nKey in ch) forceUpdate(v => v + 1);
     });
-  }, [context, nameKey, shouldUpdate, subscribeAll]);
-  const currentValues = context.getFieldsValue();
+  }, [ctx, nKey, shouldUpdate, shouldAlwaysUp]);
+  const curVals = ctx?.getFieldsValue() ?? EMPTY_VALUES;
   useEffect(() => {
-    prevValuesRef.current = currentValues;
-  }, [currentValues]);
-  const shouldRender = !shouldUpdate || shouldUpdate(prevValuesRef.current, currentValues);
+    prevValsRef.current = curVals;
+  }, [curVals]);
   useEffect(() => {
-    if (!name) return undefined;
-    return context.registerField(name, {
-      rules: normalizedRules,
+    if (!name || !ctx) return undefined;
+    return ctx.registerField(name, {
+      rules: normRules,
       dependencies,
       initialValue,
       validateTrigger: validateTrigger ?? trigger
     });
-  }, [context.registerField, name, normalizedRules, dependencies, initialValue, validateTrigger, trigger]);
-  const mergedValue = name ? context.getFieldValue(name) : undefined;
-  const mergedShowMessage = showValidateMessage ?? context.showValidateMessage ?? true;
-  const fieldErrors = name ? context.getFieldError(name) : undefined;
-  const firstError = mergedShowMessage ? fieldErrors?.[0] : undefined;
-  const mergedRequired = required ?? normalizedRules.some(rule => rule.required);
-  const mergedValidateTriggers = normalizeTrigger(validateTrigger ?? trigger);
+  }, [ctx, name, normRules, dependencies, initialValue, validateTrigger, trigger]);
+  if (!ctx) {
+    if (renderProps) return /*#__PURE__*/React.createElement(React.Fragment, null, children({
+      getFieldValue: () => undefined,
+      getFieldsValue: () => EMPTY_VALUES,
+      form: null
+    }));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  ;
+  const shouldRender = !shouldUpdate || shouldUpdate(prevValsRef.current, curVals);
+  const modelVal = name ? ctx.getFieldValue(name) : undefined;
+  const rShowMsg = showValidateMessage ?? ctx.showValidateMessage ?? true;
+  const fieldErrs = name ? ctx.getFieldError(name) : undefined;
+  const fieldErr = rShowMsg ? fieldErrs?.[0] : undefined;
+  const rRequired = required ?? normRules.some(r => r.required);
+  const rValidateTrigger = normalizeTrigger(validateTrigger ?? trigger);
   if (renderProps) {
     if (!shouldRender) return null;
-    const node = children({
-      getFieldValue: context.getFieldValue,
-      getFieldsValue: context.getFieldsValue,
-      form: context.form || null
-    });
-    return /*#__PURE__*/React.createElement(React.Fragment, null, node);
-  }
-  if (!name) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children({
+      getFieldValue: ctx.getFieldValue,
+      getFieldsValue: ctx.getFieldsValue,
+      form: ctx.form || null
+    }));
   }
+  ;
+  if (!name) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   if (!shouldRender) return null;
-  const childArray = React.Children.toArray(children);
-  if (childArray.length !== 1) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  }
-  const child = childArray[0];
+  const chArr = React.Children.toArray(children);
+  if (chArr.length !== 1) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  const child = chArr[0];
   const handleChange = next => {
-    context.setFieldValue(name, next, trigger);
-    const original = child.props[trigger];
-    if (isFunction(original)) {
-      original(next);
-    }
+    ctx.setFieldValue(name, next, trigger);
+    const orig = child.props[trigger];
+    if (isFunction(orig)) orig(next);
   };
-  const isFieldLike = (() => {
-    const displayName = child.type.displayName;
-    return isString(displayName) && (displayName.includes('Field') || displayName.includes('Input'));
-  })();
-  const resolveValue = () => {
-    const childValue = child.props[valuePropName];
-    if (childValue !== undefined) return childValue;
-    if (mergedValue !== undefined) return mergedValue;
+  const dispName = child.type.displayName;
+  const isFieldLike = isString(dispName) && (dispName.includes('Field') || dispName.includes('Input'));
+  const rValue = () => {
+    const cv = child.props[valuePropName];
+    if (cv !== undefined) return cv;
+    if (modelVal !== undefined) return modelVal;
     if (isFieldLike && valuePropName === 'value') return '';
-    return mergedValue;
+    return modelVal;
   };
-  const injectedProps = {
-    [valuePropName]: resolveValue(),
+  const injected = {
+    [valuePropName]: rValue(),
     [trigger]: handleChange
   };
-  mergedValidateTriggers.forEach(eventName => {
-    if (!eventName || eventName === trigger) return;
-    const original = child.props[eventName];
-    injectedProps[eventName] = (...args) => {
-      if (isFunction(original)) {
-        original(...args);
-      }
-      context.validateField(name, eventName);
+  rValidateTrigger.forEach(ev => {
+    if (!ev || ev === trigger) return;
+    const orig = child.props[ev];
+    injected[ev] = (...args) => {
+      if (isFunction(orig)) orig(...args);
+      ctx.validateField(name, ev);
     };
   });
-  if (label !== undefined && child.props.label === undefined) {
-    injectedProps.label = label;
-  }
-  if (context.colon !== undefined && injectedProps.label !== undefined && child.props.colon === undefined) {
-    injectedProps.colon = context.colon;
-  }
-  if (context.labelWidth !== undefined && child.props.labelWidth === undefined) {
-    injectedProps.labelWidth = context.labelWidth;
-  }
-  if (description && child.props.description === undefined) {
-    injectedProps.description = description;
-  }
-  if (intro && child.props.intro === undefined) {
-    injectedProps.intro = intro;
-  }
-  if (tooltip && child.props.tooltip === undefined) {
-    injectedProps.tooltip = tooltip;
-  }
-  if (mergedRequired && child.props.required === undefined) {
-    injectedProps.required = true;
-  }
-  if (firstError && child.props.errorMessage === undefined) {
-    injectedProps.error = true;
-    injectedProps.errorMessage = firstError;
+  const cp = child.props;
+  if (label !== undefined && cp.label === undefined) injected.label = label;
+  if (ctx.colon !== undefined && injected.label !== undefined && cp.colon === undefined) injected.colon = ctx.colon;
+  if (ctx.labelWidth !== undefined && cp.labelWidth === undefined) injected.labelWidth = ctx.labelWidth;
+  if (description && cp.description === undefined) injected.description = description;
+  if (intro && cp.intro === undefined) injected.intro = intro;
+  if (tooltip && cp.tooltip === undefined) injected.tooltip = tooltip;
+  if (rRequired && cp.required === undefined) injected.required = true;
+  if (fieldErr && cp.errorMessage === undefined) {
+    injected.error = true;
+    injected.errorMessage = fieldErr;
   }
-  return /*#__PURE__*/React.cloneElement(child, injectedProps);
+  ;
+  return /*#__PURE__*/React.cloneElement(child, injected);
 };
-FormItem.displayName = 'FormItem';
+FormItemImpl.displayName = 'FormItem';
+export const FormItem = /*#__PURE__*/React.memo(FormItemImpl);
+export default FormItem;

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

@@ -1,65 +1,77 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { FormContext } from './FormContext';
 import { FORM_ALL_FIELDS_KEY, getValueByName, serializeNamePath } from './utils';
+const getList = (context, name) => {
+  const raw = getValueByName(context.getFieldsValue(), name);
+  return Array.isArray(raw) ? raw : [];
+};
 export const FormList = ({
   name,
   initialValue,
   children
 }) => {
-  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 ctx = useContext(FormContext);
+  const keyCounterRef = useRef(0);
+  const keysRef = useRef([]);
+  const nKey = serializeNamePath(name);
+  const [listValue, setListValue] = useState(() => ctx ? getList(ctx, name) : []);
+  const syncKeys = useCallback(len => {
+    const k = keysRef.current;
+    while (k.length < len) k.push(keyCounterRef.current++);
+    if (k.length > len) keysRef.current = k.slice(0, len);
+  }, []);
   const ensureInitial = useCallback(() => {
-    if (!context) return;
-    const current = getValueByName(context.getFieldsValue(), name);
-    if (current === undefined && initialValue !== undefined) {
-      context.setFieldValue(name, initialValue);
-    }
-  }, [context, initialValue, name]);
+    if (!ctx) return;
+    if (getValueByName(ctx.getFieldsValue(), name) === undefined && initialValue !== undefined) ctx.setFieldValue(name, initialValue);
+  }, [ctx, initialValue, name]);
   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 : []);
+    if (!ctx?.subscribe) return undefined;
+    return ctx.subscribe((ch, all) => {
+      if (FORM_ALL_FIELDS_KEY in ch || nKey in ch) {
+        const next = getValueByName(all, name);
+        const nl = Array.isArray(next) ? next : [];
+        syncKeys(nl.length);
+        setListValue(nl);
       }
     });
-  }, [context, name, nameKey]);
-  if (!context) {
-    return null;
-  }
-  const fields = listValue.map((_, index) => ({
-    name: index,
-    key: keyRef.current + index,
-    isListField: true
-  }));
-  const add = (defaultValue, index) => {
-    const insertIndex = typeof index === 'number' ? index : listValue.length;
-    const next = [...listValue];
-    next.splice(insertIndex, 0, defaultValue);
-    context.setFieldValue(name, next);
-    keyRef.current += 1;
-  };
-  const remove = index => {
-    if (index < 0 || index >= listValue.length) return;
-    const next = listValue.slice(0, index).concat(listValue.slice(index + 1));
-    context.setFieldValue(name, next);
-  };
-  const move = (from, to) => {
-    if (from === to || from < 0 || to < 0 || from >= listValue.length || to >= listValue.length) return;
-    const next = [...listValue];
+  }, [ctx, name, nKey, syncKeys]);
+  const add = useCallback((defaultValue, index) => {
+    if (!ctx) return;
+    const a = getList(ctx, name);
+    const i = typeof index === 'number' ? index : a.length;
+    const next = [...a];
+    next.splice(i, 0, defaultValue);
+    keysRef.current.splice(i, 0, keyCounterRef.current++);
+    ctx.setFieldValue(name, next);
+  }, [ctx, name]);
+  const remove = useCallback(index => {
+    if (!ctx) return;
+    const a = getList(ctx, name);
+    if (index < 0 || index >= a.length) return;
+    keysRef.current.splice(index, 1);
+    ctx.setFieldValue(name, a.slice(0, index).concat(a.slice(index + 1)));
+  }, [ctx, name]);
+  const move = useCallback((from, to) => {
+    if (!ctx) return;
+    const a = getList(ctx, name);
+    if (from === to || from < 0 || to < 0 || from >= a.length || to >= a.length) return;
+    const next = [...a];
     const item = next.splice(from, 1)[0];
     next.splice(to, 0, item);
-    context.setFieldValue(name, next);
-  };
+    const [movedKey] = keysRef.current.splice(from, 1);
+    keysRef.current.splice(to, 0, movedKey);
+    ctx.setFieldValue(name, next);
+  }, [ctx, name]);
+  if (!ctx) return null;
+  syncKeys(listValue.length);
+  const fields = listValue.map((_, i) => ({
+    name: i,
+    key: keysRef.current[i],
+    isListField: true
+  }));
   return /*#__PURE__*/React.createElement(React.Fragment, null, children(fields, {
     add,
     remove,

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

@@ -1,5 +1,8 @@
 import { createComponentTokensHook } from '../../design-system';
-const createFormTokens = _foundations => {
-  return {};
-};
+const createFormTokens = _foundations => ({
+  defaults: {
+    showValidateMessage: true,
+    defaultValidationMessage: 'Validation failed'
+  }
+});
 export const useFormTokens = createComponentTokensHook('form', createFormTokens);

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

@@ -5,28 +5,19 @@ export const toNamePath = name => {
   if (name === undefined || name === null) return [];
   if (Array.isArray(name)) return name;
   if (isNumber(name)) return [name];
-  if (isString(name)) {
-    return name.split('.');
-  }
+  if (isString(name)) return name.split('.');
   return [String(name)];
 };
-export const serializeNamePath = name => {
-  const path = toNamePath(name);
-  return path.join('.');
-};
+export const serializeNamePath = name => toNamePath(name).join('.');
 export const getValueByName = (source, name) => {
-  const path = toNamePath(name);
-  return path.reduce((acc, key) => {
+  return toNamePath(name).reduce((acc, key) => {
     if (acc == null) return acc;
-    const keyStr = String(key);
+    const k = String(key);
     if (Array.isArray(acc)) {
-      const index = Number(keyStr);
-      return Number.isFinite(index) ? acc[index] : acc[keyStr];
+      const i = Number(k);
+      return Number.isFinite(i) ? acc[i] : acc[k];
     }
-    if (typeof acc === 'object') {
-      return acc[keyStr];
-    }
-    return undefined;
+    return typeof acc === 'object' ? acc[k] : undefined;
   }, source);
 };
 export const setValueByName = (source, name, value) => {
@@ -37,28 +28,18 @@ export const setValueByName = (source, name, value) => {
   } : {};
   let cursor = clone;
   path.forEach((key, index) => {
-    const keyStr = String(key);
-    const keyIndex = Number(keyStr);
+    const k = String(key),
+      ki = Number(k);
     if (index === path.length - 1) {
-      if (Array.isArray(cursor) && Number.isFinite(keyIndex)) {
-        cursor[keyIndex] = value;
-      } else {
-        ;
-        cursor[keyStr] = value;
-      }
+      if (Array.isArray(cursor) && Number.isFinite(ki)) cursor[ki] = value;else cursor[k] = value;
       return;
     }
-    const nextVal = Array.isArray(cursor) && Number.isFinite(keyIndex) ? cursor[keyIndex] : cursor[keyStr];
-    const nextContainer = nextVal === undefined || nextVal === null ? isNumber(path[index + 1]) ? [] : {} : Array.isArray(nextVal) ? [...nextVal] : typeof nextVal === 'object' ? {
-      ...nextVal
+    const nv = Array.isArray(cursor) && Number.isFinite(ki) ? cursor[ki] : cursor[k];
+    const nc = nv === undefined || nv === null ? isNumber(path[index + 1]) ? [] : {} : Array.isArray(nv) ? [...nv] : typeof nv === 'object' ? {
+      ...nv
     } : {};
-    if (Array.isArray(cursor) && Number.isFinite(keyIndex)) {
-      cursor[keyIndex] = nextContainer;
-    } else {
-      ;
-      cursor[keyStr] = nextContainer;
-    }
-    cursor = nextContainer;
+    if (Array.isArray(cursor) && Number.isFinite(ki)) cursor[ki] = nc;else cursor[k] = nc;
+    cursor = nc;
   });
   return clone;
 };

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

@@ -4,64 +4,64 @@ import { Platform, View } from 'react-native';
 import { createHairlineView } from '../../utils';
 import { useGridTokens } from './tokens';
 export const GridContext = /*#__PURE__*/React.createContext(null);
-export const Grid = props => {
+const GridImpl = props => {
   const {
     tokensOverride,
     children,
-    columnNum: columnNumProp,
-    gutter: gutterProp,
-    border: borderProp,
-    center: centerProp,
-    square: squareProp,
-    direction: directionProp,
-    reverse: reverseProp,
-    clickable: clickableProp,
-    iconSize: iconSizeProp,
+    columnNum: colNumP,
+    gutter: gutP,
+    border: borderP,
+    center: centerP,
+    square: sqP,
+    direction: dirP,
+    reverse: revP,
+    clickable: clkP,
+    iconSize: iconSzP,
     iconColor,
     style,
     ...rest
   } = props;
   const tokens = useGridTokens(tokensOverride);
   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 v = colNumP ?? tokens.defaults.columnNum;
+    return Number.isFinite(v) && v > 0 ? Math.floor(v) : tokens.defaults.columnNum;
+  }, [colNumP, 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 v = gutP ?? tokens.defaults.gutter;
+    return Number.isFinite(v) && v > 0 ? v : 0;
+  }, [gutP, tokens.defaults.gutter]);
+  const border = borderP ?? tokens.defaults.border;
+  const center = centerP ?? tokens.defaults.center;
+  const square = sqP ?? tokens.defaults.square;
+  const direction = dirP ?? tokens.defaults.direction;
+  const reverse = revP ?? tokens.defaults.reverse;
+  const clickable = clkP ?? 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 v = iconSzP ?? tokens.defaults.iconSize;
+    return Number.isFinite(v) && v > 0 ? v : tokens.defaults.iconSize;
+  }, [iconSzP, tokens.defaults.iconSize]);
+  const childrenArray = useMemo(() => React.Children.toArray(children).filter(c => /*#__PURE__*/React.isValidElement(c)), [children]);
   const showBorder = border && !gutter;
-  const borderColor = tokens.colors.border;
+  const borderClr = tokens.colors.border;
   const topBorder = useMemo(() => showBorder ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.border, tokens.layout.borderTop, createHairlineView({
       position: 'top',
-      color: borderColor,
+      color: borderClr,
       left: 0,
       right: 0,
       top: 0
     })]
-  }) : null, [borderColor, showBorder, tokens.layout.border, tokens.layout.borderTop]);
+  }) : null, [borderClr, 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,
+      color: borderClr,
       left: 0,
       right: 0,
       bottom: 0
     })]
-  }) : null, [borderColor, showBorder, tokens.layout.border, tokens.layout.borderBottom]);
-  const contextValue = useMemo(() => ({
+  }) : null, [borderClr, showBorder, tokens.layout.border, tokens.layout.borderBottom]);
+  const ctxVal = useMemo(() => ({
     columnNum,
     gutter,
     border,
@@ -72,26 +72,28 @@ export const Grid = props => {
     clickable,
     iconSize,
     iconColor,
-    count: childArray.length,
+    count: childrenArray.length,
     tokens
-  }), [border, center, childArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
+  }), [border, center, childrenArray.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 ? {
+  const ctrStyle = 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]);
+  const rendered = useMemo(() => childrenArray.map((child, i) => /*#__PURE__*/React.cloneElement(child, {
+    gridItemIndex: i,
+    key: child.key ?? i
+  })), [childrenArray]);
   return /*#__PURE__*/React.createElement(GridContext.Provider, {
-    value: contextValue
+    value: ctxVal
   }, /*#__PURE__*/React.createElement(View, _extends({
-    style: containerStyle
-  }, rest), topBorder, renderedChildren, bottomBorder));
+    accessibilityRole: 'grid',
+    style: ctrStyle
+  }, rest), topBorder, rendered, bottomBorder));
 };
+export const Grid = /*#__PURE__*/React.memo(GridImpl);
 Grid.displayName = 'Grid';