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

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

@@ -1,2497 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tabs.ScrollV2 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.ScrollV2 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": <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": <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,
-              ],
-            ]
-          }
-        >
-          <Text>
-            Home 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,
-              ],
-            ]
-          }
-        >
-          <Text>
-            Calendar Screen
-             
-            unfocused
-          </Text>
-        </View>
-      </View>
-    </RNCViewPager>
-  </View>
-</RNCSafeAreaProvider>
-`;