@hero-design/rn 7.1.1 → 7.1.3-alpha2

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,1019 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionGroup has active false 1`] = `
+<View
+  pointerEvents="box-none"
+  style={
+    Object {
+      "alignItems": "flex-end",
+      "bottom": 0,
+      "justifyContent": "flex-end",
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    pointerEvents="box-none"
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    testID="back-drop"
+  />
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "justifyContent": "flex-end",
+        "transform": Array [
+          Object {
+            "translateX": 400,
+          },
+        ],
+        "width": "70%",
+      }
+    }
+    testID="action-group"
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "Be Vietnam Pro Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Object {
+            "fontFamily": "Be Vietnam Pro SemiBold",
+            "fontSize": 24,
+            "lineHeight": 32,
+            "marginBottom": 24,
+            "marginRight": 24,
+            "textAlign": "right",
+          },
+        ]
+      }
+      testID="header-text"
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      What would you like to create?
+    </Text>
+    <View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="speaker-action-item"
+      >
+        <HeroIcon
+          name="speaker"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Give shout out
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="target-action-item"
+      >
+        <HeroIcon
+          name="target"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Goal
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="plane-action-item"
+      >
+        <HeroIcon
+          name="plane"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Leave request
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="health-bag-action-item"
+      >
+        <HeroIcon
+          name="health-bag"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Safety incident
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="clock-action-item"
+      >
+        <HeroIcon
+          name="clock"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Timesheets
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#292a2b",
+          "borderBottomLeftRadius": 999,
+          "borderBottomRightRadius": 999,
+          "borderTopLeftRadius": 999,
+          "borderTopRightRadius": 999,
+          "height": 64,
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "width": 64,
+        },
+        Object {
+          "alignSelf": "flex-end",
+          "marginRight": 24,
+          "marginTop": 24,
+        },
+      ]
+    }
+    testID="fab"
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "rotate": "0deg",
+            },
+          ],
+        }
+      }
+    >
+      <HeroIcon
+        name="add"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            },
+            Object {
+              "color": "#ffffff",
+              "fontSize": 24,
+            },
+            Object {},
+          ]
+        }
+        testID="animated-fab-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`ActionGroup has active true 1`] = `
+<View
+  pointerEvents="box-none"
+  style={
+    Object {
+      "alignItems": "flex-end",
+      "bottom": 0,
+      "justifyContent": "flex-end",
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    pointerEvents="auto"
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.5,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    testID="back-drop"
+  />
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "justifyContent": "flex-end",
+        "transform": Array [
+          Object {
+            "translateX": 0,
+          },
+        ],
+        "width": "70%",
+      }
+    }
+    testID="action-group"
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "Be Vietnam Pro Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Object {
+            "fontFamily": "Be Vietnam Pro SemiBold",
+            "fontSize": 24,
+            "lineHeight": 32,
+            "marginBottom": 24,
+            "marginRight": 24,
+            "textAlign": "right",
+          },
+        ]
+      }
+      testID="header-text"
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      What would you like to create?
+    </Text>
+    <View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="speaker-action-item"
+      >
+        <HeroIcon
+          name="speaker"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Give shout out
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="target-action-item"
+      >
+        <HeroIcon
+          name="target"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Goal
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="plane-action-item"
+      >
+        <HeroIcon
+          name="plane"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Leave request
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="health-bag-action-item"
+      >
+        <HeroIcon
+          name="health-bag"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Safety incident
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        nativeID="animatedComponent"
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-end",
+            "backgroundColor": "#d1d9fe",
+            "borderBottomLeftRadius": 999,
+            "borderBottomRightRadius": 999,
+            "borderTopLeftRadius": 999,
+            "borderTopRightRadius": 999,
+            "flexDirection": "row",
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 24,
+            "marginTop": 8,
+            "opacity": 1,
+            "overflow": "hidden",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+          }
+        }
+        testID="clock-action-item"
+      >
+        <HeroIcon
+          name="clock"
+          style={
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            }
+          }
+          themeIntent="text"
+          themeSize="medium"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Object {
+                "fontFamily": "Be Vietnam Pro Regular",
+                "fontSize": 14,
+                "lineHeight": 22,
+                "paddingLeft": 8,
+              },
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Timesheets
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#292a2b",
+          "borderBottomLeftRadius": 999,
+          "borderBottomRightRadius": 999,
+          "borderTopLeftRadius": 999,
+          "borderTopRightRadius": 999,
+          "height": 64,
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "width": 64,
+        },
+        Object {
+          "alignSelf": "flex-end",
+          "marginRight": 24,
+          "marginTop": 24,
+        },
+      ]
+    }
+    testID="fab"
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "rotate": "-45deg",
+            },
+          ],
+        }
+      }
+    >
+      <HeroIcon
+        name="add"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            },
+            Object {
+              "color": "#ffffff",
+              "fontSize": 24,
+            },
+            Object {},
+          ]
+        }
+        testID="animated-fab-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+  </View>
+</View>
+`;