From 37f29a481cddf4cb64445a7d4ddece902932ad4b Mon Sep 17 00:00:00 2001
From: JulienIzz <julien.izzillo@gmail.com>
Date: Fri, 2 Feb 2024 10:51:29 +0100
Subject: [PATCH] test: testing virtualized grid

---
 .../SpatialNavigationVirtualizedGrid.test.tsx |  143 +++
 ...ialNavigationVirtualizedGrid.test.tsx.snap | 1133 +++++++++++++++++
 2 files changed, 1276 insertions(+)
 create mode 100644 packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedGrid.test.tsx
 create mode 100644 packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedGrid.test.tsx.snap

diff --git a/packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedGrid.test.tsx b/packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedGrid.test.tsx
new file mode 100644
index 00000000..85ae4c24
--- /dev/null
+++ b/packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedGrid.test.tsx
@@ -0,0 +1,143 @@
+import { RenderResult, cleanup, render, screen } from '@testing-library/react-native';
+import { ItemWithIndex } from '../virtualizedList/VirtualizedList';
+import { PropsTestButton, TestButton } from './TestButton';
+import { SpatialNavigationRoot } from '../Root';
+import './helpers/configureTestRemoteControl';
+
+import { DefaultFocus } from '../../context/DefaultFocusContext';
+import { SpatialNavigationVirtualizedGrid } from '../virtualizedGrid/SpatialNavigationVirtualizedGrid';
+import testRemoteControlManager from './helpers/testRemoteControlManager';
+
+export const expectButtonToHaveFocus = (component: RenderResult, text: string) => {
+  const element = component.getByRole('button', { name: text });
+  expect(element).toHaveAccessibilityState({ selected: true });
+};
+
+describe('SpatialNavigationVirtualizedGrid', () => {
+  afterEach(cleanup);
+
+  const renderItem = ({ item }: { item: PropsTestButton & ItemWithIndex }) => (
+    <TestButton title={item.title} onSelect={item.onSelect} />
+  );
+
+  function createDataArray(numberOfItems: number) {
+    const data = [];
+    for (let i = 0; i < numberOfItems; i++) {
+      data.push({
+        title: `button ${i + 1}`,
+        onSelect: () => undefined,
+        index: i,
+      });
+    }
+    return data;
+  }
+
+  const renderGrid = () =>
+    render(
+      <SpatialNavigationRoot>
+        <DefaultFocus>
+          <SpatialNavigationVirtualizedGrid
+            renderItem={renderItem}
+            data={createDataArray(19)}
+            itemHeight={100}
+            numberOfRenderedRows={5}
+            numberOfRowsVisibleOnScreen={3}
+            numberOfColumns={3}
+          />
+        </DefaultFocus>
+      </SpatialNavigationRoot>,
+    );
+
+  it('renders the correct number of item', () => {
+    const component = renderGrid();
+
+    expect(screen).toMatchSnapshot();
+
+    expect(screen.getByText('button 1')).toBeTruthy();
+    expectButtonToHaveFocus(component, 'button 1');
+    expect(screen.getByText('button 2')).toBeTruthy();
+    expect(screen.getByText('button 3')).toBeTruthy();
+    expect(screen.getByText('button 4')).toBeTruthy();
+    expect(screen.getByText('button 5')).toBeTruthy();
+    expect(screen.getByText('button 6')).toBeTruthy();
+    expect(screen.getByText('button 7')).toBeTruthy();
+    expect(screen.getByText('button 8')).toBeTruthy();
+    expect(screen.getByText('button 9')).toBeTruthy();
+    expect(screen.getByText('button 10')).toBeTruthy();
+    expect(screen.getByText('button 11')).toBeTruthy();
+    expect(screen.getByText('button 12')).toBeTruthy();
+    expect(screen.getByText('button 13')).toBeTruthy();
+    expect(screen.getByText('button 14')).toBeTruthy();
+    expect(screen.getByText('button 15')).toBeTruthy();
+    expect(screen.queryByText('button 16')).toBeFalsy();
+  });
+
+  it('renders the correct number of item', () => {
+    const component = renderGrid();
+
+    testRemoteControlManager.handleRight();
+
+    expect(screen.getByText('button 1')).toBeTruthy();
+    expect(screen.getByText('button 2')).toBeTruthy();
+    expectButtonToHaveFocus(component, 'button 2');
+    expect(screen.getByText('button 3')).toBeTruthy();
+    expect(screen.getByText('button 4')).toBeTruthy();
+    expect(screen.getByText('button 5')).toBeTruthy();
+    expect(screen.getByText('button 6')).toBeTruthy();
+    expect(screen.getByText('button 7')).toBeTruthy();
+    expect(screen.getByText('button 8')).toBeTruthy();
+    expect(screen.getByText('button 9')).toBeTruthy();
+    expect(screen.getByText('button 10')).toBeTruthy();
+    expect(screen.getByText('button 11')).toBeTruthy();
+    expect(screen.getByText('button 12')).toBeTruthy();
+    expect(screen.getByText('button 13')).toBeTruthy();
+    expect(screen.getByText('button 14')).toBeTruthy();
+    expect(screen.getByText('button 15')).toBeTruthy();
+    expect(screen.queryByText('button 16')).toBeFalsy();
+
+    testRemoteControlManager.handleDown();
+
+    expect(screen.getByText('button 1')).toBeTruthy();
+    expect(screen.getByText('button 2')).toBeTruthy();
+    expect(screen.getByText('button 3')).toBeTruthy();
+    expect(screen.getByText('button 4')).toBeTruthy();
+    expect(screen.getByText('button 5')).toBeTruthy();
+    expectButtonToHaveFocus(component, 'button 5');
+    expect(screen.getByText('button 6')).toBeTruthy();
+    expect(screen.getByText('button 7')).toBeTruthy();
+    expect(screen.getByText('button 8')).toBeTruthy();
+    expect(screen.getByText('button 9')).toBeTruthy();
+    expect(screen.getByText('button 10')).toBeTruthy();
+    expect(screen.getByText('button 11')).toBeTruthy();
+    expect(screen.getByText('button 12')).toBeTruthy();
+    expect(screen.getByText('button 13')).toBeTruthy();
+    expect(screen.getByText('button 14')).toBeTruthy();
+    expect(screen.getByText('button 15')).toBeTruthy();
+    expect(screen.queryByText('button 16')).toBeFalsy();
+
+    testRemoteControlManager.handleDown();
+
+    expect(screen.queryByText('button 1')).toBeFalsy();
+    expect(screen.queryByText('button 2')).toBeFalsy();
+    expect(screen.queryByText('button 3')).toBeFalsy();
+    expect(screen.getByText('button 4')).toBeTruthy();
+    expect(screen.getByText('button 5')).toBeTruthy();
+    expect(screen.getByText('button 6')).toBeTruthy();
+    expect(screen.getByText('button 7')).toBeTruthy();
+    expect(screen.getByText('button 8')).toBeTruthy();
+    expectButtonToHaveFocus(component, 'button 8');
+    expect(screen.getByText('button 9')).toBeTruthy();
+    expect(screen.getByText('button 10')).toBeTruthy();
+    expect(screen.getByText('button 11')).toBeTruthy();
+    expect(screen.getByText('button 12')).toBeTruthy();
+    expect(screen.getByText('button 13')).toBeTruthy();
+    expect(screen.getByText('button 14')).toBeTruthy();
+    expect(screen.getByText('button 15')).toBeTruthy();
+    expect(screen.getByText('button 16')).toBeTruthy();
+    expect(screen.getByText('button 17')).toBeTruthy();
+    expect(screen.getByText('button 18')).toBeTruthy();
+    expect(screen.queryByText('button 19')).toBeFalsy();
+
+    expect(screen).toMatchSnapshot();
+  });
+});
diff --git a/packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedGrid.test.tsx.snap b/packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedGrid.test.tsx.snap
new file mode 100644
index 00000000..7d262b45
--- /dev/null
+++ b/packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedGrid.test.tsx.snap
@@ -0,0 +1,1133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpatialNavigationVirtualizedGrid renders the correct number of item 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "flex": 1,
+      "flexDirection": "column",
+      "height": 1334,
+      "transform": [
+        {
+          "translateY": 0,
+        },
+      ],
+    }
+  }
+>
+  <View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 0,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 1"
+            accessibilityLabel="button 1"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            isFocused={true}
+            style={
+              [
+                {
+                  "backgroundColor": "red",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 1
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 2"
+            accessibilityLabel="button 2"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 2
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 3"
+            accessibilityLabel="button 3"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 3
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 100,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 4"
+            accessibilityLabel="button 4"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 4
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 5"
+            accessibilityLabel="button 5"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 5
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 6"
+            accessibilityLabel="button 6"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 6
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 200,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 7"
+            accessibilityLabel="button 7"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 7
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 8"
+            accessibilityLabel="button 8"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 8
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 9"
+            accessibilityLabel="button 9"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 9
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 300,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 10"
+            accessibilityLabel="button 10"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 10
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 11"
+            accessibilityLabel="button 11"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 11
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 12"
+            accessibilityLabel="button 12"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 12
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 400,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 13"
+            accessibilityLabel="button 13"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 13
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 14"
+            accessibilityLabel="button 14"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 14
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 15"
+            accessibilityLabel="button 15"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 15
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`SpatialNavigationVirtualizedGrid renders the correct number of item 2`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "flex": 1,
+      "flexDirection": "column",
+      "height": 1534,
+      "transform": [
+        {
+          "translateY": 0,
+        },
+      ],
+    }
+  }
+>
+  <View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 100,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 4"
+            accessibilityLabel="button 4"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 4
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 5"
+            accessibilityLabel="button 5"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 5
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 6"
+            accessibilityLabel="button 6"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 6
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 200,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 7"
+            accessibilityLabel="button 7"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 7
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 8"
+            accessibilityLabel="button 8"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            isFocused={true}
+            style={
+              [
+                {
+                  "backgroundColor": "red",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 8
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 9"
+            accessibilityLabel="button 9"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 9
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 300,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 10"
+            accessibilityLabel="button 10"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 10
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 11"
+            accessibilityLabel="button 11"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 11
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 12"
+            accessibilityLabel="button 12"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 12
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 400,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 13"
+            accessibilityLabel="button 13"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 13
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 14"
+            accessibilityLabel="button 14"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 14
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 15"
+            accessibilityLabel="button 15"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 15
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateY": 500,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        style={
+          [
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            accessibilityHint="button 16"
+            accessibilityLabel="button 16"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 16
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 17"
+            accessibilityLabel="button 17"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 17
+            </Text>
+          </View>
+        </View>
+        <View>
+          <View
+            accessibilityHint="button 18"
+            accessibilityLabel="button 18"
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            isFocused={false}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderRadius": 100,
+                  "padding": 6,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text>
+              button 18
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;