@react-navigation/native#RouteProp TypeScript Examples

The following examples show how to use @react-navigation/native#RouteProp. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: invoicePDF.tsx    From THUInfo with MIT License 6 votes vote down vote up 
InvoicePDFScreen = ({
	route: {
		params: {base64},
	},
}: {
	route: RouteProp<RootStackParamList, "InvoicePDF">;
}) => {
	const themeName = useColorScheme();
	const style = styles(themeName);
	return (
		<View style={style.container}>
			<Pdf
				style={style.pdf}
				source={{uri: `data:application/pdf;base64,${base64}`}}
			/>
		</View>
	);
}
Example #2
Source File: Detail.container.tsx    From RNWCShop with GNU General Public License v3.0 6 votes vote down vote up 
DetailContainer = ({ navigation }: Props): JSX.Element => {
  const initialProduct = {
    id: 1,
    name: '',
    price: 0,
    description: '',
    average_rating: '',
    images: []
  };
  const [product, setProduct] = useState<Product>(initialProduct);
  const [imagesShown, showImages] = useState(false);
  const route = useRoute<RouteProp<NavigationParams, 'Detail'>>();
  const dispatch = useDispatch();

  const handlers = {
    handleShowImages: (): void =>
      showImages((prevState: boolean) => !prevState),
    addToCart: (product: Product): Action => {
      navigation.navigate('Orders', { screen: routes.Cart });

      return dispatch(actions.addToCart(product));
    }
  };

  useEffect(() => {
    WooCommerce.get(`/products/${route.params.id}`).then(({ data }) => {
      setProduct(data);
    });
  }, [route.params.id]);

  return (
    <DetailComponent
      {...handlers}
      imagesShown={imagesShown}
      product={product}
    />
  );
}
Example #3
Source File: main.tsx    From iotc-cpm-sample with MIT License 6 votes vote down vote up 
getTitle = function (
  route: RouteProp<Record<string, NavigationParams>, ''>,
) {
  if (route.params) {
    const routeTitle = route.params.title!;
    if (routeTitle) {
      return routeTitle;
    }
  }
  return route.name;
}
Example #4
Source File: index.tsx    From krmanga with MIT License 6 votes vote down vote up 
mapStateToProps = ({ home, user, brief, loading }: RootState, { route }: { route: RouteProp<RootStackParamList, "Brief"> }) => {
    return {
        isLogin: user.isLogin,
        book_id: route.params.id,
        headerHeight: home.headerHeight,
        bookInfo: brief.bookInfo,
        markRoast: brief.markRoast,
        markChapterNum: brief.markChapterNum,
        collection_id: brief.collection_id,
        refreshing: brief.refreshing,
        chapterList: brief.chapterList,
        loading: loading.effects["brief/fetchBrief"]
    };
}
Example #5
Source File: index.tsx    From krmanga with MIT License 6 votes vote down vote up 
mapStateToProps = (state: RootState, { route }: { route: RouteProp<CategoryTabParamList, string> }) => {
    const { namespace, category_id } = route.params;
    const activeStatus = state["category"].activeStatus;
    const activeModel = `${namespace}-status-${activeStatus}`;

    return {
        category_id,
        activeModel,
        activeCategory: state["category"].activeCategory,
        activeStatus: state["category"].activeStatus,
        bookList: state[activeModel] ? state[activeModel].bookList : [],
        hasMore: state[activeModel] ? state[activeModel].hasMore : false,
        refreshing: state[activeModel] ? state[activeModel].refreshing : false,
        hideHeader: state[activeModel] ? state[activeModel] : false,
        loading: state.loading.effects[`${activeModel}/fetchBookList`]
    };
}
Example #6
Source File: index.tsx    From krmanga with MIT License 6 votes vote down vote up 
mapStateToProps = ({ download, loading }: RootState, { route }: { route: RouteProp<RootStackParamList, "Download"> }) => {
    return {
        book_id: route.params.book_id,
        chapterList: download.chapterList,
        refreshing: download.refreshing,
        hasMore: download.hasMore,
        loading: loading.effects["download/fetchChapterList"]
    };
}
Example #7
Source File: index.tsx    From krmanga with MIT License 6 votes vote down vote up 
mapStateToProps = ({ guess, loading }: RootState, { route }: { route: RouteProp<RootStackParamList, "Guess"> }) => {
    return {
        headerTitle: route.params.headerTitle,
        bookList: guess.bookList,
        refreshing: guess.refreshing,
        hasMore: guess.hasMore,
        loading: loading.effects["guess/fetchGuessList"]
    };
}
Example #8
Source File: index.tsx    From krmanga with MIT License 6 votes vote down vote up 
mapStateToProps = ({ home, mangaView, brief, user, loading }: RootState, { route }: { route: RouteProp<RootStackParamList, "MangaView"> }) => {
    return {
        book_id: route.params.book_id,
        markRoast: route.params.markRoast,
        chapter_num: route.params.chapter_num,
        isLogin: user.isLogin,
        headerHeight: home.headerHeight,
        episodeList: mangaView.episodeList,
        hasMore: mangaView.hasMore,
        refreshing: mangaView.refreshing,
        pages: mangaView.pagination,
        currentChapterNum: mangaView.currentChapterNum,
        currentRoast: mangaView.currentRoast,
        chapterList: brief.chapterList,
        bookInfo: brief.bookInfo,
        loading: loading.effects["mangaView/fetchEpisodeList"]
    };
}
Example #9
Source File: index.tsx    From krmanga with MIT License 6 votes vote down vote up 
mapStateToProps = ({ user, chapterManage, loading }: RootState, { route }: { route: RouteProp<RootStackParamList, "ChapterManage"> }) => {
    return {
        book_id: route.params.book_id,
        book_image: route.params.book_image,
        headerTitle: route.params.headerTitle,
        chapterList: chapterManage.chapterList,
        ids: chapterManage.ids,
        isEdit: chapterManage.isEdit,
        refreshing: chapterManage.refreshing,
        hasMore: chapterManage.hasMore,
        pages: chapterManage.pagination,
        loading: loading.effects["chapterManage/fetchChapterList"]
    };
}
Example #10
Source File: types.ts    From rn-clean-architecture-template with MIT License 5 votes vote down vote up 
RouteProp = RouteProp<ParamsType, ' {{name}}'>;
Example #11
Source File: types.ts    From rn-clean-architecture-template with MIT License 5 votes vote down vote up 
RouteProp;
Example #12
Source File: __name__.type.ts    From rn-clean-architecture-template with MIT License 5 votes vote down vote up 
RouteProp = RouteProp<ParamsType, '{{$name}}'>;
Example #13
Source File: __name__.type.ts    From rn-clean-architecture-template with MIT License 5 votes vote down vote up 
RouteProp;
Example #14
Source File: libraryRefreshListScreen.tsx    From THUInfo with MIT License 4 votes vote down vote up 
export function libraryRefreshListScreen<
	T extends LibraryBase,
	S extends "LibraryFloor" | "LibrarySection" | "LibrarySeat",
>(
	dataSource: (
		props: PropsWithChildren<{
			navigation: RootNav;
			route: RouteProp<RootStackParamList, S>;
		}>,
		dateChoice: 0 | 1,
	) => Promise<T[]>,
	onPress: (
		props: PropsWithChildren<{
			navigation: RootNav;
			route: RouteProp<RootStackParamList, S>;
		}>,
		item: T,
		choice: 0 | 1,
		refresh: () => void,
	) => () => void,
	header?: (theme: Theme) => ReactElement,
	clickable?: boolean,
): FC<{
	navigation: RootNav;
	route: RouteProp<RootStackParamList, S>;
}> {
	return (
		props: PropsWithChildren<{
			navigation: RootNav;
			route: RouteProp<RootStackParamList, S>;
		}>,
	) => {
		const [choice, setChoice] = useState<0 | 1>(
			props?.route?.params?.dateChoice ?? 0,
		);
		const themeName = useColorScheme();
		const theme = themes(themeName);

		const List = simpleRefreshListScreen(
			() => dataSource(props, choice),
			(item, refresh, _, {colors}) => {
				const moreInformation = // @ts-ignore
					item.available !== undefined && item.total !== undefined // @ts-ignore
						? ` (${item.available}/${item.total})`
						: item.valid
						? ""
						: getStr("seatInvalid");
				return (
					<View>
						<View style={{flexDirection: "row"}}>
							{"status" in item && (
								<TouchableOpacity
									style={{
										backgroundColor: colors.themeBackground,
										flexDirection: "row",
										justifyContent: "center",
										alignItems: "center",
										paddingHorizontal: 12,
										flex: 1,
									}}
									onPress={() =>
										Snackbar.show({
											text: getStr("socketReportShort"),
											duration: Snackbar.LENGTH_SHORT,
										})
									}
									onLongPress={() => {
										// @ts-ignore
										if (item.status === "unknown") {
											Alert.alert(
												getStr("socketReportPrompt"),
												getStr("confirmReportUnknownSocket"),
												[
													{text: getStr("cancel")},
													{
														text: getStr("socketUnavailable"),
														onPress: () => {
															toggleSocketState(
																item.id, // @ts-ignore
																"unavailable", // @ts-ignore
															)
																.then(() =>
																	Snackbar.show({
																		text: getStr("reportSuccessful"),
																		duration: Snackbar.LENGTH_SHORT,
																	}),
																)
																.catch(() =>
																	Snackbar.show({
																		text: getStr("reportFail"),
																		duration: Snackbar.LENGTH_SHORT,
																	}),
																);
														},
													},
													{
														text: getStr("socketAvailable"),
														onPress: () => {
															toggleSocketState(
																item.id, // @ts-ignore
																"available", // @ts-ignore
															)
																.then(() =>
																	Snackbar.show({
																		text: getStr("reportSuccessful"),
																		duration: Snackbar.LENGTH_SHORT,
																	}),
																)
																.catch(() =>
																	Snackbar.show({
																		text: getStr("reportFail"),
																		duration: Snackbar.LENGTH_SHORT,
																	}),
																);
														},
													},
												],
												{cancelable: true},
											);
										} else {
											Alert.alert(
												getStr(
													// @ts-ignore
													item.status === "available"
														? "confirmReportNoSocket"
														: "confirmReportHasSocket",
												),
												getStr("socketReportPrompt"),
												[
													{text: getStr("cancel")},
													{
														text: getStr("confirm"),
														onPress: () => {
															toggleSocketState(
																item.id, // @ts-ignore
																item.status === "available"
																	? "unavailable"
																	: "available", // @ts-ignore
															)
																.then(() =>
																	Snackbar.show({
																		text: getStr("reportSuccessful"),
																		duration: Snackbar.LENGTH_SHORT,
																	}),
																)
																.catch(() =>
																	Snackbar.show({
																		text: getStr("reportFail"),
																		duration: Snackbar.LENGTH_SHORT,
																	}),
																);
														},
													},
												],
												{cancelable: true},
											);
										}
									}}>
									<Text
										style={{
											textAlign: "center",
											color:
												// @ts-ignore
												item.status === "available"
													? "green"
													: // @ts-ignore
													item.status === "unavailable"
													? "blue"
													: "black",
										}}>
										{
											// @ts-ignore
											//getStr(item.hasSocket ? "hasSocket" : "noSocket")
											getStr(
												// @ts-ignore
												item.status === "available"
													? "socketAvailable"
													: // @ts-ignore
													item.status === "unavailable"
													? "socketUnavailable"
													: "socketUnknown",
											)
										}
									</Text>
								</TouchableOpacity>
							)}
							<TouchableOpacity
								style={{
									backgroundColor: colors.themeBackground,
									flexDirection: "row",
									justifyContent: "space-between",
									alignItems: "center",
									paddingHorizontal: 12,
									flex: 2,
								}}
								disabled={!item.valid || clickable === false}
								onPress={() =>
									item.valid && onPress(props, item, choice, refresh)()
								}>
								<Text
									style={{
										textAlign: "center",
										textDecorationLine: item.valid ? "none" : "line-through",
										color: item.valid ? colors.text : "grey",
										marginVertical: 14,
									}}>
									{item.zhName + moreInformation}
								</Text>
								{(!helper.mocked() || header) && (
									<Icon name="angle-right" size={24} color="grey" />
								)}
							</TouchableOpacity>
						</View>
						<View style={{backgroundColor: "lightgray", height: 1}} />
					</View>
				);
			},
			(item) => String(item.id),
			undefined,
			header ??
				(() => <View style={{backgroundColor: "lightgray", height: 1}} />),
		);

		return (
			<>
				<View style={{flexDirection: "row", margin: 15}}>
					<TouchableOpacity
						style={{padding: 6, flex: 1}}
						onPress={() => setChoice(0)}>
						<Text
							style={{
								color: choice === 0 ? "blue" : theme.colors.text,
								textAlign: "center",
							}}>
							{getStr("today")}
						</Text>
					</TouchableOpacity>
					<TouchableOpacity
						style={{padding: 6, flex: 1}}
						onPress={() => setChoice(1)}>
						<Text
							style={{
								color: choice === 1 ? "blue" : theme.colors.text,
								textAlign: "center",
							}}>
							{getStr("tomorrow")}
						</Text>
					</TouchableOpacity>
				</View>
				{<List />}
			</>
		);
	};
}