Skip to content

Commit 584672c

Browse files
okwasniewskiokwasniewski
authored
feat: add docs (#51)
1 parent 20114f5 commit 584672c

20 files changed

+3915
-401
lines changed

‎.github/workflows/ci.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
name: CI
2+
23
on:
34
push:
45
branches:

‎.github/workflows/deploy-docs.yml

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
name: Deploy Docs
2+
3+
on:
4+
push:
5+
branches: [main]
6+
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: pages
16+
cancel-in-progress: false
17+
18+
jobs:
19+
# Build job
20+
build:
21+
runs-on: ubuntu-latest
22+
steps:
23+
- name: Checkout
24+
uses: actions/checkout@v4
25+
with:
26+
fetch-depth: 0 # Not needed if lastUpdated is not enabled
27+
- name: Setup
28+
uses: ./.github/actions/setup
29+
30+
- name: Setup Pages
31+
uses: actions/configure-pages@v5
32+
33+
- name: Install dependencies
34+
working-directory: docs
35+
run: yarn install
36+
37+
- name: Build with Rspress
38+
working-directory: docs
39+
run: |
40+
yarn run build
41+
42+
- name: Upload artifact
43+
uses: actions/upload-pages-artifact@v3
44+
with:
45+
path: docs/doc_build
46+
47+
# Deployment job
48+
deploy:
49+
environment:
50+
name: github-pages
51+
url: ${{ steps.deployment.outputs.page_url }}
52+
needs: build
53+
runs-on: ubuntu-latest
54+
name: Deploy
55+
steps:
56+
- name: Deploy to GitHub Pages
57+
id: deployment
58+
uses: actions/deploy-pages@v4

‎README.md

Lines changed: 2 additions & 199 deletions
Original file line numberDiff line numberDiff line change
@@ -11,206 +11,9 @@
1111
1212
https://github.com/user-attachments/assets/fbdd9ce2-f4b9-4d0c-bd91-2e62bb422d69
1313

14-
## 📦 Installation
14+
## Documentation
1515

16-
```sh
17-
yarn add react-native-bottom-tabs
18-
```
19-
20-
If you use React Native version 0.75 or lower:
21-
22-
- For `@react-native-community/cli` users, open Podfile in ios folder and change minimum iOS version to `14.0` before `pod install`
23-
24-
```patch
25-
-platform :ios, min_ios_version_supported
26-
+platform :ios, '14.0'
27-
```
28-
29-
- For Expo users, install `expo-build-properties`, open app.json file and update `deploymentTarget` for `ios` as below
30-
31-
```json
32-
{
33-
"expo": {
34-
"plugins": [
35-
[
36-
"expo-build-properties",
37-
{
38-
"ios": {
39-
"deploymentTarget": "14.0"
40-
}
41-
}
42-
]
43-
],
44-
}
45-
}
46-
```
47-
48-
## 📖 Documentation
49-
50-
### Usage with Expo Router
51-
52-
Check this demo and instructions: [EvanBacon/expo-router-react-native-bottom-tabs]( https://github.com/EvanBacon/expo-router-react-native-bottom-tabs)
53-
54-
### Usage with React Navigation
55-
56-
> [!NOTE]
57-
> To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](https://reactnavigation.org/docs/getting-started):
58-
59-
Example usage:
60-
61-
```tsx
62-
import {createNativeBottomTabNavigator} from 'react-native-bottom-tabs/react-navigation';
63-
64-
const Tab = createNativeBottomTabNavigator();
65-
66-
function NativeBottomTabs() {
67-
return (
68-
<Tab.Navigator>
69-
<Tab.Screen
70-
name="Article"
71-
component={Article}
72-
options={{
73-
tabBarBadge: '10',
74-
tabBarIcon: ({ focused }) =>
75-
focused
76-
? require('person.png')
77-
: require('article.png'),
78-
}}
79-
/>
80-
<Tab.Screen
81-
name="Albums"
82-
component={Albums}
83-
options={{
84-
tabBarIcon: () => require('grid.png'),
85-
}}
86-
/>
87-
</Tab.Navigator>
88-
);
89-
}
90-
```
91-
92-
### Props
93-
94-
The `Tab.Navigator` component accepts following props:
95-
96-
#### `id`
97-
98-
Optional unique ID for the navigator. This can be used with `navigation.getParent` to refer to this navigator in a child navigator.
99-
100-
#### `initialRouteName`
101-
102-
The name of the route to render on first load of the navigator.
103-
104-
#### `screenOptions`
105-
106-
Default options to use for the screens in the navigator.
107-
108-
#### `labeled`
109-
110-
Whether to show labels in tabs. Defaults to true.
111-
112-
#### `disablePageAnimations`
113-
114-
Whether to disable page animations between tabs. (iOS only)
115-
116-
#### `sidebarAdaptable`
117-
118-
A tab bar style that adapts to each platform. (Apple platforms only)
119-
120-
Tab views using the sidebar adaptable style have an appearance
121-
- iPadOS displays a top tab bar that can adapt into a sidebar.
122-
- iOS displays a bottom tab bar.
123-
- macOS and tvOS always show a sidebar.
124-
- visionOS shows an ornament and also shows a sidebar for secondary tabs within a `TabSection`.
125-
126-
127-
### Options
128-
129-
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`.
130-
131-
#### `title`
132-
133-
Title text for the screen.
134-
135-
#### `tabBarLabel`
136-
137-
Label text of the tab displayed in the navigation bar. When undefined, scene title is used.
138-
139-
#### `tabBarIcon`
140-
141-
Function that given { focused: boolean } returns ImageSource or AppleIcon to display in the navigation bar.
142-
143-
Note: SF Symbols are only supported on Apple platforms.
144-
145-
```tsx
146-
<Tab.Screen
147-
name="Albums"
148-
component={Albums}
149-
options={{
150-
tabBarIcon: () => require('person.png'),
151-
// or
152-
tabBarIcon: () => ({ sfSymbol: 'person' }),
153-
}}
154-
/>
155-
156-
```
157-
158-
#### `tabBarBadge`
159-
160-
Badge to show on the tab icon.
161-
162-
#### `lazy`
163-
164-
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.
165-
166-
167-
### Usage without React Navigation
168-
169-
If you don't use React Navigation, you can use the `TabView` component directly.
170-
171-
172-
```tsx
173-
import TabView, { SceneMap } from 'react-native-bottom-tabs';
174-
175-
export default function ThreeTabs() {
176-
const [index, setIndex] = useState(0);
177-
const [routes] = useState([
178-
{ key: 'article', title: 'Article', focusedIcon: require('article.png'), badge: '!' },
179-
{
180-
key: 'albums',
181-
title: 'Albums',
182-
focusedIcon: require('grid.png'),
183-
badge: '5',
184-
},
185-
{ key: 'contacts', title: 'Contacts', focusedIcon: require('person.png') },
186-
]);
187-
188-
const renderScene = SceneMap({
189-
article: Article,
190-
albums: Albums,
191-
contacts: Contacts,
192-
});
193-
194-
return (
195-
<TabView
196-
navigationState={{ index, routes }}
197-
onIndexChange={setIndex}
198-
renderScene={renderScene}
199-
/>
200-
);
201-
}
202-
```
203-
204-
### ScrollView
205-
206-
If you expirence issues with ScrollView content being below the tab bar, add `contentInsetAdjustmentBehavior="automatic"` to the ScrollView component.
207-
208-
209-
```tsx
210-
<ScrollView contentInsetAdjustmentBehavior="automatic">
211-
{/* content */}
212-
</ScrollView>
213-
```
16+
The full documentation can be found on our [website]().
21417

21518
## Contributing
21619

‎docs/.gitignore

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
doc_build

‎docs/docs/_meta.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
[
2+
{
3+
"text": "Docs",
4+
"link": "/docs/",
5+
"activeMatch": "/docs/"
6+
}
7+
]

‎docs/docs/docs/_meta.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
[
2+
{
3+
"type": "dir",
4+
"name": "getting-started",
5+
"label": "Getting Started"
6+
},
7+
{
8+
"type": "dir",
9+
"name": "guides",
10+
"label": "Guides"
11+
},
12+
{
13+
"type": "file",
14+
"name": "contributing",
15+
"label": "Contributing"
16+
}
17+
]

‎docs/docs/docs/contributing.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Contributing
2+
3+
Checkout project's [CONTRIBUTING.md](https://github.com/okwasniewski/react-native-bottom-tabs/blob/main/CONTRIBUTING.md) for more information.
4+

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Introduction
2+
3+
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.
4+
5+
<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>
6+
7+
## Supported Platforms
8+
- iOS
9+
- Android
10+
- visionOS
11+
- macOS (coming soon)
12+
- tvOS (coming soon)

0 commit comments

Comments
 (0)