@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap

@@ -0,0 +1,3462 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGroup correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    data={
+      [
+        {
+          "id": 0,
+          "title": "Content 0",
+        },
+        {
+          "id": 1,
+          "title": "Content 1",
+        },
+        {
+          "id": 2,
+          "title": "Content 2",
+        },
+        {
+          "id": 3,
+          "title": "Content 3",
+        },
+        {
+          "id": 4,
+          "title": "Content 4",
+        },
+        {
+          "id": 5,
+          "title": "Content 5",
+        },
+        {
+          "id": 6,
+          "title": "Content 6",
+        },
+        {
+          "id": 7,
+          "title": "Content 7",
+        },
+        {
+          "id": 8,
+          "title": "Content 8",
+        },
+        {
+          "id": 9,
+          "title": "Content 9",
+        },
+        {
+          "id": 10,
+          "title": "Content 10",
+        },
+        {
+          "id": 11,
+          "title": "Content 11",
+        },
+        {
+          "id": 12,
+          "title": "Content 12",
+        },
+        {
+          "id": 13,
+          "title": "Content 13",
+        },
+        {
+          "id": 14,
+          "title": "Content 14",
+        },
+        {
+          "id": 15,
+          "title": "Content 15",
+        },
+        {
+          "id": 16,
+          "title": "Content 16",
+        },
+        {
+          "id": 17,
+          "title": "Content 17",
+        },
+        {
+          "id": 18,
+          "title": "Content 18",
+        },
+        {
+          "id": 19,
+          "title": "Content 19",
+        },
+        {
+          "id": 20,
+          "title": "Content 20",
+        },
+        {
+          "id": 21,
+          "title": "Content 21",
+        },
+        {
+          "id": 22,
+          "title": "Content 22",
+        },
+        {
+          "id": 23,
+          "title": "Content 23",
+        },
+        {
+          "id": 24,
+          "title": "Content 24",
+        },
+        {
+          "id": 25,
+          "title": "Content 25",
+        },
+        {
+          "id": 26,
+          "title": "Content 26",
+        },
+        {
+          "id": 27,
+          "title": "Content 27",
+        },
+        {
+          "id": 28,
+          "title": "Content 28",
+        },
+        {
+          "id": 29,
+          "title": "Content 29",
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    scrollEventThrottle={100}
+    stickyHeaderIndices={[]}
+    testID="scrollable-with-fab"
+    viewabilityConfigCallbackPairs={[]}
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 0
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            0
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 1
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            1
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 2
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            2
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 3
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            3
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 4
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            4
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 5
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            5
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 6
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            6
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 7
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            7
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 8
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            8
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 9
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            9
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "height": 0,
+          }
+        }
+      />
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    style={
+      [
+        {
+          "alignItems": "flex-end",
+          "bottom": 0,
+          "justifyContent": "flex-end",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={{}}
+    >
+      <View
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        focusable={false}
+        onClick={[Function]}
+        onLayout={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "bottom": undefined,
+            "elevation": 3,
+            "flexDirection": "row",
+            "height": 64,
+            "justifyContent": "center",
+            "marginRight": 24,
+            "marginTop": 24,
+            "padding": 20,
+            "shadowColor": "#001f23",
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 4,
+            "transform": [
+              {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+        testID="fab"
+      >
+        <View
+          collapsable={false}
+          style={
+            {
+              "flexDirection": "row",
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {},
+                [
+                  {
+                    "alignItems": "center",
+                    "height": 24,
+                    "justifyContent": "center",
+                    "width": 24,
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          >
+            <HeroIcon
+              name="add"
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontSize": 16,
+                  },
+                  [
+                    {
+                      "color": "#ffffff",
+                      "lineHeight": 24,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              testID="styled-fab-icon"
+              themeIntent="text"
+              themeSize="xsmall"
+            />
+          </View>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                [
+                  {
+                    "color": "#ffffff",
+                    "marginHorizontal": 8,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Shout out
+          </Text>
+        </View>
+      </View>
+    </View>
+    <Modal
+      animationType="fade"
+      hardwareAccelerated={false}
+      statusBarTranslucent={true}
+      transparent={true}
+      visible={false}
+    />
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    data={
+      [
+        {
+          "id": 0,
+          "title": "Content 0",
+        },
+        {
+          "id": 1,
+          "title": "Content 1",
+        },
+        {
+          "id": 2,
+          "title": "Content 2",
+        },
+        {
+          "id": 3,
+          "title": "Content 3",
+        },
+        {
+          "id": 4,
+          "title": "Content 4",
+        },
+        {
+          "id": 5,
+          "title": "Content 5",
+        },
+        {
+          "id": 6,
+          "title": "Content 6",
+        },
+        {
+          "id": 7,
+          "title": "Content 7",
+        },
+        {
+          "id": 8,
+          "title": "Content 8",
+        },
+        {
+          "id": 9,
+          "title": "Content 9",
+        },
+        {
+          "id": 10,
+          "title": "Content 10",
+        },
+        {
+          "id": 11,
+          "title": "Content 11",
+        },
+        {
+          "id": 12,
+          "title": "Content 12",
+        },
+        {
+          "id": 13,
+          "title": "Content 13",
+        },
+        {
+          "id": 14,
+          "title": "Content 14",
+        },
+        {
+          "id": 15,
+          "title": "Content 15",
+        },
+        {
+          "id": 16,
+          "title": "Content 16",
+        },
+        {
+          "id": 17,
+          "title": "Content 17",
+        },
+        {
+          "id": 18,
+          "title": "Content 18",
+        },
+        {
+          "id": 19,
+          "title": "Content 19",
+        },
+        {
+          "id": 20,
+          "title": "Content 20",
+        },
+        {
+          "id": 21,
+          "title": "Content 21",
+        },
+        {
+          "id": 22,
+          "title": "Content 22",
+        },
+        {
+          "id": 23,
+          "title": "Content 23",
+        },
+        {
+          "id": 24,
+          "title": "Content 24",
+        },
+        {
+          "id": 25,
+          "title": "Content 25",
+        },
+        {
+          "id": 26,
+          "title": "Content 26",
+        },
+        {
+          "id": 27,
+          "title": "Content 27",
+        },
+        {
+          "id": 28,
+          "title": "Content 28",
+        },
+        {
+          "id": 29,
+          "title": "Content 29",
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    scrollEventThrottle={100}
+    stickyHeaderIndices={[]}
+    testID="scrollable-with-fab"
+    viewabilityConfigCallbackPairs={[]}
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 0
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            0
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 1
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            1
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 2
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            2
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 3
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            3
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 4
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            4
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 5
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            5
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 6
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            6
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 7
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            7
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 8
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            8
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          marginBottom="xxxxlarge"
+          style={
+            [
+              {
+                "marginBottom": 56,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Content 9
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Item 
+            9
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "height": 0,
+          }
+        }
+      />
+    </View>
+  </RCTScrollView>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onLayout={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "bottom": undefined,
+        "elevation": 3,
+        "flexDirection": "row",
+        "height": 64,
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "flexDirection": "row",
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {},
+            [
+              {
+                "alignItems": "center",
+                "height": 24,
+                "justifyContent": "center",
+                "width": 24,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <HeroIcon
+          name="speaker"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 16,
+              },
+              [
+                {
+                  "color": "#ffffff",
+                  "lineHeight": 24,
+                  "textAlign": "center",
+                  "textAlignVertical": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="styled-fab-icon"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            [
+              {
+                "color": "#ffffff",
+                "marginHorizontal": 8,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Shout out
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders ActionGroup correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    onScroll={[Function]}
+    scrollEventThrottle={100}
+    testID="scrollable-with-fab"
+  >
+    <View>
+      <View
+        justifyContent="space-between"
+        style={
+          [
+            {
+              "justifyContent": "space-between",
+            },
+            {
+              "height": 2000,
+            },
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Content 1
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Content 2
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Content 3
+        </Text>
+      </View>
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    style={
+      [
+        {
+          "alignItems": "flex-end",
+          "bottom": 0,
+          "justifyContent": "flex-end",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={{}}
+    >
+      <View
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        focusable={false}
+        onClick={[Function]}
+        onLayout={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "bottom": undefined,
+            "elevation": 3,
+            "flexDirection": "row",
+            "height": 64,
+            "justifyContent": "center",
+            "marginRight": 24,
+            "marginTop": 24,
+            "padding": 20,
+            "shadowColor": "#001f23",
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 4,
+            "transform": [
+              {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+        testID="fab"
+      >
+        <View
+          collapsable={false}
+          style={
+            {
+              "flexDirection": "row",
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {},
+                [
+                  {
+                    "alignItems": "center",
+                    "height": 24,
+                    "justifyContent": "center",
+                    "width": 24,
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          >
+            <HeroIcon
+              name="add"
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontSize": 16,
+                  },
+                  [
+                    {
+                      "color": "#ffffff",
+                      "lineHeight": 24,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              testID="styled-fab-icon"
+              themeIntent="text"
+              themeSize="xsmall"
+            />
+          </View>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                [
+                  {
+                    "color": "#ffffff",
+                    "marginHorizontal": 8,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Shout out
+          </Text>
+        </View>
+      </View>
+    </View>
+    <Modal
+      animationType="fade"
+      hardwareAccelerated={false}
+      statusBarTranslucent={true}
+      transparent={true}
+      visible={false}
+    />
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    onScroll={[Function]}
+    scrollEventThrottle={100}
+    testID="scrollable-with-fab"
+  >
+    <View>
+      <View
+        justifyContent="space-between"
+        style={
+          [
+            {
+              "justifyContent": "space-between",
+            },
+            {
+              "height": 2000,
+            },
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Content 1
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Content 2
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Content 3
+        </Text>
+      </View>
+    </View>
+  </RCTScrollView>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onLayout={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "bottom": undefined,
+        "elevation": 3,
+        "flexDirection": "row",
+        "height": 64,
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "flexDirection": "row",
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {},
+            [
+              {
+                "alignItems": "center",
+                "height": 24,
+                "justifyContent": "center",
+                "width": 24,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <HeroIcon
+          name="speaker"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 16,
+              },
+              [
+                {
+                  "color": "#ffffff",
+                  "lineHeight": 24,
+                  "textAlign": "center",
+                  "textAlignVertical": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="styled-fab-icon"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            [
+              {
+                "color": "#ffffff",
+                "marginHorizontal": 8,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Shout out
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders ActionGroup correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    data={
+      [
+        {
+          "data": [
+            "Content 1",
+            "Content 2",
+            "Content 3",
+            "Content 4",
+          ],
+          "title": "Title 1",
+        },
+        {
+          "data": [
+            "Content 5",
+            "Content 6",
+            "Content 7",
+          ],
+          "title": "Title 2",
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    renderItem={[Function]}
+    scrollEventThrottle={100}
+    stickyHeaderIndices={
+      [
+        0,
+        6,
+      ]
+    }
+    testID="scrollable-with-fab"
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            [
+              {
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              undefined,
+            ]
+          }
+          themeSize="medium"
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
+            <Text
+              allowFontScaling={false}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 14,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 22,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="small"
+            >
+              Title 1
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 1
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 2
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 3
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 4
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            [
+              {
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              undefined,
+            ]
+          }
+          themeSize="medium"
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
+            <Text
+              allowFontScaling={false}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 14,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 22,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="small"
+            >
+              Title 2
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 5
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 6
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 7
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "height": 0,
+          }
+        }
+      />
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    style={
+      [
+        {
+          "alignItems": "flex-end",
+          "bottom": 0,
+          "justifyContent": "flex-end",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={{}}
+    >
+      <View
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        focusable={false}
+        onClick={[Function]}
+        onLayout={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "bottom": undefined,
+            "elevation": 3,
+            "flexDirection": "row",
+            "height": 64,
+            "justifyContent": "center",
+            "marginRight": 24,
+            "marginTop": 24,
+            "padding": 20,
+            "shadowColor": "#001f23",
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 4,
+            "transform": [
+              {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+        testID="fab"
+      >
+        <View
+          collapsable={false}
+          style={
+            {
+              "flexDirection": "row",
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {},
+                [
+                  {
+                    "alignItems": "center",
+                    "height": 24,
+                    "justifyContent": "center",
+                    "width": 24,
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          >
+            <HeroIcon
+              name="add"
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontSize": 16,
+                  },
+                  [
+                    {
+                      "color": "#ffffff",
+                      "lineHeight": 24,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              testID="styled-fab-icon"
+              themeIntent="text"
+              themeSize="xsmall"
+            />
+          </View>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                [
+                  {
+                    "color": "#ffffff",
+                    "marginHorizontal": 8,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Shout out
+          </Text>
+        </View>
+      </View>
+    </View>
+    <Modal
+      animationType="fade"
+      hardwareAccelerated={false}
+      statusBarTranslucent={true}
+      transparent={true}
+      visible={false}
+    />
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    data={
+      [
+        {
+          "data": [
+            "Content 1",
+            "Content 2",
+            "Content 3",
+            "Content 4",
+          ],
+          "title": "Title 1",
+        },
+        {
+          "data": [
+            "Content 5",
+            "Content 6",
+            "Content 7",
+          ],
+          "title": "Title 2",
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    renderItem={[Function]}
+    scrollEventThrottle={100}
+    stickyHeaderIndices={
+      [
+        0,
+        6,
+      ]
+    }
+    testID="scrollable-with-fab"
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            [
+              {
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              undefined,
+            ]
+          }
+          themeSize="medium"
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
+            <Text
+              allowFontScaling={false}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 14,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 22,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="small"
+            >
+              Title 1
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 1
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 2
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 3
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 4
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            [
+              {
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              undefined,
+            ]
+          }
+          themeSize="medium"
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
+            <Text
+              allowFontScaling={false}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 14,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 22,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="small"
+            >
+              Title 2
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 5
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 6
+        </Text>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 42,
+                "letterSpacing": 0,
+                "lineHeight": 50,
+              },
+              {
+                "marginBottom": 56,
+              },
+            ]
+          }
+          themeIntent="body"
+          themeLevel="h1"
+          themeTypeface="neutral"
+        >
+          Content 7
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "height": 0,
+          }
+        }
+      />
+    </View>
+  </RCTScrollView>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onLayout={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "bottom": undefined,
+        "elevation": 3,
+        "flexDirection": "row",
+        "height": 64,
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "flexDirection": "row",
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {},
+            [
+              {
+                "alignItems": "center",
+                "height": 24,
+                "justifyContent": "center",
+                "width": 24,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <HeroIcon
+          name="speaker"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 16,
+              },
+              [
+                {
+                  "color": "#ffffff",
+                  "lineHeight": 24,
+                  "textAlign": "center",
+                  "textAlignVertical": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="styled-fab-icon"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            [
+              {
+                "color": "#ffffff",
+                "marginHorizontal": 8,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Shout out
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;