docs: update getting started (#120)

okwasniewski · Nov 4, 2024 · b39cfaa · b39cfaa
1 parent cfcac85
commit b39cfaa
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 62 deletions.
diff --git a/docs/docs/docs/getting-started/quick-start.mdx b/docs/docs/docs/getting-started/quick-start.mdx
@@ -75,33 +75,9 @@ Here you can read more about [Android Native Styling](/docs/guides/android-nativ
 
 ## Example usage
 
-:::warning
-To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](https://reactnavigation.org/docs/getting-started).
-:::
+Please follow the guides below to integrate the library with your navigation library:
 
-```tsx
-import {createNativeBottomTabNavigator} from 'react-native-bottom-tabs/react-navigation';
-
-const Tabs = createNativeBottomTabNavigator();
-
-function NativeBottomTabs() {
-  return (
-    <Tabs.Navigator>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Home",
-          tabBarIcon: () => ({ sfSymbol: "house" }),
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        options={{
-          title: "Explore",
-          tabBarIcon: () => ({ sfSymbol: "person" }),
-        }}
-      />
-    </Tabs.Navigator>
-  );
-}
-```
+- [Usage with React Navigation](/docs/guides/usage-with-react-navigation)
+- [Usage with Expo Router](/docs/guides/usage-with-expo-router)
+- [Usage with One](/docs/guides/usage-with-one)
+- [Standalone usage](/docs/guides/standalone-usage)
diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx
@@ -6,29 +6,52 @@ import { Badge } from '@theme';
 To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](https://reactnavigation.org/docs/getting-started).
 :::
 
+Minimal example of using `createNativeBottomTabNavigator` with React Navigation:
+
 ```tsx
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 import { createNativeBottomTabNavigator } from 'react-native-bottom-tabs/react-navigation';
 
-const Tabs = createNativeBottomTabNavigator();
+const Tab = createNativeBottomTabNavigator();
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home!</Text>
+    </View>
+  );
+}
+
+function SettingsScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings!</Text>
+    </View>
+  );
+}
 
-function NativeBottomTabs() {
+export default function App() {
   return (
-    <Tabs.Navigator>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Home',
-          tabBarIcon: () => ({ sfSymbol: 'house' }),
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        options={{
-          title: 'Explore',
-          tabBarIcon: () => ({ sfSymbol: 'person' }),
-        }}
-      />
-    </Tabs.Navigator>
+    <NavigationContainer>
+      <Tab.Navigator ignoresTopSafeArea>
+        <Tab.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{
+            tabBarIcon: () => ({ sfSymbol: 'book' }),
+          }}
+        />
+        <Tab.Screen
+          name="Settings"
+          component={SettingsScreen}
+          options={{
+            tabBarIcon: () => ({ sfSymbol: 'gear' }),
+          }}
+        />
+      </Tab.Navigator>
+    </NavigationContainer>
   );
 }
 ```

diff --git a/docs/docs/docs/guides/usage-with-vector-icons.md b/docs/docs/docs/guides/usage-with-vector-icons.md
@@ -21,21 +21,21 @@ const Tabs = createNativeBottomTabNavigator();
 
 function NativeBottomTabs() {
   return (
-    <Tabs.Navigator>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Home',
-          tabBarIcon: () => homeIcon,
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        options={{
-          title: 'Explore',
-          tabBarIcon: () => exploreIcon,
-        }}
-      />
+    <Tabs.Navigator ignoresTopSafeArea>
+        <Tabs.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{
+            tabBarIcon: () => homeIcon,
+          }}
+        />
+        <Tabs.Screen
+          name="Explore"
+          component={ExploreScreen}
+          options={{
+            tabBarIcon: () => exploreIcon,
+          }}
+        />
     </Tabs.Navigator>
   );
 }