feat: add alignInGrid to SpatialNavigationView

bamlab · Feb 19, 2024 · b496427 · b496427
1 parent 43b091b
commit b496427
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/docs/api.md b/docs/api.md
@@ -155,6 +155,7 @@ The `SpatialNavigationView` component receives the following props:
 | Name        | Type                         | Default        | Description                                                                                                |
 | ----------- | ---------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------- |
 | `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | The orientation of the `SpatialNavigationNode`.                                                            |
+| `alignInGrid` | `boolean`                  | `false`        | Determines whether child lists should behave like a grid. |                                     |
 | `style`     | `ViewStyle`                  | `null`         | Style for the View. This can be any valid React Native style object.                                       |
 | `children`  | `ReactNode`                  | `null`         | Child elements of the component. They are expected to be one or multiple `SpatialNavigationNode` elements. |
 

diff --git a/packages/lib/src/spatial-navigation/components/View.tsx b/packages/lib/src/spatial-navigation/components/View.tsx
@@ -3,15 +3,17 @@ import { SpatialNavigationNode } from './Node';
 
 export const SpatialNavigationView = ({
   direction = 'horizontal',
+  alignInGrid = false,
   children,
   style,
 }: {
   children: React.ReactNode;
   style?: ViewStyle;
   direction: 'horizontal' | 'vertical';
+  alignInGrid?: boolean;
 }) => {
   return (
-    <SpatialNavigationNode orientation={direction}>
+    <SpatialNavigationNode orientation={direction} alignInGrid={alignInGrid}>
       <View
         style={[style, direction === 'horizontal' ? styles.viewHorizontal : styles.viewVertical]}
       >