Skip to content

Commit dad9de3

Browse files
okwasniewskiokwasniewski
authored
docs: add new pages (#57)
1 parent 9f0f34b commit dad9de3

File tree

7 files changed

+102
-24
lines changed

7 files changed

+102
-24
lines changed

docs/docs/docs/getting-started/quick-start.md renamed to docs/docs/docs/getting-started/quick-start.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1+
import { PackageManagerTabs } from '@theme';
2+
13
# Quick Start
24

35
## Installation
46

5-
```bash
6-
yarn add react-native-bottom-tabs
7-
```
7+
<PackageManagerTabs command="install react-native-bottom-tabs" />
88

99
If you use React Native version 0.75 or lower:
1010

‎docs/docs/docs/guides/_meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["usage-with-react-navigation", "usage-with-expo-router", "standalone-usage", "handling-scrollview-insets"]
1+
["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‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Android Native Styling
2+
3+
## Expo users
4+
5+
TODO: Add instructions for Expo users
6+
7+
## React Native Community CLI users
8+
9+
Inside of your `android/app/src/main/res/values/styles.xml` file you can customize the appearance of the native bottom tabs.
10+
11+
Here is how the file looks by default:
12+
13+
```xml
14+
<resources>
15+
<!-- Base application theme. -->
16+
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
17+
<!-- Customize your theme here. -->
18+
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
19+
</style>
20+
</resources>
21+
```
22+
23+
In order to use the native bottom tabs, you need to change `AppTheme` to extend from `Theme.MaterialComponents.DayNight.NoActionBar`:
24+
25+
```xml
26+
<resources>
27+
<!-- Base application theme. -->
28+
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
29+
<!-- Customize your theme here. -->
30+
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
31+
</style>
32+
</resources>
33+
```
34+
35+
:::warning
36+
This is required for the native bottom tabs to work correctly.
37+
38+
You might see this error if you don't change the theme:
39+
40+
`The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).`
41+
42+
:::
43+
44+
If you want to use Material Design 3, you can extend from `Theme.Material3.DayNight.NoActionBar`:
45+
46+
```xml
47+
<resources>
48+
<!-- Base application theme. -->
49+
<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
50+
<!-- Customize your theme here. -->
51+
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
52+
</style>
53+
</resources>
54+
```

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Usage with One
2+
3+
In order to use this navigator with [One](https://onestack.dev/), you need to wrap it with the `withLayoutContext`.
4+
5+
6+
```tsx
7+
import { withLayoutContext } from 'one'
8+
import { createNativeBottomTabNavigator } from 'react-native-bottom-tabs/react-navigation'
9+
10+
const NativeTabsNavigator = createNativeBottomTabNavigator().Navigator
11+
12+
export const NativeTabs = withLayoutContext(
13+
NativeTabsNavigator
14+
)
15+
```
16+
17+
For props and more information, see the [React Navigation integration guide](/docs/guides/usage-with-react-navigation).
18+
19+

docs/docs/docs/guides/usage-with-react-navigation.md renamed to docs/docs/docs/guides/usage-with-react-navigation.mdx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Badge } from '@theme';
2+
13
# Usage with React Navigation
24

35
:::warning
@@ -51,23 +53,27 @@ Default options to use for the screens in the navigator.
5153

5254
Whether to show labels in tabs. Defaults to true.
5355

54-
#### `disablePageAnimations`
56+
#### `disablePageAnimations` <Badge text="iOS" type="info" />
5557

56-
Whether to disable page animations between tabs. (iOS only)
58+
Whether to disable page animations between tabs.
5759

58-
#### `scrollEdgeAppearance`
60+
#### `scrollEdgeAppearance` <Badge text="iOS" type="info" />
5961

60-
Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom. (iOS only)
62+
Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom.
6163

6264
Available options:
6365
- `default` - uses default background and shadow values.
6466
- `transparent` - uses transparent background and no shadow.
6567
- `opaque` - uses set of opaque colors that are appropriate for the current theme
6668

67-
Note: It's recommended to use `transparent` or `opaque` without lazy loading as the tab bar background flashes when a view is rendered lazily.
68-
#### `sidebarAdaptable`
69+
:::note
70+
It's recommended to use `transparent` or `opaque` without lazy loading as the tab bar background flashes when a view is rendered lazily.
71+
:::
72+
73+
74+
#### `sidebarAdaptable` <Badge text="iOS" type="info" />
6975

70-
A tab bar style that adapts to each platform. (Apple platforms only)
76+
A tab bar style that adapts to each platform.
7177

7278
Tab views using the sidebar adaptable style have an appearance
7379
- 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
9096

9197
#### `tabBarIcon`
9298

93-
Function that given { focused: boolean } returns ImageSource or AppleIcon to display in the navigation bar.
99+
Function that given `{ focused: boolean }` returns `ImageSource` or `AppleIcon` to display in the navigation bar.
100+
94101

95-
Note: SF Symbols are only supported on Apple platforms.
96102

97103
```tsx
98104
<Tab.Screen
@@ -104,9 +110,12 @@ Note: SF Symbols are only supported on Apple platforms.
104110
tabBarIcon: () => ({ sfSymbol: 'person' }),
105111
}}
106112
/>
107-
108113
```
109114

115+
:::note
116+
SF Symbols are only supported on Apple platforms.
117+
:::
118+
110119
#### `tabBarBadge`
111120

112121
Badge to show on the tab icon.

‎docs/docs/styles/index.css‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,10 @@
7171
--rp-code-title-bg: var(--rp-c-bg-mute);
7272
}
7373

74-
/* MD Containers */
75-
:root {
76-
--rp-container-info-border: rgba(155, 109, 255, 0.2) !important;
77-
--rp-container-info-text: #9b6dff !important;
78-
--rp-container-info-bg: rgba(155, 109, 255, 0.06) !important;
79-
--rp-container-info-code-bg: rgba(155, 109, 255, 0.1) !important;
80-
}
81-
82-
.dark {
83-
--rp-container-info-text: #9b6dff !important;
74+
.badge_99dcf.info_99dcf {
75+
color: var(--rp-container-info-text);
76+
background-color: var(--rp-container-info-bg);
77+
@apply h-6;
8478
}
8579

8680
/* Home background gradient */

‎docs/rspress.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export default defineConfig({
1111
icon: '/img/phone.png',
1212
logo: '/img/phone.png',
1313
themeConfig: {
14+
enableContentAnimation: true,
15+
enableAppearanceAnimation: false,
1416
socialLinks: [
1517
{
1618
icon: 'github',

0 commit comments

Comments
 (0)