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

render() {
    const { keyStroke, codeError } = this.state;
    const { Colors } = this.props;
    return (
      <SafeAreaView
        style={{
          flex: 1,
          // justifyContent: 'flex-end',
          backgroundColor: Colors.white,
        }}
      >
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
        >
          <CodeInput
            keyStroke={keyStroke!}
            inputContainer="line"
            setCode={this.setCode}
            value="1247"
            codeError={codeError}
            errorTextStyle={{ textAlign: 'center' }}
            codeTextStyle={{ color: Colors.font_1 }}
            // Mask={this.renderMask}
          />
        </View>

        <NumPad onItemKeyClick={this.onItemKeyClick} onSubmit={this.onSubmit} />
      </SafeAreaView>
    );
  }

MainAppFaceCamera = () => {
  const navigation = useNavigation()
  const onCapture = async uri => {
    if (uri) {    
      await userPrivateData.setFace(uri, { isTempUri: true })
      if (navigation.state.params.setUri) {
        navigation.state.params.setUri(uri)
      }
      navigation.goBack()
    }
  }
  return (
    <SafeAreaView style={styles.container}>
      <UpdateFaceCamera
        onClose={() => {
          navigation.goBack()
        }}
        onCapture={onCapture}
        onSelectImage={onCapture}
      />
    </SafeAreaView>
  )
}

BaseDataSharingView = ({children, showBackButton = true}: BaseDataSharingViewProps) => {
  const navigation = useNavigation();
  const i18n = useI18n();
  const close = useCallback(() => navigation.navigate('Home'), [navigation]);
  const {data} = useContext(FormContext);

  // Note: we can now make back buttons in this flow!
  // const back = useCallback(() => navigation.goBack(), [navigation]);

  const wrapperStyle = data.modalVisible ? styles.overlay : styles.invisible;

  return (
    <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
      <Box backgroundColor="overlayBackground" flex={1}>
        <SafeAreaView style={styles.flex}>
          <Box style={wrapperStyle} />
          <Box marginBottom="s">
            <Toolbar
              navText={i18n.translate('DataUpload.Close')}
              onIconClicked={close}
              showBackButton={showBackButton}
            />
          </Box>
          <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
            {children}
          </ScrollView>
        </SafeAreaView>
      </Box>
    </KeyboardAvoidingView>
  );
}

TickerExample = () => {
  const [number, setNumber] = useState(0);
  // just a function to mock continous update of
  // ticker component,so that we can see the animation
  useEffect(() => {
    const interval = setInterval(() => {
      setNumber((prevNumber) => prevNumber + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  const Colors = useColors();
  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: Colors.white,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Ticker text={number.toString()} />
    </SafeAreaView>
  );
}

BaseHomeView = ({children, iconName, testID}: BaseHomeViewProps) => {
  return (
    <>
      <ScrollView
        alwaysBounceVertical={false}
        style={styles.scrollView}
        testID={testID}
        contentContainerStyle={styles.scrollContainer}
      >
        <SafeAreaView edges={['left', 'right']} style={{width: '100%'}}>
          <View style={styles.iconContainer}>
            <BackgroundSvg
              height="105%"
              width="105%"
              style={{
                position: 'absolute',
              }}
            />
            <View style={{marginTop: 23, marginBottom: 36}}>
              <Icon name={iconName} width={120} height={120} />
            </View>
          </View>
          <Box
            width="100%"
            flex={1}
            alignItems="flex-start"
            justifyContent="flex-start"
            paddingHorizontal="m"
            marginBottom="l"
            marginTop="l"
          >
            {children}
          </Box>
        </SafeAreaView>
      </ScrollView>
    </>
  );
}

InputExample = () => {
  const Colors = useColors();
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: Colors.white }}>
      <Input
        label="Name (As on PAN Card)"
        placeholder="CGBPR3376M"
        error="Your name is lame. Get a better one."
      />
      <Input label="Name (As on PAN Card)" placeholder="CGBPR3376M" />
      <Input label="Name (As on PAN Card)" value="Disabled Value" disabled />
    </SafeAreaView>
  );
}

NoCodeScreen = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const close = useCallback(() => navigation.goBack(), [navigation]);

  return (
    <Box flex={1} backgroundColor="overlayBackground">
      <SafeAreaView style={styles.flex}>
        <Toolbar
          title=""
          navIcon="icon-back-arrow"
          navText={i18n.translate('DataUpload.Cancel')}
          navLabel={i18n.translate('DataUpload.Cancel')}
          onIconClicked={close}
        />
        <ScrollView style={styles.flex}>
          <Box paddingHorizontal="m" paddingBottom="l">
            <Content />
          </Box>
        </ScrollView>
      </SafeAreaView>
    </Box>
  );
}

EmptyStates = ({ navigation }: any) => {
  const emptyScreenComponentScreens = [
    'EmptyStateGeneric',
    'EmptyStateMFWatchlist',
    'EmptyStateStocksWatchlist',
    'EmptyStateOrders',
    'EmptyStateMFDashboard',
    'EmptyStateStocksDashboard',
    'EmptyStateCart',
  ];
  const Colors = useColors();
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: Colors.white }}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        {emptyScreenComponentScreens.map((item) => (
          <TouchableOpacity
            onPress={() => navigation.navigate(item)}
            style={[
              styles.navButtonContainer,
              { borderBottomColor: Colors.font_3 },
            ]}
            key={item}
          >
            <Text style={{ color: Colors.font_1 }}>{item}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

_SignIn: React.FC<SignInProps> = (props) => {
  const {} = props;
  const onSignInFailed = React.useCallback(() => {
    console.warn('Success');
  }, []);
  const {isAuthenticating, submit} = useSignIn({onSignInFailed});
  return (
    <SafeAreaView>
      <FullScreenLoadingIndicator visible={isAuthenticating} />
      <TextView text="test" />
      <RoundedButton onPress={submit} />
    </SafeAreaView>
  );
}

TestScreen = () => {
  const navigation = useNavigation();
  const close = useCallback(() => navigation.goBack(), [navigation]);

  return (
    <MockProvider>
      <Box backgroundColor="overlayBackground" flex={1}>
        <SafeAreaView style={styles.flex}>
          <Toolbar title="" navIcon="icon-back-arrow" navText="Close" onIconClicked={close} />
          <ScrollView style={styles.flex}>
            <Content />
          </ScrollView>
        </SafeAreaView>
      </Box>
    </MockProvider>
  );
}

Background: React.FC<IBackgroundProps> = ({ isBlue, children }) => {
  const { state } = useContext(AppContext);
  const theme = useTheme<Theme>();
  const { colors } = theme;
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar
        backgroundColor={isBlue ? colors.bgPrimaryBlue : colors.bgPrimary}
        barStyle={state.darkMode || isBlue ? 'light-content' : 'dark-content'}
      />
      <Box flex={1} backgroundColor={isBlue ? 'bgPrimaryBlue' : 'bgPrimary'}>
        {children}
      </Box>
    </SafeAreaView>
  );
}

export default function App() {
  const [robotoLoaded] = useFontsRoboto({ Roboto_400Regular })
  const [rubikLoaded] = useFontsRubik({
    Rubik_300Light,
    Rubik_400Regular,
    Rubik_500Medium
  })

  const hydratedTheme = {
    ...theme,
    regularFont300: rubikLoaded ? 'Rubik_300Light' : 'Arial',
    regularFont400: rubikLoaded ? 'Rubik_400Regular' : 'Arial',
    regularFont500: rubikLoaded ? 'Rubik_500Medium' : 'Arial',
    codeFont400: robotoLoaded ? 'Roboto_400Regular' : 'Arial',
    platform: 'react-native'
  }

  return (
    <ThemeProvider theme={hydratedTheme}>
      <NativeThemeProvider theme={hydratedTheme}>
        <SafeAreaProvider>
          <SafeAreaView
            edges={['top', 'left', 'right']}
            style={{
              flex: 1,
              backgroundColor: theme.grey5
            }}
          >
            <ProjectProvider>
              <AuthProvider>
                <ErrorBoundary>
                  <Navigation />
                  <ForkMe />
                </ErrorBoundary>
              </AuthProvider>
            </ProjectProvider>
          </SafeAreaView>
        </SafeAreaProvider>
      </NativeThemeProvider>
    </ThemeProvider>
  )
}

export function ActionSheet(props: Props) {
  const styles = useStyles();

  const {
    options,
    cancelButtonIndex,
    actionItemOnPress,
    onClose,
    visible,
    animationType = 'none',
    transparent = true,
    style,
    ...otherProps
  } = props;

  //reorder cancel item
  const cancelOption =
    cancelButtonIndex != null && options.splice(cancelButtonIndex, 1);
  cancelOption && options.push(cancelOption[0]);

  const firstItemIndex = 0;
  const lastItemNoCancelIndex = options.length - (!cancelOption ? 1 : 2);
  const lastItemIndex = cancelOption ? options.length - 1 : -1;

  return (
    <Modal
      visible={visible}
      animationType={animationType}
      transparent={transparent}
      {...otherProps}
    >
      <TouchableWithoutFeedback onPressOut={onClose}>
        <SafeAreaView style={[styles.container, style]}>
          {options.map(({ label, disabled }, index) => (
            <ActionSheetItem
              key={`actionItem-${index}`}
              label={label}
              disabled={disabled}
              onPress={() => {
                !disabled && actionItemOnPress(index);
                !disabled && onClose();
              }}
              isTop={index === firstItemIndex}
              isBottom={index === lastItemNoCancelIndex}
              isCancelOption={index === lastItemIndex}
            />
          ))}
        </SafeAreaView>
      </TouchableWithoutFeedback>
    </Modal>
  );
}

QRCodeResult = ({
  qrResult,
  onRescan,
}: {
  qrResult: QRResult
  onRescan: (e: any) => any
}) => {
  // console.log('qrResult', qrResult)
  return (
    <MyBackground variant="light">
      <SafeAreaView style={{ flex: 1 }}>
        <Header>
          <Title>{I18n.t('scan_result')}</Title>
        </Header>
        <Content>
          <CircularProgressAvatar
            text="เสี่ยงน้อย"
            CustomComponent={({ style }) => (
              <RiskLabel
                style={style}
                label={qrResult.getLabel()}
                color={qrResult.getStatusColor()}
              />
            )}
            color={qrResult.getStatusColor()}
            progress={80}
            width={Math.floor((70 / 100) * Dimensions.get('screen').width)}
          />
        </Content>
        <Footer>
          <DateLabel>
            {I18n.t('data_at')} {qrResult.getCreatedDate().format('D MMMM​')} {I18n.t('por_sor')}.{' '}
            {qrResult.getCreatedDate().year() + 543}
            {qrResult.getCreatedDate().format(' HH:mm น.')}
          </DateLabel>
          <PrimaryButton title={I18n.t('scan_again')} onPress={onRescan} />
        </Footer>
      </SafeAreaView>
    </MyBackground>
  )
}

SafeArea = ({style, children}: Props) => {
  switch (Platform.OS) {
    case 'ios':
      return <SafeAreaView style={style}>{children}</SafeAreaView>;
    default:
      return <View style={style}>{children}</View>;
  }
}

Notification: React.FC<INotification> = ({ type, message }) => {
  const opacity = useValue(0);
  const { dispatch } = useContext(AppContext);
  const { timing } = Animated;

  const animConfig = {
    duration: 300,
    easing: Easing.inOut(Easing.ease),
  };

  useEffect(() => {
    timing(opacity, { ...animConfig, toValue: 1 }).start();
  }, [animConfig, opacity, timing]);

  useEffect(() => {
    const fade = setTimeout(() => {
      timing(opacity, { ...animConfig, toValue: 0 }).start(({ finished }) => {
        if (finished) {
          dispatch({
            type: CLEAR_NOTIFICATION,
          });
        }
      });
    }, 2000);

    return () => {
      clearTimeout(fade);
    };
  }, [animConfig, dispatch, opacity, timing]);

  return (
    <SafeAreaView
      style={{
        ...StyleSheet.absoluteFillObject,
      }}
    >
      <AnimatedBox
        flexDirection="row"
        justifyContent="space-between"
        alignItems="center"
        height={56}
        position="absolute"
        top={16}
        left={16}
        right={16}
        backgroundColor="toast"
        borderRadius="full"
        {...{ opacity }}
        style={NotificationStyle.container}
      >
        <Box flexDirection="row" alignItems="center">
          <Icon name={type!} />
          <StyledText variant="label" color="white" style={NotificationStyle.message}>
            {message}
          </StyledText>
        </Box>
        <Icon name="x" color="white" />
      </AnimatedBox>
    </SafeAreaView>
  );
}

function ScreenContainer({
  scrollable = false,
  hasSafeArea = false,
  hasBottomSafeArea = false,
  hasTopSafeArea = false,
  theme,
  style,
  children,
  ...rest
}: ScreenContainerProps) {
  const backgroundColor = theme.colors.background;

  const edges: Edge[] = ["left", "right"];
  if (hasSafeArea || hasTopSafeArea) {
    edges.push("top");
  }

  if (hasSafeArea || hasBottomSafeArea) {
    edges.push("bottom");
  }

  return (
    <SafeAreaView
      edges={edges}
      style={[
        styles.container,
        {
          backgroundColor,
        },
      ]}
      {...rest}
    >
      {scrollable ? (
        <ScrollView
          contentContainerStyle={[
            styles.scrollViewContainer,
            { backgroundColor },
            style,
          ]}
        >
          {children}
        </ScrollView>
      ) : (
        <View style={[styles.container, { backgroundColor }, style]}>
          {children}
        </View>
      )}
    </SafeAreaView>
  );
}

HomeScreen = () => {
  const navigation = useNavigation();
  useEffect(() => {
    if (__DEV__ && TEST_MODE) {
      DevSettings.addMenuItem('Show Demo Menu', () => {
        navigation.navigate('TestScreen');
      });
    }
  }, [navigation]);

  // This only initiate system status updater.
  // The actual updates will be delivered in useSystemStatus().
  const subscribeToStatusUpdates = useExposureNotificationSystemStatusAutomaticUpdater();
  useEffect(() => {
    return subscribeToStatusUpdates();
  }, [subscribeToStatusUpdates]);

  const startExposureNotificationService = useStartExposureNotificationService();
  const updateExposureStatus = useUpdateExposureStatus();
  useEffect(() => {
    startExposureNotificationService();
    updateExposureStatus();
  }, [startExposureNotificationService, updateExposureStatus]);

  const bottomSheetRef = useRef<BottomSheetBehavior>(null);
  const [isBottomSheetExpanded, setIsBottomSheetExpanded] = useState(false);
  const currentStatus = useExposureStatus().type;
  const previousStatus = usePrevious(currentStatus);
  useLayoutEffect(() => {
    if (previousStatus === ExposureStatusType.Monitoring && currentStatus === ExposureStatusType.Diagnosed) {
      bottomSheetRef.current?.collapse();
    }
  }, [currentStatus, previousStatus]);
  useLayoutEffect(() => {
    bottomSheetRef.current?.setOnStateChange(setIsBottomSheetExpanded);
  }, []);
  const fadeAnim = useRef(new Animated.Value(0)).current;
  React.useEffect(
    () =>
      Animated.timing(fadeAnim, {
        toValue: 1,
        delay: 1000,
        duration: 10,
        useNativeDriver: false,
      }).start(),
    [fadeAnim],
  );
  return (
    <NotificationPermissionStatusProvider>
      <Box flex={1} alignItems="center" backgroundColor="mainBackground">
        <Box
          flex={1}
          paddingTop="m"
          paddingBottom="m"
          alignSelf="stretch"
          accessibilityElementsHidden={isBottomSheetExpanded}
          importantForAccessibility={isBottomSheetExpanded ? 'no-hide-descendants' : undefined}
        >
          <SafeAreaView>
            <Header />
            <Animated.View style={[styles.card, {opacity: fadeAnim}]}>
              <Content isBottomSheetExpanded={isBottomSheetExpanded} />
            </Animated.View>
          </SafeAreaView>
        </Box>
        <BottomSheet ref={bottomSheetRef} expandedComponent={ExpandedContent} collapsedComponent={CollapsedContent} />
      </Box>
    </NotificationPermissionStatusProvider>
  );
}

render() {
    return (
      <MyBackground variant="light">
        <StatusBar
          barStyle="dark-content"
          backgroundColor={COLORS.PRIMARY_LIGHT}
        />
        <SafeAreaView style={{ flex: 1 }}>
          <View>
            <View style={styles.body}>
              <View>
                <Text style={styles.mediumText}>
                  User ID: {this.state.userId}
                </Text>
              </View>
              <View style={styles.horizontalRow}>
                <Text style={styles.normalText}>Service: </Text>
                <Switch
                  trackColor={{ false: '#767577', true: '#81b0ff' }}
                  thumbColor={
                    this.state.isServiceEnabled ? '#f5dd4b' : '#f4f3f4'
                  }
                  ios_backgroundColor="#3e3e3e"
                  onValueChange={this.onServiceSwitchChanged}
                  value={this.state.isServiceEnabled}
                  disabled={
                    !this.state.isLocationPermissionGranted ||
                    !this.state.isBluetoothOn
                  }
                />
              </View>
              <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={styles.scrollView}
              >
                <Text>{this.state.statusText}</Text>
              </ScrollView>
            </View>
          </View>
        </SafeAreaView>
      </MyBackground>
    )
  }

LanguageScreen = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const close = useCallback(() => navigation.goBack(), [navigation]);
  const {setLocale} = useStorage();
  const toggle = useCallback(
    (newLocale: 'en' | 'mn') => () => {
      setLocale(newLocale);
    },
    [setLocale],
  );

  return (
    <Box backgroundColor="overlayBackground" flex={1}>
      <SafeAreaView style={styles.flex}>
        <Toolbar
          title=""
          navIcon="icon-back-arrow"
          navText={i18n.translate('LanguageSelect.Close')}
          navLabel={i18n.translate('LanguageSelect.Close')}
          onIconClicked={close}
        />
        <ScrollView>
          <Text
            paddingHorizontal="m"
            variant="bodyTitle"
            color="bodyText"
            accessibilityRole="header"
            accessibilityAutoFocus
          >
            {i18n.translate('LanguageSelect.Title')}
          </Text>
          <Box
            marginHorizontal="m"
            paddingHorizontal="m"
            borderRadius={10}
            overflow="hidden"
            marginTop="m"
            accessibilityRole="radiogroup"
          >
            <LanguageSelectItem
              onPress={toggle('en')}
              text={i18n.translate('LanguageSelect.En')}
              isActive={i18n.locale === 'en'}
            />
            <LanguageSelectItem
              onPress={toggle('mn')}
              text={i18n.translate('LanguageSelect.Mn')}
              isActive={i18n.locale === 'mn'}
              lastItem
            />
          </Box>
        </ScrollView>
      </SafeAreaView>
    </Box>
  );
}

AgreementPolicy = () => {
  const navigation = useNavigation()
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor={'white'} barStyle="light-content" />
      <FormHeader>
        <View style={styles.header}>
          <Text style={styles.title}>{I18n.t('term_and_conditions')}</Text>
          <Text style={styles.subtitle}>{I18n.t('before_usage')}</Text>
          <Text style={styles.subtitle}>{I18n.t('please_accept_terms')}</Text>
        </View>
      </FormHeader>
      <View style={styles.content}>
        <ScrollView
          contentContainerStyle={{
            flexGrow: 1,
            paddingVertical: 16,
          }}
        >
          <View style={{ paddingHorizontal: 24 }}>
            <Text style={styles.agreement}>{getAgreementText()} </Text>
          </View>
        </ScrollView>
      </View>
      {/* <CheckBox
        title="ฉันยอมรับ{I18n.t('term_and_conditions')}"
        containerStyle={{
          backgroundColor: 'transparent',
          borderWidth: 0,
          marginBottom: 16,
        }}
        checked={agree}
        onPress={() => setAgree(!agree)}
        checkedColor={COLORS.BLUE}
        textStyle={{ color: COLORS.BLACK_1, fontSize: FONT_SIZES[600], fontWeight:'normal'}}
        fontFamily={FONT_BOLD}
      /> */}
      <View style={styles.footer}>
        <PrimaryButton
          // disabled={!agree}
          title={I18n.t('accept')}
          style={{ width: '100%' }}
          containerStyle={{ width: '100%', marginTop: normalize(16) }}
          onPress={() => {
            applicationState.setData('skipRegistration', true)
            navigation.navigate('Onboarding')
          }}
        />
        <Button
          type="outline"
          title={I18n.t('deny')}
          style={{ width: '100%' }}
          titleStyle={{
            fontFamily: FONT_MED,
            fontSize: FONT_SIZES[600],
            lineHeight: 30,
          }}
          containerStyle={{ width: '100%', marginTop: 8 }}
          onPress={() => {
            navigation.pop()
          }}
        />
      </View>
    </SafeAreaView>
  )
}

CheckboxExample = () => {
  const [tick, setTick] = useState(false);
  const Colors = useColors();
  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: Colors.white,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <TouchableWithoutFeedback onPress={() => setTick(!tick)}>
        <CheckBox checked={tick} containerStyle={{ marginVertical: 20 }} />
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={() => setTick(!tick)}>
        <CheckBox
          checked={tick}
          containerStyle={{ marginVertical: 20 }}
          size="md"
        />
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={() => setTick(!tick)}>
        <CheckBox
          checked={tick}
          containerStyle={{ marginVertical: 20 }}
          size="lg"
        />
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={() => setTick(!tick)}>
        <CheckBox
          checked
          disabled
          containerStyle={{ marginVertical: 20 }}
          size="lg"
        />
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={() => setTick(!tick)}>
        <CheckBox
          checked={false}
          disabled
          containerStyle={{ marginVertical: 20 }}
          size="lg"
        />
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={() => setTick(!tick)}>
        <CheckBox
          checked={tick}
          checkColor={Colors.primary}
          containerStyle={{
            marginVertical: 20,
            backgroundColor: Colors.white,
            borderWidth: 2,
            borderColor: Colors.primary,
          }}
          size="lg"
        />
      </TouchableWithoutFeedback>
    </SafeAreaView>
  );
}

DebugBackgroundLocation = () => {
  const navigation = useNavigation()
  const [logs, setLogs] = useState('')

  useEffect(() => {
    let interval = setInterval(() => {
      BackgroundGeolocation.logger.getLog().then((log) => {
        setLogs(log)
      });
    }, (1000))
    return () => clearInterval(interval)
  })

  return (
    <MyBackground variant="light">
      <StatusBar
        barStyle="dark-content"
        backgroundColor={COLORS.PRIMARY_LIGHT}
      />
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}
        >
          <Text style={{
            fontSize: FONT_SIZES[200] * 0.75
          }}>{logs}</Text>
        </ScrollView>
        <View style={{
          alignItems: 'center',
          paddingHorizontal: normalize(16),
          marginBottom: 16,
        }}>
          <PrimaryButton
            title={I18n.t('close')}
            style={{ width: '100%' }}
            containerStyle={{ width: '100%' }}
            onPress={() => {
              navigation.pop()
            }}
          />
        </View>
      </SafeAreaView>
    </MyBackground>
  )
}

ButtonExample = () => {
  const Colors = useColors();
  const [loading, setLoading] = useState(false);
  const handlePress = () => {
    // do some action
    setLoading(!loading);
  };
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: Colors.white }}>
      <View style={styles.exampleBtnContainer}>
        <Text style={{ color: Colors.font_1, fontSize: Fonts.size.h3 }}>
          Button Examples
        </Text>
        <View style={{ flexDirection: 'row', marginVertical: 20 }}>
          <Button
            type="primary"
            onPress={handlePress}
            label="Primary Button"
            customStyles={{ flex: 1, marginRight: 20 }}
          />
          <Button
            type="secondary"
            onPress={handlePress}
            label="Secondary Button"
            customStyles={{ flex: 1 }}
          />
        </View>
        <View style={{ flexDirection: 'row', marginVertical: 20 }}>
          <Button
            type="primary"
            onPress={handlePress}
            label="Primary Disabled"
            customStyles={{ flex: 1, marginRight: 20 }}
            disabled
          />
          <Button
            type="secondary"
            onPress={handlePress}
            label="Secondary Disabled"
            disabled
            customStyles={{ flex: 1 }}
          />
        </View>
        <View style={{ marginVertical: 20 }}>
          <Button
            type="primary"
            onPress={handlePress}
            label="Loading Button"
            loading={loading}
          />
        </View>
      </View>
    </SafeAreaView>
  );
}

TutorialScreen = () => {
  const navigation = useNavigation();
  const {width: viewportWidth} = useWindowDimensions();
  const carouselRef = useRef(null);
  const [currentStep, setCurrentStep] = useState(0);
  const [i18n] = useI18n();
  const close = useCallback(() => navigation.goBack(), [navigation]);

  const isStart = currentStep === 0;
  const isEnd = currentStep === tutorialData.length - 1;

  const renderItem = useCallback<CarouselProps<TutorialKey>['renderItem']>(
    ({item, index}) => {
      return (
        <View style={styles.flex} accessibilityElementsHidden={index !== currentStep}>
          <TutorialContent item={item} isActive={tutorialData[currentStep] === item} />
        </View>
      );
    },
    [currentStep],
  );

  const nextItem = useCallback(() => {
    if (carouselRef.current) {
      if (isEnd) {
        close();
        return;
      }
      (carouselRef.current! as CarouselStatic<TutorialKey>).snapToNext();
    }
  }, [close, isEnd]);

  const prevItem = useCallback(() => {
    if (carouselRef.current) {
      (carouselRef.current! as CarouselStatic<TutorialKey>).snapToPrev();
    }
  }, []);

  return (
    <Box backgroundColor="overlayBackground" flex={1}>
      <SafeAreaView style={styles.flex}>
        <Toolbar
          title=""
          navIcon="icon-back-arrow"
          navText={i18n.translate('Tutorial.Close')}
          navLabel={i18n.translate('Tutorial.Close')}
          onIconClicked={close}
        />
        <Carousel
          ref={carouselRef}
          data={tutorialData}
          renderItem={renderItem}
          sliderWidth={viewportWidth}
          itemWidth={viewportWidth}
          onSnapToItem={newIndex => setCurrentStep(newIndex)}
          importantForAccessibility="no"
          accessible={false}
        />
        <Box flexDirection="row" padding="l">
          <Box flex={1}>
            {!isStart && (
              <Button text={i18n.translate(`Tutorial.ActionBack`)} variant="subduedText" onPress={prevItem} />
            )}
          </Box>
          <Box flex={1} justifyContent="center">
            <ProgressCircles numberOfSteps={tutorialData.length} activeStep={currentStep + 1} marginBottom="none" />
          </Box>
          <Box flex={1}>
            <Button
              text={i18n.translate(`Tutorial.Action${isEnd ? 'End' : 'Next'}`)}
              variant="text"
              onPress={nextItem}
            />
          </Box>
        </Box>
      </SafeAreaView>
    </Box>
  );
}

OnboardComplete = () => {
  
  const STRING = {
    TITLE: I18n.t('register_successfully'),
    SUB_TITLE: I18n.t('can_start_using_now'),
    NEXT_BUTTON: I18n.t('start'),
  }
  const navigation = useNavigation()
  const resetTo = useResetTo()
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        backgroundColor={COLORS.WHITE}
        barStyle="dark-content"
      />      
      <View style={styles.header}>
        <Text style={styles.title}>{STRING.TITLE}</Text>
        <Text style={styles.subtitle}>{STRING.SUB_TITLE}</Text>
      </View>
      <View style={styles.content}>        
          <Icon name="checkcircleo" color={COLORS.GREEN} size={250} />
      </View>
      <View style={styles.footer}>
        <PrimaryButton
          title={STRING.NEXT_BUTTON}
          style={{ width: '100%' }}
          containerStyle={{ width: '100%' }}
          onPress={() => {
            // if (applicationState.getData(
            //   'filledQuestionaireV2',
            // )) {
            //   resetTo({ routeName: 'MainApp' })
            // } else {
            //   resetTo({ routeName: 'Questionaire' })
            // }
            resetTo({ routeName: 'MainApp' })
          }}
        />
      </View>
    </SafeAreaView>
  )
}

LanguageScreen = () => {
  const [i18n] = useI18n();
  const navigation = useNavigation();
  const close = useCallback(() => navigation.goBack(), [navigation]);
  const {setLocale} = useStorage();
  const toggle = useCallback(
    (newLocale: 'en' | 'fr') => () => {
      setLocale(newLocale);
    },
    [setLocale],
  );

  return (
    <Box backgroundColor="overlayBackground" flex={1}>
      <SafeAreaView style={styles.flex}>
        <Toolbar
          title={i18n.translate('LanguageSelect.Title')}
          navIcon="icon-back-arrow"
          navText={i18n.translate('LanguageSelect.Close')}
          navLabel={i18n.translate('LanguageSelect.Close')}
          onIconClicked={close}
        />
        <ScrollView>
          <Box
            marginHorizontal="m"
            paddingHorizontal="m"
            borderRadius={10}
            backgroundColor="infoBlockNeutralBackground"
            marginTop="m"
            accessibilityRole="radiogroup"
          >
            <LanguageSelectItem
              onPress={toggle('en')}
              text={i18n.translate('LanguageSelect.En')}
              isActive={i18n.locale === 'en'}
            />
            <LanguageSelectItem
              onPress={toggle('fr')}
              text={i18n.translate('LanguageSelect.Fr')}
              isActive={i18n.locale === 'fr'}
            />
          </Box>
        </ScrollView>
      </SafeAreaView>
    </Box>
  );
}

RadioButtonExample = (props: { navigation: any }) => {
  const Colors = useColors();
  // choosen will hold the value of selected radio button
  const [choosen, setChoosen] = useState('xtra small');
  const [radioGroupText, setRadioGroupText] = useState('value1');
  const radioPress = (value: string) => {
    setChoosen(value);
  };
  const onChangeRadioGroup = (selectedValue: string) =>
    setRadioGroupText(selectedValue);
  // const Colors = getColors(isDark);
  const goBack = useCallback(() => props.navigation.pop(), []);
  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: Colors.white,
        justifyContent: 'center',
      }}
    >
      <Icon
        name="arrow-back"
        size={20}
        style={{ margin: 20 }}
        onPress={goBack}
      />
      <Text style={{ margin: 20, fontWeight: 'bold' }}>
        Normal Radio Button
      </Text>
      <Text style={{ color: Colors.font_1, margin: 20 }}>
        {`Selected Value is ${choosen}`}
      </Text>
      <View style={{ margin: 20 }}>
        <RadioButton
          value="xtra small"
          onPress={radioPress}
          selected={choosen === 'xtra small'}
          containerStyle={{ marginVertical: 15 }}
          size="xs"
        />
        <RadioButton
          value="small"
          onPress={radioPress}
          selected={choosen === 'small'}
          containerStyle={{ marginVertical: 15 }}
          size="sm"
        />
        <RadioButton
          value="medium"
          onPress={radioPress}
          selected={choosen === 'medium'}
          containerStyle={{ marginVertical: 15 }}
          size="md"
        />
        <RadioButton
          value="large"
          onPress={radioPress}
          selected={choosen === 'large'}
          containerStyle={{ marginVertical: 15 }}
          labelStyle={{ color: Colors.font_2 }}
          size="lg"
        />
        {/* just for having a neat example ui display,
            these are not anyway important to the library
        */}
        <View style={{ height: scaleDimension(20, 'height'), width: '100%' }} />
        <RadioButton
          disabled
          value="disable-selected"
          selected
          containerStyle={{ marginVertical: 10 }}
        />
        <RadioButton
          disabled
          value="disable-unselected"
          containerStyle={{ marginVertical: 10 }}
        />
        <RadioButton
          disabled
          customLabel={<Text>Vinit</Text>}
          // value="disable-selected"
          selected
          containerStyle={{ marginVertical: 10 }}
        />

        <Text
          style={{
            marginVertical: 20,
            fontWeight: 'bold',
            color: Colors.font_1,
          }}
        >
          RadioGroup
        </Text>
        <Text
          style={{ marginBottom: 20, color: Colors.font_1 }}
        >{`Selected Value: ${radioGroupText}`}</Text>

        <RadioGroup
          onChange={onChangeRadioGroup}
          defaultValue="value1"
          containerStyle={{ marginVertical: 5 }}
        >
          <RadioButton value="value1" />
          <RadioButton value="value2 (small)" size="xs" />
          <RadioButton value="value3 (disabled)" disabled />
        </RadioGroup>
      </View>
    </SafeAreaView>
  );
}

OnboardingScreen = () => {
  const [i18n] = useI18n();
  const [currentIndex, setCurrentIndex] = useState(0);
  const carouselRef = useRef(null);
  const {setOnboarded} = useStorage();
  const navigation = useNavigation();
  const startExposureNotificationService = useStartExposureNotificationService();

  const handlePermissions = useCallback(async () => {
    setOnboarded(true);
    navigation.reset({
      index: 0,
      routes: [{name: 'Home'}],
    });
    await startExposureNotificationService();
  }, [navigation, setOnboarded, startExposureNotificationService]);

  const maxWidth = useMaxContentWidth();

  const renderItem = useCallback(
    ({item}: {item: ViewKey}) => {
      const ItemComponent = viewComponents[item];
      return (
        <Box maxWidth={maxWidth} alignSelf="center">
          <ItemComponent />
        </Box>
      );
    },
    [maxWidth],
  );

  const nextItem = useCallback(() => {
    if (carouselRef.current) {
      if (currentIndex === contentData.length - 1) {
        handlePermissions();
        return;
      }
      (carouselRef.current! as CarouselStatic<ViewKey>).snapToNext();
    }
  }, [currentIndex, handlePermissions]);

  const prevItem = useCallback(() => {
    if (carouselRef.current) {
      (carouselRef.current! as CarouselStatic<ViewKey>).snapToPrev();
    }
  }, []);

  const isStart = currentIndex === 0;
  const isEnd = currentIndex === contentData.length - 1;

  const BackButton = <Button text={i18n.translate('Onboarding.ActionBack')} variant="subduedText" onPress={prevItem} />;
  const LanguageButton = <LanguageToggle />;

  const [layout, setLayout] = useState<LayoutRectangle | undefined>();
  const onLayout = useCallback(({nativeEvent: {layout}}: LayoutChangeEvent) => {
    setLayout(layout);
  }, []);

  return (
    <Box flex={1} backgroundColor="overlayBackground">
      <SafeAreaView style={styles.flex}>
        <Header isOverlay />
        <Box flex={1} justifyContent="center" onLayout={onLayout}>
          {layout && (
            <Carousel
              ref={carouselRef}
              data={contentData}
              renderItem={renderItem}
              sliderWidth={layout.width}
              itemWidth={layout.width}
              itemHeight={layout.height}
              onSnapToItem={newIndex => setCurrentIndex(newIndex)}
            />
          )}
        </Box>
        <Box flexDirection="row" padding="l">
          <Box flex={1}>{isStart ? LanguageButton : BackButton}</Box>
          <Box flex={1} justifyContent="center">
            <ProgressCircles alignSelf="center" numberOfSteps={contentData.length} activeStep={currentIndex + 1} />
          </Box>
          <Box flex={1}>
            <Button
              text={i18n.translate(`Onboarding.Action${isEnd ? 'End' : 'Next'}`)}
              variant="text"
              onPress={nextItem}
            />
          </Box>
        </Box>
      </SafeAreaView>
    </Box>
  );
}