docs: react-navigation code first

xingh · Feb 16, 2024 · 83347af · 83347af
1 parent 8288ae6
commit 83347af
Showing 1 changed file with 60 additions and 60 deletions.
diff --git a/docs/example/react-navigation.md b/docs/example/react-navigation.md
@@ -8,66 +8,6 @@ Example: [react-navigation](https://github.com/gronxb/webview-bridge/tree/main/e
 
 ## React Native Part
 
-```tsx
-// This file is App.tsx
-import React from "react";
-
-import { NavigationContainer } from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import type { NativeStackScreenProps } from "@react-navigation/native-stack";
-import { View, Text, Button } from "react-native";
-import { WebView, navigationRef } from "./src/bridge";
-import { RootStackParamList } from "./src/navigation";
-
-function WebViewHomeScreen() {
-  return (
-    <View style={{ height: "100%" }}>
-      <WebView
-        source={{
-          uri: "http://localhost:5173",
-        }}
-        style={{ height: "100%", flex: 1, width: "100%" }}
-      />
-    </View>
-  );
-}
-
-function UserInfoScreen({
-  navigation,
-  route,
-}: NativeStackScreenProps<RootStackParamList, "UserInfo">) {
-  const { userId } = route.params;
-
-  return (
-    <View style={{ height: "100%" }}>
-      <Text>UserId: {userId}</Text>
-
-      <Button
-        title="New WebView"
-        onPress={() => navigation.push("WebViewHome")}
-      />
-      <Button title="Go back" onPress={() => navigation.goBack()} />
-    </View>
-  );
-}
-
-const Stack = createNativeStackNavigator<RootStackParamList>();
-
-function App(): JSX.Element {
-  return (
-    <NavigationContainer ref={navigationRef}>
-      <Stack.Navigator initialRouteName="WebViewHome">
-        <Stack.Screen name="WebViewHome" component={WebViewHomeScreen} />
-        <Stack.Screen name="UserInfo" component={UserInfoScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
-
-export default App;
-
-```
-
 ```tsx
 // This file is src/bridge.ts
 
@@ -144,6 +84,66 @@ export const { WebView, linkWebMethod } = createWebView({
 
 ```
 
+```tsx
+// This file is App.tsx
+import React from "react";
+
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+import { View, Text, Button } from "react-native";
+import { WebView, navigationRef } from "./src/bridge";
+import { RootStackParamList } from "./src/navigation";
+
+function WebViewHomeScreen() {
+  return (
+    <View style={{ height: "100%" }}>
+      <WebView
+        source={{
+          uri: "http://localhost:5173",
+        }}
+        style={{ height: "100%", flex: 1, width: "100%" }}
+      />
+    </View>
+  );
+}
+
+function UserInfoScreen({
+  navigation,
+  route,
+}: NativeStackScreenProps<RootStackParamList, "UserInfo">) {
+  const { userId } = route.params;
+
+  return (
+    <View style={{ height: "100%" }}>
+      <Text>UserId: {userId}</Text>
+
+      <Button
+        title="New WebView"
+        onPress={() => navigation.push("WebViewHome")}
+      />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+function App(): JSX.Element {
+  return (
+    <NavigationContainer ref={navigationRef}>
+      <Stack.Navigator initialRouteName="WebViewHome">
+        <Stack.Screen name="WebViewHome" component={WebViewHomeScreen} />
+        <Stack.Screen name="UserInfo" component={UserInfoScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;
+
+```
+
 
 
 ## Web (React) Part