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

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

@@ -462,29 +462,1216 @@ exports[`Tabs renders correctly 1`] = `
       >
         <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,
+        }
+      }
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                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
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View>
+              <Text
+                allowFontScaling={false}
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Personal
+              </Text>
+            </View>
+          </View>
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Object {
+                  "paddingHorizontal": 4,
+                }
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Home
+              </Text>
+              <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
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Money
+              </Text>
+              <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
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "bottom": 0,
+              "height": 2,
+              "position": "absolute",
+              "transform": Array [
+                Object {
+                  "translateX": 0,
+                },
+              ],
+              "width": 0,
+            }
+          }
+          themeWidth={0}
+        />
+      </View>
+    </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: xxxxxx 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,
+        }
+      }
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View>
+              <Text
+                allowFontScaling={false}
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Work
+              </Text>
+            </View>
+          </View>
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                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"
+              >
+                Personal
+              </Text>
+            </View>
+          </View>
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Object {
+                  "paddingHorizontal": 4,
+                }
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Home
+              </Text>
+              <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
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Money
+              </Text>
+              <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
           collapsable={false}
-          importantForAccessibility="auto"
-          pointerEvents="auto"
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "bottom": 0,
+              "height": 2,
+              "position": "absolute",
+              "transform": Array [
+                Object {
+                  "translateX": 0,
+                },
+              ],
+              "width": 0,
+            }
+          }
+          themeWidth={0}
+        />
+      </View>
+    </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={true}
+          importantForAccessibility="no-hide-descendants"
           style={
             Array [
               Object {
                 "flex": 1,
               },
               Array [
-                undefined,
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "flex": 1,
+                  "overflow": "hidden",
                 },
+                null,
               ],
             ]
           }
         >
           <Text>
             Work Screen
+             
+            unfocused
           </Text>
         </View>
       </View>
@@ -501,17 +1688,18 @@ exports[`Tabs renders correctly 1`] = `
         }
       >
         <View
-          accessibilityElementsHidden={true}
-          collapsable={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
           style={
             Array [
               Object {
                 "flex": 1,
               },
               Array [
-                undefined,
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
                 Object {
                   "bottom": 0,
                   "left": 0,
@@ -525,6 +1713,8 @@ exports[`Tabs renders correctly 1`] = `
         >
           <Text>
             Personal Screen
+             
+            focused
           </Text>
         </View>
       </View>
@@ -542,29 +1732,26 @@ exports[`Tabs 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
+             
+            unfocused
           </Text>
         </View>
       </View>
@@ -582,29 +1769,26 @@ exports[`Tabs 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>
             Money Screen
+             
+            unfocused
           </Text>
         </View>
       </View>