react-native#SafeAreaView TypeScript Examples

EmptyScreen: React.FC = () => {
  const colors = useMemo(() => [...new Array(20)].map(() => generateColor()), []);

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        contentContainerStyle={{
          paddingBottom: 80,
        }}
        data={colors}
        renderItem={({ item: color }) => (
          <View
            style={[styles.item, {
              backgroundColor: color
            }]}
          />
        )}
        keyExtractor={(item, idx) => `item_${idx}`}
      />
    </SafeAreaView>
  );
}

render() {
    return (
      <SafeAreaView style={styles.container}>
        <AlphabetList
          style={{ flex: 1 }}
          data={sampleData}
          renderCustomItem={this.renderListItem}
          renderCustomSectionHeader={this.renderSectionHeader}
          renderCustomListHeader={this.renderCustomListHeader}
          getItemHeight={() => sizes.itemHeight}
          sectionHeaderHeight={sizes.headerHeight}
          listHeaderHeight={sizes.listHeaderHeight}
          indexLetterStyle={{ color: colors.primary }}
        />
      </SafeAreaView>
    );
  }

ScreenWrapper: React.FC<ScreenWrapperProps> = ({
  children,
  noPadding,
}) => {
  const [{ editorBackground }] = useContext(ThemeContext);
  return (
    <SafeAreaView
      style={{
        backgroundColor: editorBackground,
        flex: 1,
        width: "100%",
      }}
    >
      <View
        style={{
          padding: noPadding ? 0 : 16,
          flex: 1,
        }}
      >
        {children}
      </View>
    </SafeAreaView>
  );
}

App = () => {
  return (
    <SafeAreaView>
      <ScrollView contentContainerStyle={styles.scrollViewContent}>
        <Spacing />
        <Logo />
        <Spacing />
        <Donut2 />
        <Spacing />
        <Donut />
        <Spacing />
        <Progress />
        <Spacing />
        <Stopwatch />
        <Spacing />
        <RandomArc />
        <Spacing />
        <Slider />
        <Spacing />
      </ScrollView>
    </SafeAreaView>
  );
}

App = () => {
  const [value, setValue] = useState('Hello @[Mary](2)! How are you?');

  return (
    <SafeAreaView>
      <MentionInput
        value={value}
        onChange={setValue}

        partTypes={[
          {
            trigger: '@',
            renderSuggestions: renderMentionSuggestions,
          },
          {
            trigger: '#',
            renderSuggestions: renderHashtagSuggestions,
            textStyle: {fontWeight: 'bold', color: 'grey'},
          },
          {
            pattern: /(https?:\/\/|www\.)[-a-zA-Z0-9@:%._\+~#=]{1,256}\.(xn--)?[a-z0-9-]{2,20}\b([-a-zA-Z0-9@:%_\+\[\],.~#?&\/=]*[-a-zA-Z0-9@:%_\+\]~#?&\/=])*/gi,
            textStyle: {color: 'blue'},
          },
        ]}

        placeholder="Type here..."
        style={{padding: 12}}
      />
    </SafeAreaView>
  );
}

App = () => {
  const [selectedRange, setRange] = useState({});
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <DateRangePicker
          onSelectDateRange={range => {
            setRange(range);
          }}
          blockSingleDateSelection={false}
          responseFormat="YYYY-MM-DD"
          maxDate={moment()}
          minDate={moment().subtract(100, 'days')}
          selectedDateContainerStyle={styles.selectedDateContainerStyle}
          selectedDateStyle={styles.selectedDateStyle}
        />
        <View style={styles.container}>
          <Text>first date: {selectedRange.firstDate}</Text>
          <Text>second date: {selectedRange.secondDate}</Text>
        </View>
      </View>
    </SafeAreaView>
  );
}

export function HomeScreen(props) {
  const renderItem: ListRenderItem<ExampleListItem>  = ({ item })  => (
    React.createElement(item.component, {
      index: item.id,
      style: styles.exampleListItem
    })
  );

  return (
    <SafeAreaView>
      {false && (
        <TouchableOpacity
          onPress={() => {
            props.navigation.navigate('Test');
          }}
        >
          <Text>
            Push
          </Text>
        </TouchableOpacity>
      )}
      <FlatList
        contentContainerStyle={styles.scrollContentContainer}
        data={EXAMPLE_ITEMS}
        renderItem={renderItem}
        keyExtractor={(item) => `item-${item.id}`}
      />
    </SafeAreaView>
  );
}

function App() {
  const [nightMode, setNightmode] = useState(false);

  return (
    <Provider theme={nightMode ? DarkTheme : DefaultTheme}>
      <ThemeProvider theme={nightMode ? DarkTheme : DefaultTheme}>
        <StatusBar
          backgroundColor={
            nightMode ? DarkTheme.colors.surface : DefaultTheme.colors.primary
          }
          barStyle={'light-content'}
        />
        <Surface style={styles.container}>
          <Appbar.Header>
            <Appbar.Content title="React Native Paper Form Builder" />
            <Appbar.Action
              icon={nightMode ? 'brightness-7' : 'brightness-3'}
              onPress={() => setNightmode(!nightMode)}
            />
          </Appbar.Header>
          <SafeAreaView style={styles.container}>
            <ScrollView
              showsVerticalScrollIndicator={false}
              style={styles.scrollView}
              keyboardShouldPersistTaps={'handled'}>
              <AdvancedExample />
            </ScrollView>
            {Platform.OS === 'ios' && <KeyboardSpacer />}
          </SafeAreaView>
        </Surface>
      </ThemeProvider>
    </Provider>
  );
}

App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default function App(): JSX.Element {
  return (
    <Provider store={createStore(cartReducer)}>
      <SafeAreaView style={{ flex: 1 }}>
        <NavigationContainer>
          <NavigationStacks />
        </NavigationContainer>
      </SafeAreaView>
    </Provider>
  );
}

export default function App(): JSX.Element {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaView style={{ flex: 1 }}>
          <Loading />
          <NavigationContainer>
            <NavigationStacks/>
          </NavigationContainer>
          <FlashMessage position="top" />
        </SafeAreaView>
      </PersistGate>
    </Provider>
  );
}

App = () => {
  try {
    const isDarkMode = useColorScheme() === 'dark';

    const backgroundStyle = {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };

    return (
      <SafeAreaView style={backgroundStyle}>
        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
        <AILabNativeImage source={require('./storybook/dinner.jpg')} />
      </SafeAreaView>
    );
  } catch (e) {
    console.log((e as any).message);
    return (
      <SafeAreaView>
        <Text>What's going on?</Text>
      </SafeAreaView>
    );
  }
}

export function SettingsList() {
    const navigation = useNavigation<SettingsNavigationProp>();
    const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
    const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
    const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);

    return (
        <ScrollView>
            <SafeAreaView>
                <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
                <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
                <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
            </SafeAreaView>
        </ScrollView>
    );
}

StoriesWrapperNative = ({ story }) => {
  const themeNames = Object.keys(themes)
  const [isLight, changeMode] = useState(true)
  const [activeTheme, changeTheme] = useState(themeNames[0] as Brand)
  const [modalVisible, setModalVisible] = useState(false)
  const mode = isLight ? 'light' : 'dark'

  const theme = buildTheme(activeTheme, mode)

  return (
    <SafeAreaView style={styles.defaultScreen}>
      <ThemeProvider theme={theme}>
        <Container style={{ borderBottomWidth: 1 }}>
          <ThemeSelectorModal
            modalVisible={modalVisible}
            themeNames={themeNames}
            activeTheme={activeTheme}
            changeTheme={changeTheme}
            setModalVisible={setModalVisible}
          />
          <Button
            onPress={() => setModalVisible(true)}
            text="Change Theme"
            type="outlined"
          />
          <SwitchWithLabel
            onChange={changeMode}
            label="Light"
            isActive={isLight}
            isLast
          />
        </Container>
        <StoriesContainer>
          {story && story({ activeTheme, light: isLight })}
        </StoriesContainer>
      </ThemeProvider>
    </SafeAreaView>
  )
}

SafeAreaLayout = (
  props: React.PropsWithChildren<SafeAreaLayoutProps>,
) => {
  const {theme, children} = props;

  return (
    <>
      <StatusBar
        barStyle="dark-content"
        backgroundColor={theme.palette.statusBarSecondary}
      />
      <SafeAreaView
        style={[styles.safeArea, {backgroundColor: theme.palette.background}]}>
        {children}
      </SafeAreaView>
    </>
  );
}

Home = ({}: Props) => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.innerContainer}>
        <Space.V s={8} />
        <ReduxExample />
        <Space.V s={8} />
        <DataFetchingExample />
      </View>
    </SafeAreaView>
  )
}

export default function ErrorPage(props: Props) {
  let { isConnected, retryConnection } = useNetwork();
  let { onRetry } = props;

  let errorType: keyof typeof ERRORS =
    isConnected === NetworkStateEnum.CONNECTED ? 'data' : 'noInternet';
  let { title, message, image } = ERRORS[errorType];

  return (
    <SafeAreaView style={styles.flex}>
      <View style={styles.center}>
        <Image
          source={image}
          width={100}
          height={100}
          style={styles.emptyCartImage}
        />
        <Text weight="bold" style={styles.title}>
          {title}
        </Text>
        <Text style={styles.message}>{message}</Text>
        <Button
          style={[defaultButton, styles.buttonStyle]}
          labelStyle={defaultButtonLabel}
          onPress={() => {
            isConnected === NetworkStateEnum.NOT_CONNECTED && retryConnection();
            onRetry();
          }}
        >
          {t('Try Again')}
        </Button>
      </View>
    </SafeAreaView>
  );
}

export default function DatePickerModalHeader(
  props: DatePickerModalHeaderProps
) {
  const { disableSafeTop, locale } = props
  const saveLabel = props.saveLabel || getTranslation(locale, 'save')
  const color = useHeaderTextColor()
  return (
    <>
      <Animated.View style={styles.animated}>
        <SafeAreaView
          style={[
            styles.safeContent,
            disableSafeTop && styles.safeContentNoTop,
          ]}
        >
          <Appbar style={styles.appbarHeader}>
            <Appbar.Action
              icon="close"
              accessibilityLabel={getTranslation(locale, 'close')}
              onPress={props.onDismiss}
              color={color}
              testID="react-native-paper-dates-close"
            />
            <Appbar.Content title={''} />
            <Button
              color={color}
              onPress={props.onSave}
              uppercase={props.uppercase ?? true}
              testID="react-native-paper-dates-save"
            >
              {saveLabel}
            </Button>
          </Appbar>
        </SafeAreaView>
      </Animated.View>
    </>
  )
}

function Home(props: PropTypes) {
  const barStyle = props.barStyle || 'dark-content';
  return (
    <>
      <StatusBar barStyle={barStyle} />
      <SafeAreaView style={{ flex: 1 }}>{props.children}</SafeAreaView>
    </>
  );
}

App = () => {
  const imageWidth: number = useResponsiveWidth(50) - 20;
  const [isHorizontal, setIsHorizontal] = useState<boolean>(false);

  const toggleHorizontal = () => setIsHorizontal(!isHorizontal);

  const imageProp = isHorizontal
    ? { height: imageWidth }
    : { width: imageWidth };

  return (
    <SafeAreaView>
      <View style={styles.header}>
        <Switch onValueChange={toggleHorizontal} value={isHorizontal} />
        <Text style={styles.headerText}>Horizontal</Text>
      </View>
      <RNMasonryScroll
        removeClippedSubviews={true}
        columns={isHorizontal ? 3 : 2}
        evenColumnStyle={styles.evenColumnStyle}
        oddColumnStyle={
          isHorizontal
            ? styles.oddColumnStyleHorizontal
            : styles.oddColumnStyleVertical
        }
        horizontal={isHorizontal}
      >
        {images.map((image, imageIndex) => {
          return (
            <AnimatableView
              animation={isHorizontal ? "fadeInRight" : "fadeInUp"}
              delay={100 * imageIndex}
              style={styles.imageContainer}
            >
              <Image source={{ uri: image }} {...imageProp} key={imageIndex} />
            </AnimatableView>
          );
        })}
      </RNMasonryScroll>
    </SafeAreaView>
  );
}

Detail: React.FC = () => {
  const [data, setData] = useState<Data>({} as Data);
  const navigation = useNavigation();
  const route = useRoute();

  const routeParams = route.params as Params;

  useEffect(() => {
    async function loadPoint() {
      const response = await api.get(`/points/${routeParams.point_id}`);

      setData(response.data);
    }

    loadPoint();
  }, []);

  function handleNavigateBack() {
    navigation.goBack();
  }

  function handleComposeMail() {
    MailComposer.composeAsync({
      subject: "Interesse na coleta de resíduos",
      recipients: [data.point.email],
    });
  }

  function handleWhatsApp() {
    Linking.openURL(
      `whatsapp://send?phone=${data.point.whatsapp}&text=Tenho interesse na coleta de resíduos`
    );
  }
  if (!data.point) {
    return null;
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TouchableOpacity onPress={handleNavigateBack}>
          <Icon name="arrow-left" size={20} color="#34cb79" />
        </TouchableOpacity>

        <Image
          style={styles.pointImage}
          source={{
            uri: data.point.image_url,
          }}
        />

        <Text style={styles.pointName}>{data.point.name}</Text>
        <Text style={styles.pointItems}>
          {data.items.map((item) => item.title).join(",")}
        </Text>

        <View style={styles.address}>
          <Text style={styles.addressTitle}>Endereço</Text>
          <Text style={styles.addressContent}>
            {data.point.city}, {data.point.uf}
          </Text>
        </View>
      </View>
      <View style={styles.footer}>
        <RectButton style={styles.button} onPress={() => handleWhatsApp()}>
          <FontAwesome name="whatsapp" size={20} color="#fff" />
          <Text style={styles.buttonText}>Whatsapp</Text>
        </RectButton>
        <RectButton style={styles.button} onPress={() => handleComposeMail()}>
          <Icon name="mail" size={20} color="#fff" />
          <Text style={styles.buttonText}>E-mail</Text>
        </RectButton>
      </View>
    </SafeAreaView>
  );
}

render() {
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.buttonContainer}>
            <Login />
          </View>
          <View style={styles.buttonContainer}>
            <Button testID='sendInAppBtn' title="Send In-App" onPress={() => {
              RNE2E.sendCommand("send-in-app", { campaignId: sendInAppCampaignId })
            }} />
          </View>
          <View style={styles.buttonContainer}>
            <Button testID='skipInAppBtn' title="Skip In-App" onPress={() => {
              RNE2E.sendCommand("send-in-app", { campaignId: skipInAppCampaignId })
            }} />
          </View>
          <View style={styles.buttonContainer}>
            <Button testID="customActionBtn" title="Custom Action" onPress={() => {
              RNE2E.sendCommand("send-in-app", { campaignId: customActionCampaignId })
            }} />
          </View>
          <View style={styles.buttonContainer}>
            <Button testID="openDeepLinkBtn" title="Url Delegate Open Deep Link" onPress={() => {
              RNE2E.sendCommand("send-in-app", { campaignId: openDeepLinkCampaignId })
            }} />
          </View>
          <View style={styles.buttonContainer}>
            <Button testID="openSafariBtn" title="Url Delegate Open Safari" onPress={() => {
              RNE2E.sendCommand("send-in-app", { campaignId: openSafariCampaignId })
            }} />
          </View>

          <View style={styles.buttonContainer}>
            <Button title="Get In-app Messages" onPress={() => {
              Iterable.inAppManager.getMessages().then(messages => {
                console.log("messages: " + messages.length)
                messages.forEach(message => {
                  console.log(JSON.stringify(message, null, 2))
                })
              })
            }} />
          </View>
          <View style={styles.buttonContainer}>
            <Button title="Remove In-App Message" onPress={() => {
              Iterable.inAppManager.getMessages().then(messages => {
                console.log("total messages: " + messages.length)
                if (messages.length > 0) {
                  Iterable.inAppManager.removeMessage(messages[messages.length - 1], IterableInAppLocation.inbox, IterableInAppDeleteSource.deleteButton)
                }
              })
            }} />
          </View>
          <View style={styles.buttonContainer}>
            <Button testID="clearAllInApps" title="Clear All In-App Messages" onPress={() => {
              console.log("clearAllInApps")
              RNE2E.clearAllInAppMessages().then(success => {
                console.log("cleared all in-app messages: " + success)
                this.setState({ statusText: "Cleared all in-apps" })
              })
            }} />
          </View>
          <View style={styles.buttonContainer}>
            <Button testID="resetBtn" title="Reset" onPress={() => {
              console.log("reset")
              this.setState({ statusText: "" })
            }} />
          </View>
        </ScrollView>
        <View style={styles.textContainer}>
          <Text testID='statusText' style={styles.statusText}>{this.state.statusText}</Text>
        </View>
      </SafeAreaView>
    )
  }

App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Same changes between iOS and Android by metro
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
}

render() {
    const disabled =
      this.state.appState === UIState.LOADING ||
      this.state.appState === UIState.ERROR ||
      this.state.appState === UIState.PROCESSING;

    return (
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="dark-content" backgroundColor="#377DFF" />
        <View style={styles.statusBar}>
          <Text style={styles.statusBarText}>Leopard</Text>
        </View>
        <View style={{flex: 6}}>
          <ScrollView style={styles.transcriptionBox}>
            <Text style={styles.transcriptionText}>
              {this.state.transcription}
            </Text>
          </ScrollView>
        </View>

        {this.state.appState === UIState.ERROR ? (
          <View style={styles.errorBox}>
            <Text
              style={{
                color: 'white',
                fontSize: 16,
              }}>
              {this.state.errorMessage}
            </Text>
          </View>
        ) : (
          <View style={styles.stateContainer}>
            {this.state.appState === UIState.INIT && (
              <Text style={{textAlign: 'center'}}>
                Record up to 2 minutes of audio to be transcribed by Leopard
              </Text>
            )}

            {this.state.appState === UIState.RECORDING && (
              <Text>
                Recording: {this.state.recordSeconds.toFixed(1)} / 120 (seconds)
              </Text>
            )}

            {this.state.appState === UIState.PROCESSING && (
              <Text>Processing audio...</Text>
            )}

            {this.state.appState === UIState.TRANSCRIBED && (
              <Text>
                Transcribed {this.state.recordSeconds.toFixed(1)} seconds of
                audio in {this.state.processSeconds.toFixed(1)} seconds
              </Text>
            )}
          </View>
        )}

        <View
          style={{flex: 1, justifyContent: 'center', alignContent: 'center'}}>
          <TouchableOpacity
            style={[styles.buttonStyle, disabled ? styles.buttonDisabled : {}]}
            onPress={() => this._toggleListening()}
            disabled={disabled}>
            <Text style={styles.buttonText}>
              {this.state.appState === UIState.RECORDING ? 'Stop' : 'Start'}
            </Text>
          </TouchableOpacity>
        </View>

        <View
          style={{flex: 0.5, justifyContent: 'flex-end', paddingBottom: 10}}>
          <Text style={styles.instructions}>
            Made in Vancouver, Canada by Picovoice
          </Text>
        </View>
      </SafeAreaView>
    );
  }

render() {
    const { needsUpdate, error } = this.state;
    let statusTxt;
    if (needsUpdate) {
      statusTxt = 'YES';
    } else if (needsUpdate === false) {
      statusTxt = 'NO';
    } else if (error) {
      statusTxt = 'Error, check below';
    } else {
      statusTxt = 'Not sure yet';
    }
    return (
      <>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <View style={styles.container}>
            <View style={styles.aButton}>
              <Button
                title="Check for updates"
                color={BUTTON_COLOR}
                onPress={this.checkForUpdates}
              />
            </View>
            <View style={styles.aButton}>
              <Button
                disabled={!needsUpdate}
                title="Start Updating"
                color={BUTTON_COLOR}
                onPress={this.startUpdating}
              />
            </View>
            <View
              // eslint-disable-next-line react-native/no-inline-styles
              style={{
                // backgroundColor: 'pink'
                alignItems: 'center',
              }}
            >
              <Text
                style={styles.textStyle}
              >{`Needs update: ${'\n'}${statusTxt}`}</Text>
            </View>
            {error ? (
              <View style={styles.errorContainer}>
                <Text style={styles.errorTextStyle}>{`Error: ${error}`}</Text>
              </View>
            ) : null}
          </View>
        </SafeAreaView>
      </>
    );
  }

Routes: React.FC<RoutesProps> = ({}) => {
  const { editorBackground } = useTheme();
  const { data, isLoading } = useQuery<MeResponse>("/me");
  const routeNameRef = React.useRef<string | undefined>();
  const navigationRef = React.useRef<NavigationContainerRef>(null);

  let body: any = null;

  if (isLoading) {
    body = <FullscreenLoading />;
  } else if (!data?.user) {
    body = <AuthStack />;
  } else if (data.user.goal && data.user.codeImgIds.length) {
    body = <MainTabStack />;
  } else {
    body = <ProfileStack isNewUser />;
  }

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: editorBackground }}>
      <ReactQueryErrorResetBoundary>
        {({ reset }) => (
          <ErrorBoundary
            onReset={reset}
            FallbackComponent={ErrorFallback}
            onError={myErrorHandler}
          >
            <NavigationContainer
              ref={navigationRef}
              onStateChange={() => {
                const previousRouteName = routeNameRef.current;
                const currentRouteName = navigationRef.current?.getCurrentRoute()
                  ?.name;

                if (previousRouteName !== currentRouteName) {
                  if (
                    !["swiper", "viewProfile", "matchy"].includes(
                      currentRouteName || ""
                    )
                  ) {
                    useShowTabs.getState().set({ show: false });
                  } else {
                    useShowTabs.getState().set({ show: true });
                  }
                }

                routeNameRef.current = currentRouteName;
              }}
              linking={linking}
              fallback={<FullscreenLoading />}
            >
              {body}
            </NavigationContainer>
          </ErrorBoundary>
        )}
      </ReactQueryErrorResetBoundary>
    </SafeAreaView>
  );
}

Routes: React.FC<RoutesProps> = ({}) => {
  const { editorBackground } = useTheme();
  const { data, isLoading } = useQuery<MeResponse>("/me");
  const routeNameRef = React.useRef<string | undefined>();
  const navigationRef = React.useRef<NavigationContainerRef>(null);

  let body: any = null;

  if (isLoading) {
    body = <FullscreenLoading />;
  } else if (!data?.user) {
    body = <AuthStack />;
  } else if (data.user.goal && data.user.codeImgIds.length) {
    body = <MainTabStack />;
  } else {
    body = <ProfileStack isNewUser />;
  }

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: editorBackground }}>
      <ReactQueryErrorResetBoundary>
        {({ reset }) => (
          <ErrorBoundary
            onReset={reset}
            FallbackComponent={ErrorFallback}
            onError={myErrorHandler}
          >
            <NavigationContainer
              ref={navigationRef}
              onStateChange={() => {
                const previousRouteName = routeNameRef.current;
                const currentRouteName = navigationRef.current?.getCurrentRoute()
                  ?.name;

                if (previousRouteName !== currentRouteName) {
                  if (
                    !["swiper", "viewProfile", "matchy"].includes(
                      currentRouteName || ""
                    )
                  ) {
                    useShowTabs.getState().set({ show: false });
                  } else {
                    useShowTabs.getState().set({ show: true });
                  }
                }

                routeNameRef.current = currentRouteName;
              }}
              linking={linking}
              fallback={<FullscreenLoading />}
            >
              {body}
            </NavigationContainer>
          </ErrorBoundary>
        )}
      </ReactQueryErrorResetBoundary>
    </SafeAreaView>
  );
}

OnboardBluetooth = () => {
  const navigation = useNavigation()
  const contactTracer = useContactTracer()

  const { showSpinner, hide } = useHUD()


  const handleSubmit = async () => {
    showSpinner()
    await contactTracer?.enable()
    hide()

    setTimeout(() => {
    navigation.navigate('OnboardNotification')},1000)
  }

  return ( <>
    <SafeAreaView style={{
        backgroundColor: COLORS.BLUE,
      }}/>
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: COLORS.WHITE,
      }}
    >
      <StatusBar backgroundColor={COLORS.WHITE} barStyle="dark-content" />
      <OnboardHeader 
        style={{
          backgroundColor: COLORS.BLUE,
        }}/>
      <View
        style={styles.topContainer}
      >
        <View style={{ padding: 8, paddingHorizontal: 30,  justifyContent: 'center', alignItems: 'center'}}>
          <Image
            source={require('../../assets/morchana-permission-bluetooth.png')}
            resizeMode="contain"
            style={{ height: doctorSize }}
          />
          <Text style={I18n.currentLocale() == 'en'? styles.titleEN : styles.title}>{I18n.t('risky_ppl_nearby')}</Text>
          <Text style={styles.subtitle}>{I18n.t('app_can_check_with_bluetooth')}</Text>
        </View>
      </View>
      <View
        style={styles.bottomContainer}
      >
        <View style={{ flexDirection: 'row' }}>
          <View style={{ paddingRight: 16 }}>
            <Image
              source={require('../../assets/perm-bluetooth-icon.png')}
              resizeMode="contain"
              style={{ width: normalize(40) }}
            />
          </View>
          <View style={{ flex: 1 }}>
            <Text style={styles.itemTitle}>{I18n.t('pls_grant_bluetooth_access')}</Text>
            <Text style={styles.description}>
              {I18n.t('consume_low_energy_and_can_detect_closed_contact')}
            </Text>
          </View>
        </View>
        <PrimaryButton
          containerStyle={{ width: '100%' }}
          title={I18n.t('grant_permission')}
          style={{
            marginTop: 30,
            alignSelf: 'center',
            width: '100%',
            backgroundColor: COLORS.BLUE_BUTTON,
          }}
          onPress={() => handleSubmit()}
        />
      </View>
    </SafeAreaView>
    </>
  )
}

function AutoComplete(props: AutoCompleteProps) {
  const {visible, setVisible, textInputProps, options, field} = props;
  const theme = useTheme();
  const styles = useMemo(
    () =>
      StyleSheet.create({
        containerStyle: {
          flex: 1,
        },
        searchStyle: {
          padding: 20,
        },
      }),
    [],
  );
  const [selectedValue, setSelectedValue] = useState(field.value);
  const [search, setSearch] = useState('');

  return (
    <Modal visible={visible} onDismiss={() => setVisible(false)}>
      <Surface style={styles.containerStyle}>
        <Appbar.Header>
          <Appbar.Action 
            testID={`${ props.textInputProps?.testID }Close`}
            icon={'close'}
            onPress={() => setVisible(false)} />
          <Appbar.Content title={textInputProps?.label} />
          <Appbar.Action
            testID={`${ props.textInputProps?.testID }Check`}
            icon={'check'}
            disabled={!selectedValue}
            onPress={() => {
              field.onChange(selectedValue);
              setVisible(false);
            }}
          />
        </Appbar.Header>
        <SafeAreaView style={styles.containerStyle}>
          <View style={styles.searchStyle}>
            <Searchbar
              testID={`${ props.textInputProps?.testID }SearchBar`}
              value={search}
              onChangeText={setSearch}
              placeholder={props.textInputProps?.placeholder ? props.textInputProps.placeholder : `Search ${ textInputProps?.label ?? "" }`}
            />
          </View>
          <FlatList
            data={options.filter(
              (option) =>
                option.label.toLowerCase().indexOf(search.toLowerCase()) !== -1,
            )}
            renderItem={({item}) => (
              <List.Item
                title={item.label}
                onPress={() => {
                  setSelectedValue(`${item.value}`);
                }}
                titleStyle={{
                  color:
                    `${item.value}` === selectedValue
                      ? theme.colors.primary
                      : theme.colors.text,
                }}
              />
            )}
            ItemSeparatorComponent={() => <Divider />}
            keyExtractor={(item) => `${item.value}`}
          />
        </SafeAreaView>
      </Surface>
    </Modal>
  );
}