Skip to content

Instantly share code, notes, and snippets.

@waquwex

waquwex/App.tsx

Created April 5, 2024 14:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save waquwex/de7f823ea953f75d1e81ddd52de36fa2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save waquwex/de7f823ea953f75d1e81ddd52de36fa2 to your computer and use it in GitHub Desktop.
Download ZIP
React Native Navigation
Raw
App.tsx
import { NavigationContainer } from "@react-navigation/native";
import GibberishScreen from "./screens/GibberishScreen";
import HomeScreen from "./screens/HomeScreen";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
export type AppStackParamList = {
Home: undefined;
Gibberish: { example: string };
}
const Stack = createNativeStackNavigator<AppStackParamList>();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false }}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Gibberish" component={GibberishScreen} />
</Stack.Navigator>
</NavigationContainer>
)
}
Raw
GibberishScreen.tsx
type Props = NativeStackScreenProps<AppStackParamList, "Gibberish">;
function GibberishScreen(props: Props) {
//...
return (
<Text>{props.route.params.example}</Text>
)
}
Raw
HomeScreen.tsx
type Props = NativeStackScreenProps<AppStackParamList, "Home">;
function HomeScreen(props: Props) {
//...
const navigateToAnotherScreen = (event: GestureResponderEvent) => {
props.navigation.navigate("Gibberish", { example: "PARAM EXAMPLE" });
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment