@hero-design/rn 8.24.0-alpha.1 → 8.24.0

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -1,5 +1,833 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f6f6f7",
+        "borderRadius": 8,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "padding": 8,
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "paddingRight": 12,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="sync"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        testID="undefined-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Move to Work
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderBottomColor": "#e8e9ea",
+            "borderBottomWidth": 1,
+            "paddingHorizontal": 0,
+          },
+          undefined,
+        ]
+      }
+      themeInsets={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <RCTScrollView
+        contentContainerStyle={
+          Object {
+            "paddingHorizontal": 8,
+          }
+        }
+        data={
+          Array [
+            Object {
+              "activeItem": "Work",
+              "component": <CustomScreen
+                title="Work Screen"
+              />,
+              "key": "work",
+            },
+            Object {
+              "activeItem": "speaker",
+              "component": <CustomScreen
+                title="Personal Screen"
+              />,
+              "inactiveItem": "speaker-outlined",
+              "key": "personal",
+            },
+            Object {
+              "activeItem": "home",
+              "badge": Object {
+                "type": "status",
+              },
+              "component": <CustomScreen
+                title="Home Screen"
+              />,
+              "inactiveItem": "home-outlined",
+              "key": "home",
+            },
+            Object {
+              "activeItem": "calendar",
+              "badge": Object {
+                "type": "counter",
+                "value": 50,
+              },
+              "component": <CustomScreen
+                title="Calendar Screen"
+              />,
+              "inactiveItem": "calendar-dates-outlined",
+              "key": "calendar",
+            },
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        horizontal={true}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        onScrollToIndexFailed={[Function]}
+        removeClippedSubviews={false}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={Array []}
+        viewabilityConfigCallbackPairs={Array []}
+      >
+        <View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "marginLeft": 0,
+                  "paddingVertical": 8,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "backgroundColor": "#ccd2d3",
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                    }
+                  }
+                  themeActive={true}
+                />
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View>
+                  <Text
+                    allowFontScaling={false}
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 14,
+                          "letterSpacing": 0.42,
+                          "lineHeight": 22,
+                        },
+                        Object {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    themeFontSize="medium"
+                    themeFontWeight="semi-bold"
+                    themeIntent="body"
+                    themeTypeface="neutral"
+                  >
+                    Work
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "backgroundColor": undefined,
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 0,
+                        },
+                      ],
+                    }
+                  }
+                  themeActive={false}
+                />
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View>
+                  <HeroIcon
+                    name="speaker-outlined"
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        Object {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-speaker-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "backgroundColor": undefined,
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 0,
+                        },
+                      ],
+                    }
+                  }
+                  themeActive={false}
+                />
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "paddingHorizontal": 4,
+                    }
+                  }
+                >
+                  <HeroIcon
+                    name="home-outlined"
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        Object {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-home-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      Object {
+                        "backgroundColor": "#de350b",
+                        "borderRadius": 999,
+                        "height": 8,
+                        "opacity": 1,
+                        "position": "absolute",
+                        "right": -2,
+                        "top": -2,
+                        "transform": Array [
+                          Object {
+                            "scale": 1,
+                          },
+                        ],
+                        "width": 8,
+                      }
+                    }
+                    themeIntent="danger"
+                  />
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "backgroundColor": undefined,
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 0,
+                        },
+                      ],
+                    }
+                  }
+                  themeActive={false}
+                />
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <HeroIcon
+                    name="calendar-dates-outlined"
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        Object {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-calendar-dates-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "backgroundColor": "#4568fb",
+                        "borderRadius": 999,
+                        "height": 20,
+                        "justifyContent": "center",
+                        "marginLeft": 4,
+                        "minWidth": 20,
+                        "opacity": 1,
+                        "paddingHorizontal": 8,
+                        "transform": Array [
+                          Object {
+                            "scale": 1,
+                          },
+                        ],
+                      }
+                    }
+                    themeIntent="info"
+                    themePadding="wideContent"
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      style={
+                        Array [
+                          Object {
+                            "color": "#001f23",
+                            "fontFamily": "BeVietnamPro-Regular",
+                            "fontSize": 14,
+                            "letterSpacing": 0.42,
+                            "lineHeight": 22,
+                          },
+                          Array [
+                            Object {
+                              "color": "#ffffff",
+                              "fontFamily": "BeVietnamPro-SemiBold",
+                              "fontSize": 12,
+                              "includeFontPadding": false,
+                              "lineHeight": 20,
+                              "textAlign": "center",
+                              "textAlignVertical": "center",
+                            },
+                            undefined,
+                          ],
+                        ]
+                      }
+                      themeFontSize="medium"
+                      themeFontWeight="regular"
+                      themeIntent="body"
+                      themeTypeface="neutral"
+                    >
+                      50
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+    </View>
+    <RNCViewPager
+      layoutDirection="ltr"
+      onMoveShouldSetResponderCapture={[Function]}
+      onPageScroll={[Function]}
+      onPageScrollStateChanged={[Function]}
+      onPageSelected={[Function]}
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text>
+            Work Screen
+             
+            focused
+          </Text>
+        </View>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                null,
+              ],
+            ]
+          }
+        >
+          <Text>
+            Personal Screen
+             
+            unfocused
+          </Text>
+        </View>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                null,
+              ],
+            ]
+          }
+        />
+      </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                null,
+              ],
+            ]
+          }
+        />
+      </View>
+    </RNCViewPager>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
 exports[`Tabs.Scroll renders correctly 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
@@ -133,16 +961,844 @@ exports[`Tabs.Scroll renders correctly 1`] = `
           Array [
             Object {
               "activeItem": "Work",
-              "component": <Text>
-                Work Screen
-              </Text>,
+              "component": <CustomScreen
+                title="Work Screen"
+              />,
+              "key": "work",
+            },
+            Object {
+              "activeItem": "speaker",
+              "component": <CustomScreen
+                title="Personal Screen"
+              />,
+              "inactiveItem": "speaker-outlined",
+              "key": "personal",
+            },
+            Object {
+              "activeItem": "home",
+              "badge": Object {
+                "type": "status",
+              },
+              "component": <CustomScreen
+                title="Home Screen"
+              />,
+              "inactiveItem": "home-outlined",
+              "key": "home",
+            },
+            Object {
+              "activeItem": "calendar",
+              "badge": Object {
+                "type": "counter",
+                "value": 50,
+              },
+              "component": <CustomScreen
+                title="Calendar Screen"
+              />,
+              "inactiveItem": "calendar-dates-outlined",
+              "key": "calendar",
+            },
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        horizontal={true}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        onScrollToIndexFailed={[Function]}
+        removeClippedSubviews={false}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={Array []}
+        viewabilityConfigCallbackPairs={Array []}
+      >
+        <View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "marginLeft": 0,
+                  "paddingVertical": 8,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "backgroundColor": "#ccd2d3",
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                    }
+                  }
+                  themeActive={true}
+                />
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View>
+                  <Text
+                    allowFontScaling={false}
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 14,
+                          "letterSpacing": 0.42,
+                          "lineHeight": 22,
+                        },
+                        Object {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    themeFontSize="medium"
+                    themeFontWeight="semi-bold"
+                    themeIntent="body"
+                    themeTypeface="neutral"
+                  >
+                    Work
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "backgroundColor": undefined,
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 0,
+                        },
+                      ],
+                    }
+                  }
+                  themeActive={false}
+                />
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View>
+                  <HeroIcon
+                    name="speaker-outlined"
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        Object {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-speaker-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "backgroundColor": undefined,
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 0,
+                        },
+                      ],
+                    }
+                  }
+                  themeActive={false}
+                />
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "paddingHorizontal": 4,
+                    }
+                  }
+                >
+                  <HeroIcon
+                    name="home-outlined"
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        Object {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-home-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      Object {
+                        "backgroundColor": "#de350b",
+                        "borderRadius": 999,
+                        "height": 8,
+                        "opacity": 1,
+                        "position": "absolute",
+                        "right": -2,
+                        "top": -2,
+                        "transform": Array [
+                          Object {
+                            "scale": 1,
+                          },
+                        ],
+                        "width": 8,
+                      }
+                    }
+                    themeIntent="danger"
+                  />
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "backgroundColor": undefined,
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 0,
+                        },
+                      ],
+                    }
+                  }
+                  themeActive={false}
+                />
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <HeroIcon
+                    name="calendar-dates-outlined"
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        Object {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-calendar-dates-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "backgroundColor": "#4568fb",
+                        "borderRadius": 999,
+                        "height": 20,
+                        "justifyContent": "center",
+                        "marginLeft": 4,
+                        "minWidth": 20,
+                        "opacity": 1,
+                        "paddingHorizontal": 8,
+                        "transform": Array [
+                          Object {
+                            "scale": 1,
+                          },
+                        ],
+                      }
+                    }
+                    themeIntent="info"
+                    themePadding="wideContent"
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      style={
+                        Array [
+                          Object {
+                            "color": "#001f23",
+                            "fontFamily": "BeVietnamPro-Regular",
+                            "fontSize": 14,
+                            "letterSpacing": 0.42,
+                            "lineHeight": 22,
+                          },
+                          Array [
+                            Object {
+                              "color": "#ffffff",
+                              "fontFamily": "BeVietnamPro-SemiBold",
+                              "fontSize": 12,
+                              "includeFontPadding": false,
+                              "lineHeight": 20,
+                              "textAlign": "center",
+                              "textAlignVertical": "center",
+                            },
+                            undefined,
+                          ],
+                        ]
+                      }
+                      themeFontSize="medium"
+                      themeFontWeight="regular"
+                      themeIntent="body"
+                      themeTypeface="neutral"
+                    >
+                      50
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+    </View>
+    <RNCViewPager
+      layoutDirection="ltr"
+      onMoveShouldSetResponderCapture={[Function]}
+      onPageScroll={[Function]}
+      onPageScrollStateChanged={[Function]}
+      onPageSelected={[Function]}
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text>
+            Work Screen
+             
+            focused
+          </Text>
+        </View>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                null,
+              ],
+            ]
+          }
+        >
+          <Text>
+            Personal Screen
+             
+            unfocused
+          </Text>
+        </View>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                null,
+              ],
+            ]
+          }
+        />
+      </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                null,
+              ],
+            ]
+          }
+        />
+      </View>
+    </RNCViewPager>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`useIsFocused renders correctly 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f6f6f7",
+        "borderRadius": 8,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "padding": 8,
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "paddingRight": 12,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="sync"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        testID="undefined-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Move to Work
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderBottomColor": "#e8e9ea",
+            "borderBottomWidth": 1,
+            "paddingHorizontal": 0,
+          },
+          undefined,
+        ]
+      }
+      themeInsets={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <RCTScrollView
+        contentContainerStyle={
+          Object {
+            "paddingHorizontal": 8,
+          }
+        }
+        data={
+          Array [
+            Object {
+              "activeItem": "Work",
+              "component": <CustomScreen
+                title="Work Screen"
+              />,
               "key": "work",
             },
             Object {
               "activeItem": "speaker",
-              "component": <Text>
-                Personal Screen
-              </Text>,
+              "component": <CustomScreen
+                title="Personal Screen"
+              />,
               "inactiveItem": "speaker-outlined",
               "key": "personal",
             },
@@ -151,9 +1807,9 @@ exports[`Tabs.Scroll renders correctly 1`] = `
               "badge": Object {
                 "type": "status",
               },
-              "component": <Text>
-                Home Screen
-              </Text>,
+              "component": <CustomScreen
+                title="Home Screen"
+              />,
               "inactiveItem": "home-outlined",
               "key": "home",
             },
@@ -163,9 +1819,9 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                 "type": "counter",
                 "value": 50,
               },
-              "component": <Text>
-                Calendar Screen
-              </Text>,
+              "component": <CustomScreen
+                title="Calendar Screen"
+              />,
               "inactiveItem": "calendar-dates-outlined",
               "key": "calendar",
             },
@@ -695,16 +2351,17 @@ exports[`Tabs.Scroll renders correctly 1`] = `
       >
         <View
           accessibilityElementsHidden={false}
-          collapsable={false}
           importantForAccessibility="auto"
-          pointerEvents="auto"
           style={
             Array [
               Object {
                 "flex": 1,
               },
               Array [
-                undefined,
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
                 Object {
                   "bottom": 0,
                   "left": 0,
@@ -718,6 +2375,8 @@ exports[`Tabs.Scroll renders correctly 1`] = `
         >
           <Text>
             Work Screen
+             
+            focused
           </Text>
         </View>
       </View>
@@ -735,29 +2394,26 @@ exports[`Tabs.Scroll renders correctly 1`] = `
       >
         <View
           accessibilityElementsHidden={true}
-          collapsable={false}
           importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "flex": 1,
               },
               Array [
-                undefined,
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "flex": 1,
+                  "overflow": "hidden",
                 },
+                null,
               ],
             ]
           }
         >
           <Text>
             Personal Screen
+             
+            unfocused
           </Text>
         </View>
       </View>
@@ -775,31 +2431,22 @@ exports[`Tabs.Scroll renders correctly 1`] = `
       >
         <View
           accessibilityElementsHidden={true}
-          collapsable={false}
           importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "flex": 1,
               },
               Array [
-                undefined,
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "flex": 1,
+                  "overflow": "hidden",
                 },
+                null,
               ],
             ]
           }
-        >
-          <Text>
-            Home Screen
-          </Text>
-        </View>
+        />
       </View>
       <View
         collapsable={false}
@@ -815,31 +2462,22 @@ exports[`Tabs.Scroll renders correctly 1`] = `
       >
         <View
           accessibilityElementsHidden={true}
-          collapsable={false}
           importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "flex": 1,
               },
               Array [
-                undefined,
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "flex": 1,
+                  "overflow": "hidden",
                 },
+                null,
               ],
             ]
           }
-        >
-          <Text>
-            Calendar Screen
-          </Text>
-        </View>
+        />
       </View>
     </RNCViewPager>
   </View>