@react-navigation/native#useNavigation TypeScript Examples

Header = ({isOverlay}: HeaderProps) => {
  const [i18n] = useI18n();
  const navigation = useNavigation();
  const onLogoPress = useCallback(() => {
    navigation.dispatch(DrawerActions.openDrawer());
  }, [navigation]);
  return (
    <TouchableWithoutFeedback onPress={onLogoPress}>
      <Box flexDirection="row" alignItems="center" justifyContent="center" marginBottom="l">
        <Box marginHorizontal="s">
          <Icon size={20} name="shield-covid" />
        </Box>
        <Text variant="homeHeader" color={isOverlay ? 'overlayBodyText' : 'bodyText'}>
          {i18n.translate('Home.AppName')}
        </Text>
      </Box>
    </TouchableWithoutFeedback>
  );
}

AppointmentCreated: React.FC = () => {
  const { reset } = useNavigation();
  const { params } = useRoute();

  const { date } = params as RouteParams;

  const handleOkPressed = useCallback(() => {
    reset({
      routes: [{ name: 'Dashboard' }],
      index: 0,
    });
  }, [reset]);

  const formattedDate = useMemo(() => {
    return format(date, "EEEE', dia' dd 'de' MMMM 'de' yyyy 'às' HH:mm'h'", {
      locale: ptBR,
    });
  }, [date]);

  return (
    <Container>
      <Icon name="check" size={80} color="#04d461" />

      <Title>Agendamento concluído</Title>
      <Description>{formattedDate}</Description>

      <OkButton onPress={handleOkPressed}>
        <OkButtonText>Ok</OkButtonText>
      </OkButton>
    </Container>
  );
}

export default function Header({ title, showCancel = true }: HeaderProps) {
  const navigation = useNavigation();

  function handleGoBackToAppHomePage() {
    navigation.navigate('OrphanagesMap');
  }

  return (
    <View style={styles.container}>
      <BorderlessButton onPress={navigation.goBack}>
        <Feather name="arrow-left" size={24} color="#15b6d6" />
      </BorderlessButton>

      <Text style={styles.title}>{title}</Text>

      {showCancel ? (
        <BorderlessButton onPress={handleGoBackToAppHomePage}>
          <Feather name="x" size={24} color="#ff669d" />
        </BorderlessButton>
      ) : (
        <View />
      )}
    </View>
  );
}

jest.mock('@react-navigation/native', () => {
  const originalModule = jest.requireActual('@react-navigation/native');

  return {
    __esModule: true,
    ...originalModule,
    useNavigation: jest.fn(),
  };
});

Back: FC<BackProps> = ({
  variant = 'default',
  onPress: onPressProp
}) => {
  const navigation = useNavigation();
  const {t} = useTranslation();

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

  return (
    <TouchableWithoutFeedback
      accessible
      accessibilityRole="button"
      accessibilityHint={t('common:back:hint')}
      accessibilityLabel={t('common:back:label')}
      onPress={onPressProp || onPress}>
      <View style={styles.container}>
        <Image
          source={icons[variant]}
          accessibilityIgnoresInvertColors={false}
        />
      </View>
    </TouchableWithoutFeedback>
  );
}

AlbumComponent = (props: AlbumProps) => {

  const navigation = useNavigation();

  const onPress = () => {
    navigation.navigate('AlbumScreen', { id: props.album.id })
  }

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={styles.container}>
          <Image source={{uri: props.album.imageUri}} style={styles.image}/>
          <Text style={styles.text}>{props.album.artistsHeadline}</Text>
      </View>
    </TouchableWithoutFeedback>

  )
}

NewTweetButton = () => {

  const navigation = useNavigation();

  const onPress = () => {
    navigation.navigate('NewTweet');
  }

  return (
    <TouchableOpacity
      activeOpacity={0.8}
      style={styles.button}
      onPress={onPress}
    >
      <MaterialCommunityIcons name={"feather"} size={30} color="white" />
    </TouchableOpacity>
  )
}

Cog = () => {
  const { buttonBackground } = useTheme();
  const navigation = useNavigation<
    ProfileStackNav<"viewProfile">["navigation"]
  >();

  return (
    <TouchableOpacity
      style={{
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        paddingRight: 4,
        paddingLeft: 8,
        paddingBottom: 4,
      }}
      onPress={() => {
        navigation.navigate("settings");
      }}
    >
      <Ionicons name="md-settings" size={27} color={buttonBackground} />
    </TouchableOpacity>
  );
}

HeaderComponent: React.FC<IHeaderProps> = ({ title, showCancel = true }: IHeaderProps) => {
    const navigation = useNavigation();

    function handleGoHomePage() {
        navigation.navigate('OrphanagesMap');
    }

    return (
        <Container>
            <BackButton onPress={navigation.goBack}>
                <Feather name="arrow-left" size={24} color="#15B6D6" />
            </BackButton>
            <Title>
                {title}
            </Title>

            { showCancel ?
                (
                    <CloseButton onPress={handleGoHomePage}>
                        <Feather name="x" size={24} color="#FF669D" />
                    </CloseButton>
                ) : (
                    <View />
                )
            }
        </Container>
    );
}

Header = () => {
  const navigation = useNavigation();
  const onLogoPress = useCallback(() => {
    navigation.navigate('TestScreen');
  }, [navigation]);

  if (TEST_MODE) {
    return (
      <TouchableWithoutFeedback onPress={onLogoPress} testID="headerButton">
        {BasicHeader()}
      </TouchableWithoutFeedback>
    );
  }
  return <BasicHeader />;
}

PayButton: React.FC<ButtonProps> = ({ focused }) => {
  const navigation = useNavigation();

  return (
    <TouchableWithoutFeedback onPress={() => navigation.navigate('Pay')}>
      <Linear
        colors={focused ? ['#fff', '#ccc'] : ['#00fc6c', '#00ac4a']}
        start={{ x: 1, y: 0.2 }}
      >
        <MaterialIcons
          name="attach-money"
          size={30}
          color={focused ? '#222' : '#fff'}
        />
        <Label focused={focused}>Pagar</Label>
      </Linear>
    </TouchableWithoutFeedback>
  );
}

export function DebugControls(props: ContextMenuExampleProps) {
  const navigation = useNavigation();

  return (
    <ContextMenuCard
      style={props.style}
      index={props.index}
      title={'Debug Controls'}
      subtitle={'For testing and stuff'}
    >
      <CardButton
        title={'Push: Home'}
        subtitle={'Navigate to "Home" screen...'}
        onPress={() => {
          // @ts-ignore
          navigation.push('Home');
        }}
      />
      <CardButton
        title={'Push: Test'}
        subtitle={'Navigate to "Test" screen...'}
        onPress={() => {
          // @ts-ignore
          navigation.push('Test');
        }}
      />
    </ContextMenuCard>
  );
}

function Example({ title, children }: ExampleProps) {
  const navigation = useNavigation();

  return (
    <ScreenContainer
      hasSafeArea={true}
      hasTopSafeArea={true}
      hasBottomSafeArea={true}
      scrollable={false}
    >
      <View style={exampleStyles.headerStyle}>
        <TouchableOpacity
          style={exampleStyles.menuButtonStyle}
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
          <Image
            style={exampleStyles.menuButtonImageStyle}
            source={require("./assets/images/hamburger.png")}
          />
        </TouchableOpacity>

        <Text style={[exampleStyles.headerTextStyle]}>{title}</Text>
      </View>
      <ScreenContainer scrollable={true} hasSafeArea={false}>
        {children}
      </ScreenContainer>
    </ScreenContainer>
  );
}

PageHeader: React.FC<PageHeaderProps> = ({title}) => {

    const {navigate} = useNavigation();

    function handleGoBack() {
        navigate('Landing');
    }

  return <View style={styles.container}>
      <View style={styles.topBar}>
          <BorderlessButton onPress={handleGoBack}>
          <Image source={backIcon} resizeMode="contain" />
          </BorderlessButton>

          <Image source={logoImg} resizeMode="contain" />
      </View>
      <Text style={styles.title}>
          {title}
      </Text>
  </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}
      />
    </>
  );
}

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}
    />
  );
}

GoBack: FC<Props> = ({ route }) => {
  const navigation = useNavigation()

  const handlePress = () => {
    if (route) {
      navigation.navigate(route, {})
    } else {
      navigation.goBack()
    }
  }

  return (
    <Container onPress={handlePress}>
      <Background>
        <Icon name="arrowLineLeft" height={20} width={20} />
      </Background>
    </Container>
  )
}

BrowseContainer = (props: ProductsState): JSX.Element => {
  const products = useSelector(selectors.products.getProducts);
  const refreshing = useSelector(selectors.products.isRefreshing);
  const page = useSelector(selectors.products.getPage);
  const dispatch = useDispatch();
  const navigation = useNavigation();

  const handlers = {
    onRefresh: (): Action => dispatch(actions.refetchProducts({ page })),
    onEndReached: (): Action => dispatch(actions.productsEndReached({ page })),
    handleProductPress: (id: number): void => navigation.navigate(Routes.Product, { id }),
    addToCart: (product: Product): Action => {
      navigation.navigate(Routes.Orders, { screen: Routes.Cart });

      return dispatch(cartActions.addToCart(product));
    },
    removeFromCart: (productId: number): Action => dispatch(cartActions.removeFromCart(productId)),
    addQuantity: (productId: number): Action => dispatch(cartActions.addQuantity(productId)),
    subQuantity: (productId: number): Action => dispatch(cartActions.subQuantity(productId))
  };

  useEffect(() => {
    dispatch(actions.productsQuery({ page }));
  }, []);

  return (
    <Browse
      {...props}
      {...handlers}
      products={products}
      refreshing={refreshing}
      page={page}
    />
  );
}

export function useHeaderTitle(title: string): void {
  const isFocused = useIsFocused();
  const navigation = useNavigation<NavigationProperty>();
  const counter = useRef(0);

  useEffect(() => {
    if (isFocused) {
      counter.current++;
      navigation.setParams({title});
    }
  }, [navigation, title, isFocused]);
}

AppointmentCreated: React.FC = () => {
  const { reset } = useNavigation();
  const { params } = useRoute();

  const { date } = params as IRouteParams;

  const handleOkPressed = useCallback(() => {
    reset({
      routes: [
        {
          name: 'Dashboard',
        },
      ],
      index: 0,
    });
  }, [reset]);

  const formattedDate = useMemo(() => {
    return format(date, "EEEE', dia' dd 'de' MMMM 'de' yyyy 'às' HH:mm'h'", {
      locale: ptBR,
    });
  }, [date]);

  return (
    <Container>
      <Icon name="check" size={80} color="#04d361" />

      <Title>Agendamento concluído</Title>
      <Description>{formattedDate}</Description>

      <OkButton onPress={handleOkPressed}>
        <OkButtonText>OK</OkButtonText>
      </OkButton>
    </Container>
  );
}

AppointmentCreated: React.FC = () => {
  const { reset } = useNavigation();
  const { params } = useRoute();

  const { date } = params as RouteParams;

  const formattedDate = useMemo(() => {
    return format(date, "EEEE', dia' dd 'de' MMMM 'de' yyyy 'às' HH:mm'h'", {
      locale: ptBR,
    });
  }, [date]);

  const handleOkPressed = useCallback(() => {
    reset({
      routes: [
        {
          name: 'Dashboard',
        },
      ],
      index: 0,
    });
  }, [reset]);

  return (
    <Container>
      <Icon name="check" size={80} color="#04d361" />
      <Title>Agendamento Concluído</Title>
      <Description>{formattedDate}</Description>
      <OkButton onPress={handleOkPressed}>
        <OkButtonText>Ok</OkButtonText>
      </OkButton>
    </Container>
  );
}

export default function MenuIcon() {
  const navigation = useNavigation();

  const openDrawer = useCallback(() => {
    navigation.dispatch(DrawerActions.openDrawer());
  },[]);

  return (
    <TouchableOpacity onPress={openDrawer}>
      <Feather name="menu" size={24} style={{marginLeft: 25}}/>
    </TouchableOpacity>
  );
}

Modal: React.FC<Props> = ({ children, fullSize = true }) => {
    const defaultStyles = useDefaultStyles();
    const navigation = useNavigation();
    const closeModal = useCallback(() => {
        navigation.dispatch(StackActions.popToTop());    
    }, [navigation]);

    return (
        <Background style={defaultStyles.modal}>
            {!fullSize && <Spacer onPress={closeModal} />}
            <Container style={defaultStyles.modalInner} fullSize={fullSize}>
                {children}
            </Container>
            {!fullSize && <Spacer onPress={closeModal} />}
        </Background>
    );
}

export function LoadingOrError(props: Props) {
  const { reset } = useNavigation();
  const storage = useStorage();
  const styles = useStyles();

  const {
    loading = false,
    message = loading
      ? t('Loading...')
      : t('Something unexpected happened. Please try again'),
  } = props;

  if (message === 'Not found or private') {
    removeToken();
    storage.removeItem('user');
    reset({ index: 0, routes: [{ name: 'Login' }] });
    showLogoutAlert();
  }

  return (
    <View style={styles.container}>
      {loading ? <ActivityIndicator size="small" /> : null}
      <Text>{message}</Text>
    </View>
  );
}

function LoginPending() {

    const navigation = useNavigation<ModalStackNavigation>();

    return (
        <View style={styles.container}>
            <View style={styles.content}>
                <View style={styles.leftView}>
                    <View style={styles.star}>
                        <Icon name="icon-xingqiu" size={20} />
                    </View>
                    <View style={styles.titleView}>
                        <Text style={styles.title} numberOfLines={1}>为保护您的收藏阅读记录，请</Text>
                    </View>
                </View>
                <View style={styles.rightView}>
                    <Touchable style={styles.loginView} onPress={() => {
                        navigation.navigate("Login");
                    }}>
                        <View style={styles.login}>
                            <Text>登录</Text>
                            <Icon name="icon-hp-arrow-up" style={styles.arrow_up} size={12} />
                        </View>
                    </Touchable>
                    <View style={styles.registerView}>
                        <Touchable style={styles.register} onPress={() => {
                            navigation.navigate("Register");
                        }}>
                            <Text>快速注册</Text>
                            <Icon name="icon-hp-arrow-down" style={styles.arrow_down} size={12} />
                        </Touchable>
                    </View>
                </View>
            </View>
        </View>
    );
}

Header = () => {
  const navigation = useNavigation()
  const { setSession } = useContext(AuthContext)
  const logout = () => setSession(null)
  const navigate = (to: 'Settings' | 'Home') => () => {
    navigation.navigate(to)
  }

  return (
    <Container>
      <TouchableOpacity onPress={navigate('Home')}>
        <StyledImage
          resizeMode="contain"
          source={require('../../assets/logo.png')}
        />
      </TouchableOpacity>
      <Buttons>
        <TouchableOpacity onPress={navigate('Settings')}>
          <HeaderButton
            resizeMode="contain"
            source={require('../../assets/gear.png')}
          />
        </TouchableOpacity>
        <TouchableOpacity testID={'logout'} onPress={logout}>
          <HeaderButton
            resizeMode="contain"
            source={require('../../assets/sign-out.png')}
          />
        </TouchableOpacity>
      </Buttons>
    </Container>
  )
}

DataSharingScreen = () => {
  const navigation = useNavigation();
  const [i18n] = useI18n();
  const close = useCallback(() => navigation.goBack(), [navigation]);
  const [exposureStatus] = useExposureStatus();
  const [codeValue, setCodeValue] = useState('');
  const handleChange = useCallback(text => setCodeValue(text), []);
  // if keySubmissionStatus is None we need the 1-time code, otherwise we should go right to consent
  const [isVerified, setIsVerified] = useState(exposureStatus.type === 'diagnosed');
  const onError = useCallback(() => {
    Alert.alert(i18n.translate('DataUpload.ErrorTitle'), i18n.translate('DataUpload.ErrorBody'), [
      {text: i18n.translate('DataUpload.ErrorAction')},
    ]);
    setIsVerified(false);
  }, [i18n]);
  const handleVerify = useCallback(async () => {
    setIsVerified(true);
  }, []);

  const handleUploaded = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  return (
    <Box backgroundColor="overlayBackground" flex={1}>
      <SafeAreaView style={styles.flex}>
        <Toolbar
          title={isVerified ? i18n.translate('DataUpload.ConsentTitle') : ''}
          navIcon="icon-back-arrow"
          navText={i18n.translate('DataUpload.Cancel')}
          navLabel={i18n.translate('DataUpload.Cancel')}
          onIconClicked={close}
        />
        <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
          {!isVerified && (
            <FormView value={codeValue} onChange={handleChange} onSuccess={handleVerify} onError={onError} />
          )}
          {isVerified && <ConsentView onSuccess={handleUploaded} onError={onError} />}
        </ScrollView>
      </SafeAreaView>
    </Box>
  );
}

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>
  );
}

Dashboard: React.FC = () => {
  const [providers, setProviders] = useState<Provider[]>([]);

  const { user } = useAuth();
  const { navigate } = useNavigation();
  const theme = useTheme();

  useEffect(() => {
    api.get('/providers').then(response => {
      setProviders(response.data);
    });
  }, []);

  const navigateToProfile = useCallback(() => {
    navigate('Profile');
  }, [navigate]);

  const navigateToCreateAppointment = useCallback(
    (providerId: string) => {
      navigate('CreateAppointment', { providerId });
    },
    [navigate],
  );

  return (
    <Container>
      <Header>
        <HeaderTitle>
          Bem vindo,{'\n'}
          <UserName>{user.name}</UserName>
        </HeaderTitle>

        <ProfileButton onPress={navigateToProfile}>
          <UserAvatar source={{ uri: user.avatar_url }} />
        </ProfileButton>
      </Header>

      <ProvidersList
        data={providers}
        keyExtractor={provider => provider.id}
        ListHeaderComponent={
          <ProvidersListTitle>Cabeleireiros</ProvidersListTitle>
        }
        renderItem={({ item: provider }) => (
          <ProviderContainer
            onPress={() => navigateToCreateAppointment(provider.id)}
          >
            <ProviderAvatar
              source={{
                uri:
                  provider.avatar_url ||
                  'https://api.adorable.io/avatars/72/[email protected]',
              }}
            />

            <ProviderInfo>
              <ProviderName>{provider.name}</ProviderName>

              <ProviderMeta>
                <Icon name="calendar" size={14} color={theme.colors.orange} />
                <ProviderMetaText>Segunda à sexta</ProviderMetaText>
              </ProviderMeta>

              <ProviderMeta>
                <Icon name="clock" size={14} color={theme.colors.orange} />
                <ProviderMetaText>8h às 18h</ProviderMetaText>
              </ProviderMeta>
            </ProviderInfo>
          </ProviderContainer>
        )}
      />
    </Container>
  );
}