docs: add new pages (#57)

docs/docs/docs/getting-started/quick-start.md → docs/docs/docs/getting-started/quick-start.mdx

@@ -1,10 +1,10 @@
+import { PackageManagerTabs } from '@theme';
+
 # Quick Start
 
 ## Installation
 
-```bash
-yarn add react-native-bottom-tabs
-```
+<PackageManagerTabs command="install react-native-bottom-tabs" />
 
 If you use React Native version 0.75 or lower:
 

docs/docs/docs/guides/_meta.json

@@ -1 +1 @@
-["usage-with-react-navigation", "usage-with-expo-router", "standalone-usage", "handling-scrollview-insets"]
+["usage-with-react-navigation", "usage-with-expo-router", "usage-with-one", "standalone-usage", "android-native-styling", "handling-scrollview-insets"]

docs/docs/docs/guides/android-native-styling.md

@@ -0,0 +1,54 @@
+# Android Native Styling
+
+## Expo users
+
+TODO: Add instructions for Expo users
+
+## React Native Community CLI users
+
+Inside of your `android/app/src/main/res/values/styles.xml` file you can customize the appearance of the native bottom tabs.
+
+Here is how the file looks by default:
+
+```xml
+<resources>
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    </style>
+</resources>
+```
+
+In order to use the native bottom tabs, you need to change `AppTheme` to extend from `Theme.MaterialComponents.DayNight.NoActionBar`:
+
+```xml
+<resources>
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    </style>
+</resources>
+```
+
+:::warning
+This is required for the native bottom tabs to work correctly.
+
+You might see this error if you don't change the theme:
+
+`The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).`
+
+:::
+
+If you want to use Material Design 3, you can extend from `Theme.Material3.DayNight.NoActionBar`:
+
+```xml
+<resources>
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    </style>
+</resources>
+```

docs/docs/docs/guides/usage-with-one.md

@@ -0,0 +1,19 @@
+# Usage with One
+
+In order to use this navigator with [One](https://onestack.dev/), you need to wrap it with the `withLayoutContext`.
+
+
+```tsx
+import { withLayoutContext } from 'one'
+import { createNativeBottomTabNavigator } from 'react-native-bottom-tabs/react-navigation'
+
+const NativeTabsNavigator = createNativeBottomTabNavigator().Navigator
+
+export const NativeTabs = withLayoutContext(
+  NativeTabsNavigator
+)
+```
+
+For props and more information, see the [React Navigation integration guide](/docs/guides/usage-with-react-navigation).
+
+

docs/docs/docs/guides/usage-with-react-navigation.md → docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -1,3 +1,5 @@
+import { Badge } from '@theme';
+
 # Usage with React Navigation
 
 :::warning
@@ -51,23 +53,27 @@ Default options to use for the screens in the navigator.
 
 Whether to show labels in tabs. Defaults to true.
 
-#### `disablePageAnimations`
+#### `disablePageAnimations` <Badge text="iOS" type="info" />
 
-Whether to disable page animations between tabs. (iOS only)
+Whether to disable page animations between tabs.
 
-#### `scrollEdgeAppearance`
+#### `scrollEdgeAppearance` <Badge text="iOS" type="info" />
 
-Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom. (iOS only)
+Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom.
 
 Available options:
 - `default` - uses default background and shadow values.
 - `transparent` - uses transparent background and no shadow.
 - `opaque` - uses set of opaque colors that are appropriate for the current theme
 
-Note: It's recommended to use `transparent` or `opaque` without lazy loading as the tab bar background flashes when a view is rendered lazily.
-#### `sidebarAdaptable`
+:::note
+It's recommended to use `transparent` or `opaque` without lazy loading as the tab bar background flashes when a view is rendered lazily.
+:::
+
+
+#### `sidebarAdaptable` <Badge text="iOS" type="info" />
 
-A tab bar style that adapts to each platform. (Apple platforms only)
+A tab bar style that adapts to each platform.
 
 Tab views using the sidebar adaptable style have an appearance
 - iPadOS displays a top tab bar that can adapt into a sidebar.
@@ -90,9 +96,9 @@ Label text of the tab displayed in the navigation bar. When undefined, scene tit
 
 #### `tabBarIcon`
 
-Function that given { focused: boolean } returns ImageSource or AppleIcon to display in the navigation bar.
+Function that given `{ focused: boolean }` returns `ImageSource` or `AppleIcon` to display in the navigation bar.
+
 
-Note: SF Symbols are only supported on Apple platforms.
 
 ```tsx
 <Tab.Screen
@@ -104,9 +110,12 @@ Note: SF Symbols are only supported on Apple platforms.
     tabBarIcon: () => ({ sfSymbol: 'person' }),
   }}
 />
-
 ```
 
+:::note
+SF Symbols are only supported on Apple platforms.
+:::
+
 #### `tabBarBadge`
 
 Badge to show on the tab icon.

docs/docs/styles/index.css

@@ -71,16 +71,10 @@
   --rp-code-title-bg: var(--rp-c-bg-mute);
 }
 
-/* MD Containers */
-:root {
-  --rp-container-info-border: rgba(155, 109, 255, 0.2) !important;
-  --rp-container-info-text: #9b6dff !important;
-  --rp-container-info-bg: rgba(155, 109, 255, 0.06) !important;
-  --rp-container-info-code-bg: rgba(155, 109, 255, 0.1) !important;
-}
-
-.dark {
-  --rp-container-info-text: #9b6dff !important;
+.badge_99dcf.info_99dcf {
+    color: var(--rp-container-info-text);
+    background-color: var(--rp-container-info-bg);
+    @apply h-6;
 }
 
 /* Home background gradient */

docs/rspress.config.ts

@@ -11,6 +11,8 @@ export default defineConfig({
   icon: '/img/phone.png',
   logo: '/img/phone.png',
   themeConfig: {
+    enableContentAnimation: true,
+    enableAppearanceAnimation: false,
     socialLinks: [
       {
         icon: 'github',