react-native-safe-area-context#useSafeAreaInsets TypeScript Examples

WithoutImage = () => {
  // hooks
  const { goBack } = useNavigation();
  const safeInsets = useSafeAreaInsets();

  // variable
  const insets = useMemo(
    () => ({
      top: Math.max(safeInsets.top, 20),
      bottom: Math.max(safeInsets.bottom, 20),
      left: Math.max(safeInsets.left, 20),
      right: Math.max(safeInsets.right, 20),
    }),
    [safeInsets]
  );

  // callbacks
  const handleOnClosePress = useCallback(() => goBack(), [goBack]);

  return (
    <>
      <StatusBar barStyle="light-content" />
      <PaperOnboarding
        data={data}
        safeInsets={insets}
        onCloseButtonPress={handleOnClosePress}
      />
    </>
  );
}

Scrollable: FC<LayoutProps> = ({
  toast,
  backgroundColor,
  refresh,
  scrollViewRef,
  safeArea = true,
  children,
  contentContainerStyle,
  scrollableStyle = {},
  importantForAccessibility = 'auto'
}) => {
  const insets = useSafeAreaInsets();
  const refreshControl = refresh && <RefreshControl {...refresh} />;

  return (
    <Container style={[!!backgroundColor && {backgroundColor}]}>
      <ScrollView
        ref={scrollViewRef}
        keyboardShouldPersistTaps="always"
        style={scrollableStyle}
        importantForAccessibility={importantForAccessibility}
        contentContainerStyle={[
          styles.scrollView,
          {paddingBottom: (safeArea ? insets.bottom : 0) + SPACING_BOTTOM},
          contentContainerStyle
        ]}
        refreshControl={refreshControl}>
        {toast && (
          <>
            {toast}
            <Spacing s={8} />
          </>
        )}
        {children}
      </ScrollView>
    </Container>
  );
}

Header: React.FC<Props> = (props) => {

    const insets = useSafeAreaInsets()
    const languageSelector = (state: WalletState) => state.language
    const language = useSelector(languageSelector)

    return (
        <View style={styles.container}>
            <View style={{ marginTop: insets.top, height: 56 }}>
                {props.screen == getTranslated(language).getting_started &&
                    <TouchableOpacity onPress={props.action}>
                        <View style={styles.changeLanguageView}>
                            <Text style={styles.changeLanguageText}>{getTranslated(language).change_language}:</Text>
                            <View style={styles.currentLanguageView}><Text style={styles.currentLanguageText}>{props.currentLanguage}</Text></View>
                        </View>
                    </TouchableOpacity>
                }
                {props.screen != getTranslated(language).getting_started &&
                    <View style={styles.contentView}>
                        <TouchableOpacity disabled={Platform.OS == 'android'} onPress={props.action}>
                            <View style={styles.textContain}>
                                {Platform.OS == 'ios' && props.screen != getTranslated(language).receive && props.screen != getTranslated(language).settings &&
                                    <Image style={styles.arrow} source={require('../assets/images/arrow.png')} />
                                }
                                <Text style={styles.headingText}>{props.screen}</Text>
                            </View>
                        </TouchableOpacity>
                        {(props.screen == getTranslated(language).create_new || props.screen == getTranslated(language).seed_phrase) &&
                            <View style={styles.stepContain}>
                                <Text style={styles.stepText}>Step </Text>
                                <Text style={styles.stepHightlight}>{props.screen == getTranslated(language).seed_phrase ? "2" : "1"}</Text><Text style={styles.stepText}>/2</Text>
                            </View>
                        }
                    </View>
                }
            </View>
        </View>
    );
}

Loading: FC = () => {
  const {t} = useTranslation();
  const insets = useSafeAreaInsets();
  return (
    <View
      style={[
        styles.container,
        {paddingBottom: insets.bottom, paddingTop: insets.top}
      ]}>
      <StatusBar barStyle="light-content" />
      <View style={styles.bg} />
      <Spacing s={50} />
      <Image
        style={styles.center}
        resizeMode="contain"
        source={require('../../assets/images/logo/logo.png')}
        accessible
        accessibilityRole="text"
        accessibilityHint={t('common:name')}
        accessibilityIgnoresInvertColors={false}
      />
      <Spacing s={64} />
      <Spinner animation="fade" visible overlayColor={'transparent'} />
    </View>
  );
}

WithStylingScreen = () => {
  // hooks
  const { goBack } = useNavigation();
  const safeInsets = useSafeAreaInsets();

  // variable
  const insets = useMemo(
    () => ({
      top: Math.max(safeInsets.top, 20),
      bottom: Math.max(safeInsets.bottom, 20),
      left: Math.max(safeInsets.left, 20),
      right: Math.max(safeInsets.right, 20),
    }),
    [safeInsets]
  );

  // callbacks
  const handleOnClosePress = useCallback(() => goBack(), [goBack]);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <PaperOnboarding
        data={data}
        titleStyle={styles.title}
        descriptionStyle={styles.description}
        closeButtonTextStyle={styles.closeTextStyle}
        indicatorBorderColor="black"
        indicatorBackgroundColor="black"
        indicatorSize={24}
        safeInsets={insets}
        onCloseButtonPress={handleOnClosePress}
      />
    </>
  );
}

WithoutIconScreen = () => {
  // hooks
  const { goBack } = useNavigation();
  const safeInsets = useSafeAreaInsets();

  // variable
  const insets = useMemo(
    () => ({
      top: Math.max(safeInsets.top, 20),
      bottom: Math.max(safeInsets.bottom, 20),
      left: Math.max(safeInsets.left, 20),
      right: Math.max(safeInsets.right, 20),
    }),
    [safeInsets]
  );

  // callbacks
  const handleOnClosePress = useCallback(() => goBack(), [goBack]);

  return (
    <>
      <StatusBar barStyle="light-content" />
      <PaperOnboarding
        data={data}
        safeInsets={insets}
        indicatorSize={25}
        closeButtonText="skip"
        onCloseButtonPress={handleOnClosePress}
      />
    </>
  );
}

Logo: FC = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.container, {paddingTop: insets.top + 50}]}>
      <Image
        source={LogoImage}
        style={styles.logo}
        accessibilityIgnoresInvertColors={false}
      />
    </View>
  );
}

HorizontalGesture = () => {
  // hooks
  const { goBack } = useNavigation();
  const safeInsets = useSafeAreaInsets();

  // variable
  const insets = useMemo(
    () => ({
      top: Math.max(safeInsets.top, 20),
      bottom: Math.max(safeInsets.bottom, 20),
      left: Math.max(safeInsets.left, 20),
      right: Math.max(safeInsets.right, 20),
    }),
    [safeInsets]
  );

  // callbacks
  const handleOnClosePress = useCallback(() => goBack(), [goBack]);

  return (
    <>
      <StatusBar barStyle="light-content" />
      <PaperOnboarding
        data={data}
        safeInsets={insets}
        onCloseButtonPress={handleOnClosePress}
      />
    </>
  );
}

VerticalGestureScreen = () => {
  // hooks
  const { goBack } = useNavigation();
  const safeInsets = useSafeAreaInsets();

  // variable
  const insets = useMemo(
    () => ({
      top: Math.max(safeInsets.top, 20),
      bottom: Math.max(safeInsets.bottom, 20),
      left: Math.max(safeInsets.left, 20),
      right: Math.max(safeInsets.right, 20),
    }),
    [safeInsets]
  );

  // callbacks
  const handleOnClosePress = useCallback(() => goBack(), [goBack]);

  return (
    <>
      <StatusBar barStyle="light-content" />
      <PaperOnboarding
        data={data}
        direction="vertical"
        safeInsets={insets}
        onCloseButtonPress={handleOnClosePress}
      />
    </>
  );
}

RootScreen = () => {
  // hooks
  const { navigate } = useNavigation();
  const safeInsets = useSafeAreaInsets();

  // variables
  const author = useMemo(
    () => ({
      username: 'Mo Gorhom',
      url: 'https://gorhom.dev',
    }),
    []
  );

  // callbacks
  const handleOnExamplePress = (slug: string) => {
    navigate(slug);
  };

  // renders
  return (
    <Showcase
      theme="dark"
      name="Sticky Item"
      description={description}
      version={version}
      author={author}
      data={examples}
      safeInsets={safeInsets}
      handleOnPress={handleOnExamplePress}
    />
  );
}

Footer = ({
  canGoBack,
  goBack,
  canGoForward,
  goForward,
  reload,
  addTab,
  manageTabs,
  height,
  tabs,
}: Props) => {
  const insets = useSafeAreaInsets();
  const styles = getStyles(height, insets);

  return (
    <View style={styles.footer}>
      <TouchableOpacity onPress={goBack}>
        <LeftArrow fill={canGoBack ? '#838383' : '#555'} />
      </TouchableOpacity>
      <TouchableOpacity onPress={goForward}>
        <RightArrow fill={canGoForward ? '#838383' : '#555'} />
      </TouchableOpacity>

      <TouchableOpacity onPress={reload}>
        <Refresh />
      </TouchableOpacity>

      <TouchableOpacity onPress={addTab}>
        <Add />
      </TouchableOpacity>
      <TouchableOpacity onPress={manageTabs}>
        <View style={styles.manage}>
          <Text style={styles.text}>{tabs}</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

DetachedHeader.Container = ({
  children,
  style,
}: {
  children: JSX.Element;
  style?: ViewStyle;
}) => {
  const insets = useSafeAreaInsets();
  return (
    <Animated.View
      style={[
        { position: 'absolute', top: 0, left: 0, right: 0, paddingTop: insets.top  },
        style,
      ]}
    >
      {children}
    </Animated.View>
  );
};

Components = () => {
  const insets = useSafeAreaInsets();
  return (
    <Box
      flex={1}
      style={{ paddingTop: insets.top }}
      backgroundColor="lightBlueMagenta100"
    >
      <ScrollView
        horizontal
        snapToInterval={width}
        decelerationRate="fast"
        showsHorizontalScrollIndicator={false}
        bounces={false}
      >
        <HeadersInputs />
        <Cards1 />
        <Cards2 />
      </ScrollView>
    </Box>
  );
}

OnBoarding = () => {
  const insets = useSafeAreaInsets();
  const theme = useTheme<Theme>();

  return (
    <Box width={width} backgroundColor="white">
      <StatusBar barStyle="dark-content" />
      <Box flex={1} paddingHorizontal="m" style={{ paddingTop: insets.top }}>
        <Box flex={0.5} alignItems="center">
          <Box marginTop="m">
            <Image source={Images.IMG1} />
          </Box>
        </Box>
        <Box flex={0.5} padding="l" justifyContent="space-between">
          <Box marginTop="xl">
            <Text variant="title1" fontSize={32} lineHeight={40}>
              Meet Up UI-Kit
            </Text>
            <Text variant="text1" lineHeight={23} color="gray500" marginTop="l">
              When I was 5 years old, my mother always told me that happiness
              was the key to life. When I went to school, they asked me what I
              wanted to be when I grew up.
            </Text>
          </Box>
          <Box
            flexDirection="row"
            justifyContent="space-between"
            alignItems="center"
            marginBottom="xl"
          >
            <Box flexDirection="row">
              {Array(4)
                .fill(0)
                .map((_, index) => (
                  <Dot
                    key={index}
                    width={8}
                    height={8}
                    borderRadius={4}
                    backgroundColor="lightBlueMagenta400"
                    opacity={index === 0 ? 1 : 0.4}
                    style={{ margin: 2 }}
                  />
                ))}
            </Box>
            <Box flexDirection="row">
              <Button
                style={[
                  styles.arrowButton,
                  {
                    backgroundColor: theme.colors.lightBlue300,
                  },
                ]}
              >
                <Box flex={1} justifyContent="center" alignItems="center">
                  <Icons.ArrowLeft strokeColor="white" />
                </Box>
              </Button>
              <Button
                style={[
                  styles.arrowButton,
                  {
                    backgroundColor: theme.colors.lightBlueMagenta400,
                  },
                ]}
              >
                <Box marginTop="s" marginLeft="s">
                  <Icons.ArrowRight fillColor="white" width={30} height={30} />
                </Box>
              </Button>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

Cart = ({closeCart}: Props) => {
  const insets = useSafeAreaInsets();
  const [cart, setCart] = useState([]);
  const {width, height} = useWindowDimensions();
  useEffect(() => {
    const _cart = cartItems();
    setCart(_cart);
  }, []);
  return (
    <View
      style={[
        styles.safeAreaView,
        {
          paddingTop: insets.top,
          paddingBottom: insets.bottom,
        },
      ]}>
      <CartHeader onClose={() => closeCart()} />
      <View style={{flex: 1}}>
        <Text style={[styles.title]}>My Bag</Text>
        <Animated.ScrollView
          contentContainerStyle={{
            paddingHorizontal: 30,
            paddingTop: 10,
          }}>
          {cart &&
            cart.map((furniture: Furniture, index: number) => (
              <CartItem
                deleteItem={(id) => removeItem(id)}
                onQuandityChange={(id: string, quandity: number) =>
                  quandityChange(id, quandity)
                }
                item={furniture}
                key={furniture.id}
                index={index}
              />
            ))}
        </Animated.ScrollView>
        <View style={[styles.footer]}>
          <View
            style={{
              justifyContent: 'flex-start',
              alignItems: 'flex-start',
            }}>
            <Text style={[styles.tPrice]}>Total Price</Text>
            <Text style={[styles.price]}>{totalCartValue()} $</Text>
          </View>
          <TouchableOpacity style={[styles.checkoutBtn]}>
            <Text style={[styles.checkout]}>Checkout</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
  function quandityChange(id: string, quandity: number) {
    let newCartItems = cart.map((item) => {
      if (item.id === id) {
        item.quandity = quandity;
      }
      return item;
    });
    setCart(newCartItems);
  }
  function totalCartValue() {
    let cartValue = 0;
    cart.map((item: Furniture) => {
      cartValue = cartValue + item.price * item.quandity;
    });
    return cartValue;
  }
  function removeItem(id) {
    const newCart = cart.filter((cart: Furniture) => cart.id !== id);
    setCart(newCart);
    animate();
  }
}

ToastProvider: React.FC<ToastProviderProps> = ({ children, overrides }) => {
  const initialState = useMemo(() => ({ ...defaults, ...overrides }), [overrides]);
  const [state, dispatch] = useReducer(reducer, initialState);

  const insets = useSafeAreaInsets();

  const toast = useMemo(
    () => ({
      show(options: ToastOptions) {
        const newState: ToastParams = { ...initialState, ...options, visibility: true };
        newState.position === 'bottom' && Keyboard.dismiss();
        dispatch({ type: ToastActionType.SHOW, payload: newState });
      },
      hide() {
        dispatch({ type: ToastActionType.HIDE });
      },
    }),
    [initialState]
  );

  const computedStyle = useMemo(() => {
    const base: StyleProp<ViewStyle> = {
      position: 'absolute',
      left: insets.left,
      right: insets.right,
      width: undefined,
      alignItems: 'center',
    };
    let style: StyleProp<ViewStyle>;
    if (state.position === 'bottom') {
      style = {
        ...base,
        bottom: insets.bottom,
      };
      return style;
    }
    if (state.position === 'top') {
      style = {
        ...base,
        top: insets.top,
        bottom: undefined,
      };
      return style;
    }
    style = {
      ...base,
      top: insets.top,
      bottom: insets.bottom,
      justifyContent: 'center',
    };
    return style;
  }, [insets, state.position]);

  useEffect(() => {
    dispatch({ type: ToastActionType.HYDRATE, payload: initialState });
  }, [initialState]);

  return (
    <ToastContext.Provider value={toast}>
      <Portal.Host>{children}</Portal.Host>
      <Portal>
        <Snackbar
          onDismiss={toast.hide}
          style={types[state.type]}
          wrapperStyle={computedStyle}
          duration={state.duration}
          visible={state.visibility}
          action={state.action ? { label: state.actionLabel, onPress: state.action } : undefined}
        >
          <Icon size={20} name={icons[state.type]} color="#ffffff" />
          <Text style={styles.message}>{` ${state.message}`}</Text>
        </Snackbar>
      </Portal>
    </ToastContext.Provider>
  );
}

function TabBar({
  state,
  navigation: { navigate },
}: BottomTabBarProps<BottomTabBarOptions>) {
  const insets = useSafeAreaInsets();
  const styles = useStyles();
  const { colors } = useTheme();

  return (
    <View style={styles.tabContainer}>
      {state.routes.map((route: { name: string }, index: number) => {
        const onPress = async () => {
          const token = await getToken();
          if (state.index === 0 && state.index === index) {
            navigate(route.name, { backToTop: true });
          } else {
            if (route.name === 'Profile' && !token) {
              navigate('Login');
              return;
            }
            navigate(route.name, { backToTop: false });
          }
        };

        return (
          <TouchableOpacity
            key={state.routes[index].key}
            onPress={onPress}
            style={styles.tab}
            activeOpacity={state.index === index ? 1 : 0.2}
          >
            <View
              style={[
                { paddingBottom: insets.bottom },
                styles.tabItemContainer,
              ]}
            >
              <Icon
                name={route.name === 'Home' ? 'Home' : 'Person'}
                size="xl"
                color={
                  state.index === index ? colors.activeTab : colors.inactiveTab
                }
              />
              <Text
                color={state.index === index ? 'activeTab' : 'inactiveTab'}
                size="xs"
              >
                {route.name}
              </Text>
            </View>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

CustomContentScreen = () => {
  // hooks
  const { goBack } = useNavigation();
  const safeInsets = useSafeAreaInsets();

  // refs
  const goBackRef = useRef<any>(null);
  goBackRef.current = goBack;

  // variable
  const insets = useMemo(
    () => ({
      top: Math.max(safeInsets.top, 20),
      bottom: Math.max(safeInsets.bottom, 20),
      left: Math.max(safeInsets.left, 20),
      right: Math.max(safeInsets.right, 20),
    }),
    [safeInsets]
  );

  // callbacks
  const handleOnIndexChange = useCallback(_index => {
    console.log(`Index changed: ${_index}`);
  }, []);
  const handleOnClosePress = useCallback(() => goBackRef.current(), []);

  // renders
  const renderCloseButton = useCallback(
    () => <CustomButton text={'X'} onPress={handleOnClosePress} />,
    [handleOnClosePress]
  );
  return (
    <>
      <StatusBar barStyle="light-content" />
      <PaperOnboarding
        onIndexChange={handleOnIndexChange}
        data={data}
        indicatorSize={24}
        indicatorBackgroundColor="#333"
        indicatorBorderColor="#333"
        safeInsets={insets}
        closeButton={renderCloseButton}
      />
    </>
  );
}

CreateStepTwo: React.FC<Props> = (props) => {

    const dispatch = useDispatch()
    const languageSelector = (state: WalletState) => state.language
    const language = useSelector(languageSelector)
    const [words, setWords] = useState([""])

    const [didWriteDown, setDidWriteDown] = useState(false)

    const insets = useSafeAreaInsets()

    const setUpWallet = async () => {
        dispatch(setNewlyCreated(true))
        props.navigation.popToTop()
    }

    const getSeed = async () => {
        let s = await RNSecureKeyStore.get('WALLET_SEED')
        setWords(s.split(' '))
    } 

    useEffect(() => {
        getSeed()
    }, [])

    return (
        <View style={styles.rootContainer}>
            <View style={{ flex: 1 }}>
                <Header screen={getTranslated(language).seed_phrase} action={() => { props.navigation.goBack() }} />
                <Screen>
                    <View style={styles.viewContainer}>
                        <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between' }} style={{ height: '100%' }}>
                            <View style={{ flex: 1 }}>
                                <View style={styles.warningContainer}>
                                    <View style={styles.iconWithText}>
                                        <Image style={styles.icon} source={require('../../assets/images/warning.png')} />
                                        <Text style={styles.warningTextInner}><Text style={styles.warningText}>{getTranslated(language).warning}! </Text>{getTranslated(language).warning_text_2}</Text>
                                    </View>
                                </View>
                                <RecoveryWords screen="CreateStepTwo" words={words} />
                                <View style={{ marginBottom: insets.bottom + 30 }}>
                                    <View style={styles.hasSavedContainer}>
                                        <TouchableWithoutFeedback style={{ width: 32, height: 32 }} onPress={() => { setDidWriteDown(!didWriteDown) }}>
                                            <CheckBox tintColors={{ true: '#F7931A', false: '#F7931A' }} style={styles.checkBox} tintColor="#F7931A" animationDuration={0} onFillColor="#F7931A" onTintColor="#F7931A" onCheckColor="#fff" boxType="square" disabled={false} value={didWriteDown} onValueChange={(newVal) => setDidWriteDown(newVal)} />
                                        </TouchableWithoutFeedback>
                                        <Text style={styles.hasSavedText}>{getTranslated(language).have_saved}</Text>
                                    </View>
                                    <View style={styles.buttonContainer}>
                                        {didWriteDown &&
                                            <ButtonPrimary text={getTranslated(language).wrote_it_down} action={setUpWallet} />
                                        }
                                        {!didWriteDown &&
                                            <ButtonPrimaryDisabled text={getTranslated(language).wrote_it_down} action={() => { }} />
                                        }
                                    </View>
                                </View>
                            </View>
                        </ScrollView>
                    </View>
                </Screen>
            </View>
        </View>
    );

}

CreateStepOne: React.FC<Props> = (props) => {

    const languageSelector = (state: WalletState) => state.language
    const language = useSelector(languageSelector)

    const insets = useSafeAreaInsets()

    const [isGenerating, setIsGenerating] = useState(false)

    async function generateSeed() {
        setIsGenerating(true)

        setTimeout(() => {
            setIsGenerating(false)
            props.navigation.navigate('CreateStepTwo')
        }, 2000)
    }

    useEffect(() => {
        let listener = props.navigation.addListener('beforeRemove', (e) => {
            if (!isGenerating) {
                props.navigation.dispatch(e.data.action)
            }
            else {
                e.preventDefault()
            }
        })

        return listener

    }, [props.navigation, isGenerating])

    return (
        <View style={{ flex: 1 }}>
            { isGenerating &&
                <Loader title="Hold on..." subTitle="This might take a second" />
            }
            { !isGenerating &&
                <View style={{ flex: 1 }}>
                    <Header screen={getTranslated(language).create_new} action={() => { props.navigation.goBack() }} />
                    <Screen>
                        <View style={styles.rootContainer}>
                            <View style={styles.viewContainer}>
                                <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between' }}>
                                    <View style={styles.warningContainer}>
                                        <View style={styles.iconWithText}>
                                            <Image style={styles.warningIcon} source={require('../../assets/images/warning.png')} />
                                            <Text style={styles.warningText} >{getTranslated(language).warning}!</Text>
                                        </View>
                                        <Text style={styles.warningTextInner}>{getTranslated(language).we_will_generate}</Text>
                                        <Text style={styles.warningTextInner} >{getTranslated(language).warning_text_1}</Text>
                                        <View style={styles.iconWithText}>
                                            <Image style={styles.icon} source={require('../../assets/images/write_it_down.png')} />
                                            <Text style={styles.innerText} >{getTranslated(language).write_it_down}</Text>
                                        </View>
                                        <View style={styles.iconWithText}>
                                            <Image style={styles.icon} source={require('../../assets/images/keep_it_safe.png')} />
                                            <Text style={styles.innerText} >{getTranslated(language).keep_it_safe}</Text>
                                        </View>
                                        <View style={styles.iconWithText}>
                                            <Image style={styles.icon} source={require('../../assets/images/do_not_loose_it.png')} />
                                            <Text style={styles.innerText} >{getTranslated(language).do_not_lose_it}</Text>
                                        </View>
                                    </View>
                                    <View style={[styles.buttonContainer, { marginBottom: insets.bottom + 30 }]}>
                                        {!isGenerating && <ButtonPrimary text={getTranslated(language).next_button} action={() => generateSeed()} />}
                                    </View>
                                </ScrollView>
                            </View>
                        </View>
                    </Screen>
                </View>
            }
        </View>
    );
}

TestsResult: FC<TestsResultProps> = ({navigation, route}) => {
  const {t} = useTranslation();
  const insets = useSafeAreaInsets();
  const {copy} = useSettings();

  const dontShare = route.params && route.params.dontShare;

  const handleDone = () => navigation.navigate(ScreenNames.dashboard);

  const handleResubmit = () => navigation.goBack();

  return (
    <>
      <ScrollView
        style={[{paddingBottom: insets.bottom + SPACING_BOTTOM}]}
        contentContainerStyle={[
          styles.contentContainer,
          {paddingBottom: insets.bottom + SPACING_BOTTOM}
        ]}>
        <ModalHeader
          heading={dontShare ? undefined : 'tests:result:heading'}
          color="darkGrey"
          left
        />
        {!dontShare && <Spacing s={40} />}
        <Container>
          <Markdown markdownStyles={markdownStyle}>
            {dontShare ? copy.testResult.text2 : copy.testResult.text1}
          </Markdown>
          {!dontShare && <Spacing s={40} />}
          {!dontShare && (
            <ArrowLink
              externalLink={t('links:j')}
              accessibilityHint={t('tests:view:a11y:hint')}
              accessibilityLabel={t('tests:view:a11y:label')}>
              <Text variant="h4" color="primaryPurple">
                {t('tests:view:tellMore')}
              </Text>
            </ArrowLink>
          )}
          <Spacing s={dontShare ? 28 : 47} />
        </Container>
        {dontShare && (
          <>
            <Button
              onPress={handleResubmit}
              label={t('tests:result:resubmitLabel')}
              hint={t('tests:result:resubmitHint')}>
              {t('tests:result:resubmitLabel')}
            </Button>
            <Spacing s={45} />
          </>
        )}
        <Button
          onPress={handleDone}
          label={t('tests:result:doneLabel')}
          hint={t('tests:result:doneHint')}
          type={dontShare ? 'link' : undefined}
          textColor={dontShare ? 'darkerPurple' : undefined}>
          {t('common:done')}
        </Button>
        {dontShare && (
          <>
            <Spacing s={64} />
            <ArrowLink
              externalLink={t('links:j')}
              accessibilityHint={t('tests:view:a11y:hint')}
              accessibilityLabel={t('tests:view:a11y:label')}>
              <Text variant="h4" color="primaryPurple">
                {t('tests:view:tellMore')}
              </Text>
            </ArrowLink>
          </>
        )}
        <Spacing s={50} />
      </ScrollView>
    </>
  );
}

Welcome2 = ({ scrollRef }: Props) => {
  const insets = useSafeAreaInsets();
  const theme = useTheme<Theme>();

  const next = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollTo({ x: width, animated: true });
    }
  };

  return (
    <Box width={width}>
      <Box flex={1} backgroundColor="white">
        <Box flex={0.75} borderBottomLeftRadius={80}>
          <Image source={Images.BG7} style={styles.background} />
          <Box
            flex={1}
            justifyContent="flex-end"
            alignItems="center"
            style={{ paddingTop: insets.top }}
          >
            <Box flexDirection="row" marginBottom="m">
              {Array(4)
                .fill(0)
                .map((_, index) => (
                  <Dot
                    key={index}
                    width={8}
                    height={8}
                    borderRadius={4}
                    backgroundColor="white"
                    opacity={index === 0 ? 1 : 0.4}
                    style={{ margin: 2 }}
                  />
                ))}
            </Box>
          </Box>
        </Box>
        <Box flex={0.3} alignItems="center" padding="l">
          <Text variant="text2" color="lightCyanBlue">
            MEET UP
          </Text>
          <Text variant="title1" fontSize={32} lineHeight={40} marginTop="s">
            Welcome
          </Text>
          <Text
            variant="text1"
            textAlign="center"
            lineHeight={20}
            color="gray600"
            marginVertical="m"
          >
            If you’re offered a seat on a rocket ship, don’t ask what seat! Just
            get on.
          </Text>
          <Button
            style={[
              styles.nextButton,
              { backgroundColor: theme.colors.lightBlueMagenta400 },
            ]}
            onPress={next}
          >
            <Box justifyContent="center" alignItems="center" height={44}>
              <Text
                variant="title3"
                fontSize={14}
                lineHeight={26}
                color="white"
              >
                NEXT
              </Text>
            </Box>
          </Button>
        </Box>
      </Box>
    </Box>
  );
}

YourDataModal: React.FC = () => {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const {user: {ageGroup = UserAgeGroup.ageGroup1} = {}} = useApplication();
  const insets = useSafeAreaInsets();

  return (
    <View
      style={[
        styles.modal,
        {marginTop: insets.top + (Platform.OS === 'android' ? 25 : 5)}
      ]}>
      <View style={styles.header}>
        <ModalClose onPress={() => navigation.goBack()} />
      </View>
      <ScrollView contentContainerStyle={styles.contentContainerStyle}>
        <Text
          variant="h2"
          color="darkerPurple"
          accessible
          style={styles.narrow}
          align="center">
          {t('onboarding:yourData:modal:title')}
        </Text>
        <Illustration source={ModalIllustrationSource} />
        <Markdown markdownStyles={modalMarkdownStyles} style={styles.narrow}>
          {t('onboarding:yourData:modal:content')}
        </Markdown>
        <Illustration
          accessible
          source={getImageSource(ageGroup)}
          fullWidth
          accessibilityHint={t(
            'onboarding:yourData:modal:notificationIllustrationAlt'
          )}
        />
        <Spacing s={60} />
      </ScrollView>
    </View>
  );
}

Modal: React.FC<ModalProps> = ({
  title,
  children,
  onClose,
  buttons,
  style,
  type = 'light',
  isVisible = true,
  closeButton = true,
  ...rest
}) => {
  const insets = useSafeAreaInsets();
  const {accessibility} = useApplication();
  const isDark = type === 'dark';

  return (
    <View style={styles.wrapper}>
      <ReactNativeModal
        {...rest}
        animationIn={accessibility.reduceMotionEnabled ? 'fadeIn' : 'slideInUp'}
        animationOut={
          accessibility.reduceMotionEnabled ? 'fadeOut' : 'slideOutDown'
        }
        isVisible={isVisible}
        style={styles.bottomModal}>
        <View
          style={[
            styles.contentContainer,
            isDark && styles.contentContainerDark,
            closeButton && styles.contentWithCloseButton,
            {paddingBottom: insets.bottom},
            style
          ]}>
          {closeButton && (
            <View style={styles.closeHeader}>
              <ModalClose onPress={onClose} notification />
            </View>
          )}
          <ScrollView>
            {title && (
              <Text variant="leader" color={isDark ? 'white' : 'darkGrey'}>
                {title}
              </Text>
            )}
            <Spacing s={24} />
            {children}
            <Spacing s={24} />
            {!!buttons &&
              buttons.map(
                (
                  {label, hint, action, type: buttonType, variant, buttonStyle},
                  index
                ) => (
                  <Fragment key={`${label}-${variant}-${index}`}>
                    <Button
                      type={buttonType}
                      variant={variant}
                      label={label}
                      onPress={() => {
                        action();
                        onClose();
                      }}
                      hint={hint}
                      buttonStyle={buttonStyle}>
                      {label}
                    </Button>
                    {index + 1 < buttons.length && <Spacing s={16} />}
                  </Fragment>
                )
              )}
            <Spacing s={30} />
          </ScrollView>
        </View>
      </ReactNativeModal>
    </View>
  );
}

Tests: FC<TestsProps> = ({navigation}) => {
  const {t} = useTranslation();
  const insets = useSafeAreaInsets();

  const handleAddTestResult = () => navigation.navigate(ScreenNames.testsAdd);

  return (
    <ScrollView
      contentContainerStyle={[
        styles.contentContainer,
        {paddingBottom: insets.bottom + SPACING_BOTTOM}
      ]}>
      <ModalHeader heading="tests:heading" color="darkGrey" icon={JarIcon} />
      <Spacing s={40} />
      <Image
        source={Illustration}
        style={styles.logo}
        accessibilityIgnoresInvertColors={false}
      />
      <Spacing s={40} />
      <Text align="center" variant="leader" color="darkGrey">
        {t('tests:content')}
      </Text>
      <Spacing s={25} />
      <Button
        onPress={handleAddTestResult}
        icon={IconPlus}
        label={t('tests:addTestResult')}
        variant="dark">
        {t('tests:addTestResult')}
      </Button>
      <Spacing s={25} />
      <Button
        onPress={() => openBrowserAsync(t('links:t'))}
        label={t('tests:bookATest')}
        variant="inverted">
        {t('tests:bookATest')}
      </Button>
      <Spacing s={54} />
      <ArrowLink
        externalLink={t('links:j')}
        accessibilityHint={t('tests:view:a11y:hint')}
        accessibilityLabel={t('tests:view:a11y:label')}>
        <Text variant="h4" color="primaryPurple">
          {t('tests:view:tellMore')}
        </Text>
      </ArrowLink>
      <Spacing s={54} />
    </ScrollView>
  );
}

DotComponent = (props: DotProps) => {
  // props
  const {
    selectedIndex,
    routes,
    progress,
    width,
    dotColor,
    dotSize,
    barHeight,
    isRtl,
    navigationIndex,
  } = props;

  // const
  const {bottom} = useSafeAreaInsets();
  const inputRange = useMemo(
    () => routes.map((_: any, index: number) => index),
    [routes],
  );
  const outputRange = useMemo(
    () =>
      isRtl
        ? routes.map(
            (_: any, index: number) =>
              -(
                (index * width) / routes.length +
                width / routes.length / 2 -
                dotSize / 2
              ),
          )
        : routes.map(
            (_: any, index: number) =>
              (index * width) / routes.length +
              width / routes.length / 2 -
              dotSize / 2,
          ),
    [isRtl, routes, width, dotSize],
  );

  // reanimated
  const translateX = useInterpolate(selectedIndex, inputRange, outputRange);
  const translateY = useInterpolate(
    progress,
    [0, 1],
    [15 - bottom, -(barHeight - HEIGHT_HOLE + 5)],
  );

  const opacity = useInterpolate(progress, [0, 1], [0.2, 1]);

  // reanimated style
  const iconContainerStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    justifyContent: 'center',
    alignItems: 'center',
  }));

  const dotStyle = useAnimatedStyle(() => ({
    width: dotSize,
    backgroundColor: dotColor,
    height: dotSize,
    bottom: 0,
    borderRadius: dotSize / 2,
    transform: [{translateX: translateX.value}, {translateY: translateY.value}],
  }));

  // render
  return (
    <Animated.View style={[styles.dot, dotStyle]}>
      <Animated.View style={iconContainerStyle}>
        {routes.map(({icon}, index: number) => (
          <IconDot key={index} index={index} selectedIndex={selectedIndex}>
            {icon({progress, focused: navigationIndex === index})}
          </IconDot>
        ))}
      </Animated.View>
    </Animated.View>
  );
}

DotComponent = (props: DotProps) => {
  // props
  const {
    selectedIndex,
    routes,
    progress,
    width,
    dotColor,
    dotSize,
    barHeight,
    isRtl,
    navigationIndex,
  } = props;

  // const
  const { bottom } = useSafeAreaInsets();
  const inputRange = useMemo(
    () => routes.map((_: any, index: number) => index),
    [routes]
  );
  const outputRange = useMemo(
    () =>
      isRtl
        ? routes.map(
            (_: any, index: number) =>
              -(
                (index * width) / routes.length +
                width / routes.length / 2 -
                dotSize / 2
              )
          )
        : routes.map(
            (_: any, index: number) =>
              (index * width) / routes.length +
              width / routes.length / 2 -
              dotSize / 2
          ),
    [isRtl, routes, width, dotSize]
  );

  // reanimated
  const translateX = useInterpolate(selectedIndex, inputRange, outputRange);
  const translateY = useInterpolate(
    progress,
    [0, 1],
    [15 - bottom, -(barHeight - HEIGHT_HOLE + 5)]
  );

  const opacity = useInterpolate(progress, [0, 1], [0.2, 1]);

  // reanimated style
  const iconContainerStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    justifyContent: 'center',
    alignItems: 'center',
  }));

  const dotStyle = useAnimatedStyle(() => ({
    width: dotSize,
    backgroundColor: dotColor,
    height: dotSize,
    bottom: 0,
    borderRadius: dotSize / 2,
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
    ],
  }));

  // render
  return (
    <Animated.View style={[styles.dot, dotStyle]}>
      <Animated.View style={iconContainerStyle}>
        {routes.map(({ icon }, index: number) => (
          <IconDot key={index} index={index} selectedIndex={selectedIndex}>
            {icon({ progress, focused: navigationIndex === index })}
          </IconDot>
        ))}
      </Animated.View>
    </Animated.View>
  );
}

export default function FullFeatured() {
  const nav = useNavigation();

  const [index, setIndex] = useState(1);
  const headerShown = useSharedValue(true);

  const translateY = useSharedValue(0);
  const bottomTranslateY = useSharedValue(0);

  const galleryRef = useRef<SimpleGallery<GalleryItemType[]>>(
    null,
  );

  const onIndexChange = useWorkletCallback((nextIndex: number) => {
    runOnJS(setIndex)(nextIndex);
  }, []);

  function onNext() {
    galleryRef.current!.goNext();
  }

  function onBack() {
    galleryRef.current!.goBack();
  }

  function setHeaderShown(value: boolean) {
    headerShown.value = value;
    nav.setParams({ headerShown: value });

    StatusBar.setHidden(!value);
  }

  function toggleHeaderShown() {
    const nextValue = !headerShown.value;
    setHeaderShown(nextValue);
  }

  function hide() {
    setHeaderShown(false);
  }

  const opacityAnimatedStyles = useToggleOpacity(headerShown);

  const translateYAnimatedStyles = useAnimatedStyle(() => {
    return {
      transform: [{ translateY: bottomTranslateY.value }],
    };
  }, []);

  function handleClose() {
    nav.goBack();
  }

  function shouldPagerHandleGestureEvent() {
    'worklet';

    return translateY.value === 0;
  }

  const handler = useCallback(
    createAnimatedGestureHandler<PanGestureHandlerGestureEvent, {}>({
      shouldHandleEvent: (evt) => {
        'worklet';

        return (
          evt.numberOfPointers === 1 &&
          Math.abs(evt.velocityX) < Math.abs(evt.velocityY)
        );
      },

      onActive: (evt) => {
        'worklet';

        translateY.value = evt.translationY;

        bottomTranslateY.value =
          evt.translationY > 0 ? evt.translationY : 0;
      },

      onEnd: () => {
        'worklet';

        if (translateY.value > 80) {
          translateY.value = withTiming(
            -800,
            undefined,
            runOnJS(handleClose),
          );
        } else {
          translateY.value = withTiming(0);
          bottomTranslateY.value = withTiming(0);
        }
      },
    }),
    [],
  );

  const translateStyles = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: translateY.value,
        },
      ],
    };
  }, []);

  const onInteraction = useWorkletCallback(() => {
    runOnJS(hide)();
  }, []);

  const onTap = useWorkletCallback(() => {
    runOnJS(toggleHeaderShown)();
  }, []);

  const onDoubleTap = useWorkletCallback((isScaled: boolean) => {
    if (!isScaled) {
      runOnJS(hide);
    }
  }, []);

  const insets = useSafeAreaInsets();

  return (
    <View style={{ flex: 1, backgroundColor: 'black'  }}>
      <CustomHeader
        topInset={insets.top}
        bottomTranslateY={bottomTranslateY}
        headerShown={headerShown}
      />

      <Animated.View
        style={[translateStyles, StyleSheet.absoluteFill]}
      >
        <SimpleGallery
          ref={galleryRef}
          initialIndex={1}
          items={images}
          keyExtractor={(item) => item.id}
          gutterWidth={56}
          onIndexChange={onIndexChange}
          renderImage={(props, _, index) => {
            return <ImageRender index={index} {...props} />;
          }}
          renderPage={({ item, ...rest }) => {
            if (item.type === 'image') {
              return (
                <SimpleGallery.ImageRenderer item={item} {...rest} />
              );
            }

            // TODO: Figure out why Video component is not working
            return (
              <View>
                <Text>I can be a video</Text>
              </View>
            );
          }}
          onInteraction={onInteraction}
          onTap={onTap}
          onDoubleTap={onDoubleTap}
          numToRender={2}
          shouldPagerHandleGestureEvent={
            shouldPagerHandleGestureEvent
          }
          onPagerEnabledGesture={handler}
          // onPagerTranslateChange={(translateX) => {
          //   console.log(translateX);
          // }}
        />
      </Animated.View>

      <Animated.View
        style={[
          s.bottomBar,
          opacityAnimatedStyles,
          translateYAnimatedStyles,
        ]}
      >
        <Button onPress={onBack} text="Back" />

        <Text>Index: {index}</Text>

        <Button onPress={onNext} text="Next" />
      </Animated.View>
    </View>
  );
}

Welcome1 = () => {
  const insets = useSafeAreaInsets();
  const theme = useTheme<Theme>();
  const navigation = useNavigation<
    NavigationProp<AppStackParamList, AppRoute.OBOARDING>
  >();

  const skip = () => {
    navigation.goBack();
  };

  return (
    <Box width={width}>
      <Box flex={0.7} backgroundColor="black">
        <Image
          source={Images.BG6}
          style={{
            ...StyleSheet.absoluteFillObject,
            width: undefined,
            height: undefined,
          }}
        />
        <Box
          flexDirection="row"
          justifyContent="space-between"
          style={{ paddingTop: insets.top }}
          padding="l"
        >
          <Box flexDirection="row">
            {Array(4)
              .fill(0)
              .map((_, index) => (
                <Dot
                  key={index}
                  width={8}
                  height={8}
                  borderRadius={4}
                  backgroundColor="white"
                  style={{ margin: 2 }}
                  opacity={index === 0 ? 1 : 0.4}
                />
              ))}
          </Box>
          <Button onPress={skip}>
            <Text variant="title3" color="white" opacity={0.5}>
              SKIP
            </Text>
          </Button>
        </Box>
      </Box>
      <Box flex={0.3} />
      <Box position="absolute" bottom={100} right={0}>
        <Card
          padding="xl"
          width={width * 0.8}
          height={196}
          backgroundColor="darkBlueMagenta700"
          borderBottomLeftRadius={80}
          borderTopLeftRadius={10}
        >
          <Text variant="text2" color="white" opacity={0.7}>
            TUTORIAL
          </Text>
          <Text variant="title1" fontSize={32} lineHeight={40} color="white">
            Welcome to Meet Up
          </Text>
        </Card>
        <Box top={-25} width={"50%"} alignSelf="flex-end">
          <Button
            style={[
              styles.getStartedButton,
              {
                backgroundColor: theme.colors.lightPink,
                height: 56,
              },
            ]}
          >
            <Box
              flexDirection="row"
              justifyContent="center"
              alignItems="center"
              padding="m"
            >
              <Box flexDirection="row">
                <Text variant="text1" color="white">
                  GET STARTED
                </Text>
                <Box marginLeft="m" style={{ marginTop: 4 }}>
                  <Icons.ArrowRight />
                </Box>
              </Box>
            </Box>
          </Button>
        </Box>
      </Box>
    </Box>
  );
}