feat: add docs

.github/workflows/ci.yml

@@ -1,4 +1,5 @@
 name: CI
+
 on:
   push:
     branches:

.github/workflows/deploy-docs.yml

@@ -0,0 +1,58 @@
+name: Deploy Docs
+
+on:
+  push:
+    branches: [main]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Install dependencies
+        working-directory: docs
+        run: yarn install
+
+      - name: Build with Rspress
+        working-directory: docs
+        run: |
+          yarn run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/doc_build
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -11,206 +11,9 @@
 
 https://github.com/user-attachments/assets/fbdd9ce2-f4b9-4d0c-bd91-2e62bb422d69
 
-## 📦 Installation
+## Documentation
 
-```sh
-yarn add react-native-bottom-tabs
-```
-
-If you use React Native version 0.75 or lower:
-
-- For `@react-native-community/cli` users, open Podfile in ios folder and change minimum iOS version to `14.0` before `pod install`
-
-```patch
--platform :ios, min_ios_version_supported
-+platform :ios, '14.0'
-```
-
-- For Expo users, install `expo-build-properties`, open app.json file and update `deploymentTarget` for `ios` as below
-
-```json
-{
-  "expo": {
-    "plugins": [
-      [
-        "expo-build-properties",
-        {
-          "ios": {
-            "deploymentTarget": "14.0"
-          }
-        }
-      ]
-    ],
-  }
-}
-```
-
-## 📖 Documentation
-
-### Usage with Expo Router
-
-Check this demo and instructions: [EvanBacon/expo-router-react-native-bottom-tabs]( https://github.com/EvanBacon/expo-router-react-native-bottom-tabs)
-
-### Usage with React Navigation
-
-> [!NOTE]
-> To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](https://reactnavigation.org/docs/getting-started):
-
-Example usage:
-
-```tsx
-import {createNativeBottomTabNavigator} from 'react-native-bottom-tabs/react-navigation';
-
-const Tab = createNativeBottomTabNavigator();
-
-function NativeBottomTabs() {
-  return (
-    <Tab.Navigator>
-      <Tab.Screen
-        name="Article"
-        component={Article}
-        options={{
-          tabBarBadge: '10',
-          tabBarIcon: ({ focused }) =>
-            focused
-              ? require('person.png')
-              : require('article.png'),
-        }}
-      />
-      <Tab.Screen
-        name="Albums"
-        component={Albums}
-        options={{
-          tabBarIcon: () => require('grid.png'),
-        }}
-      />
-    </Tab.Navigator>
-  );
-}
-```
-
-### Props
-
-The `Tab.Navigator` component accepts following props:
-
-#### `id`
-
-Optional unique ID for the navigator. This can be used with `navigation.getParent` to refer to this navigator in a child navigator.
-
-#### `initialRouteName`
-
-The name of the route to render on first load of the navigator.
-
-#### `screenOptions`
-
-Default options to use for the screens in the navigator.
-
-#### `labeled`
-
-Whether to show labels in tabs. Defaults to true.
-
-#### `disablePageAnimations`
-
-Whether to disable page animations between tabs. (iOS only)
-
-#### `sidebarAdaptable`
-
-A tab bar style that adapts to each platform. (Apple platforms only)
-
-Tab views using the sidebar adaptable style have an appearance
-- iPadOS displays a top tab bar that can adapt into a sidebar.
-- iOS displays a bottom tab bar.
-- macOS and tvOS always show a sidebar.
-- visionOS shows an ornament and also shows a sidebar for secondary tabs within a `TabSection`.
-
-
-### Options
-
-The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`.
-
-#### `title`
-
-Title text for the screen.
-
-#### `tabBarLabel`
-
-Label text of the tab displayed in the navigation bar. When undefined, scene title is used.
-
-#### `tabBarIcon`
-
-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
-  name="Albums"
-  component={Albums}
-  options={{
-    tabBarIcon: () => require('person.png'),
-    // or
-    tabBarIcon: () => ({ sfSymbol: 'person' }),
-  }}
-/>
-
-```
-
-#### `tabBarBadge`
-
-Badge to show on the tab icon.
-
-#### `lazy`
-
-Whether this screens should render the first time it's accessed. Defaults to true. Set it to false if you want to render the screen on initial render.
-
-
-### Usage without React Navigation
-
-If you don't use React Navigation, you can use the `TabView` component directly.
-
-
-```tsx
-import TabView, { SceneMap } from 'react-native-bottom-tabs';
-
-export default function ThreeTabs() {
-  const [index, setIndex] = useState(0);
-  const [routes] = useState([
-    { key: 'article', title: 'Article', focusedIcon: require('article.png'), badge: '!' },
-    {
-      key: 'albums',
-      title: 'Albums',
-      focusedIcon: require('grid.png'),
-      badge: '5',
-    },
-    { key: 'contacts', title: 'Contacts', focusedIcon: require('person.png') },
-  ]);
-
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-  });
-
-  return (
-    <TabView
-      navigationState={{ index, routes }}
-      onIndexChange={setIndex}
-      renderScene={renderScene}
-    />
-  );
-}
-```
-
-### ScrollView
-
-If you expirence issues with ScrollView content being below the tab bar, add `contentInsetAdjustmentBehavior="automatic"` to the ScrollView component.
-
-
-```tsx
-<ScrollView contentInsetAdjustmentBehavior="automatic">
-  {/* content */}
-</ScrollView>
-```
+The full documentation can be found on our [website]().
 
 ## Contributing
 

docs/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+doc_build

docs/docs/_meta.json

@@ -0,0 +1,7 @@
+[
+  {
+    "text": "Docs",
+    "link": "/docs/",
+    "activeMatch": "/docs/"
+  }
+]

docs/docs/docs/_meta.json

@@ -0,0 +1,17 @@
+[
+  {
+    "type": "dir",
+    "name": "getting-started",
+    "label": "Getting Started"
+  },
+  {
+    "type": "dir",
+    "name": "guides",
+    "label": "Guides"
+  },
+  {
+    "type": "file",
+    "name": "contributing",
+    "label": "Contributing"
+  }
+]

docs/docs/docs/contributing.md

@@ -0,0 +1,4 @@
+# Contributing
+
+Checkout project's [CONTRIBUTING.md](https://github.com/okwasniewski/react-native-bottom-tabs/blob/main/CONTRIBUTING.md) for more information.
+

docs/docs/docs/getting-started/introduction.mdx

@@ -0,0 +1,12 @@
+# Introduction
+
+React Native Bottom Tabs is a library that provides a native bottom tabs experience for React Native apps. It uses native platform primitives (SwiftUI's TabView on iOS and BottomNavigationView on Android) to ensure a consistent look and feel across platforms.
+
+<iframe width="100%" height="600" src="https://github.com/user-attachments/assets/fbdd9ce2-f4b9-4d0c-bd91-2e62bb422d69" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+
+## Supported Platforms
+- iOS
+- Android
+- visionOS
+- macOS (coming soon)
+- tvOS (coming soon)