Skip to content

Commit f8a79b8

Browse files
committed
documentation update
1 parent 28ecab4 commit f8a79b8

3 files changed

Lines changed: 46 additions & 6 deletions

File tree

website/docs/api/api-events.mdx

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -211,27 +211,33 @@ screenPoppedListener.remove();
211211
| :-------------: | :-------------------------------- |
212212
| **componentId** | Id of the screen which was popped |
213213

214-
## registerBottomTabSelectedListener
214+
## registerBottomTabPressedListener
215215

216-
Invoked when BottomTab is selected by a user.
216+
Invoked when a bottom tab is pressed by the user, including when [`selectTabOnPress`](options-bottomTab.mdx#selecttabonpress) is `false` (the selected tab does not change).
217217

218218
```js
219219
// Subscribe
220-
const bottomTabEventListener = Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex, unselectedTabIndex }) => {
220+
const bottomTabEventListener = Navigation.events().registerBottomTabPressedListener(({ tabIndex }) => {
221221

222222
});
223223
...
224224
// Unsubscribe
225225
bottomTabEventListener.remove();
226226
```
227227

228-
## registerBottomTabLongPressedListener
228+
| Parameter | Description |
229+
| :---------: | :---------------------------------- |
230+
| **tabIndex** | Index of the tab that was pressed |
231+
232+
Works with [custom bottom tab items](../docs/customBottomTabs.mdx) on iOS and Android.
233+
234+
## registerBottomTabSelectedListener
229235

230-
Invoked when BottomTab is long pressed by a user.
236+
Invoked when BottomTab is selected by a user.
231237

232238
```js
233239
// Subscribe
234-
const bottomTabEventListener = Navigation.events().registerBottomTabLongPressedListener(({ selectedTabIndex }) => {
240+
const bottomTabEventListener = Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex, unselectedTabIndex }) => {
235241

236242
});
237243
...
@@ -244,6 +250,22 @@ bottomTabEventListener.remove();
244250
| **selectedTabIndex** | Index of the newly selected tab |
245251
| **unselectedTabIndex** | Index of the previously selected tab |
246252

253+
Works with [custom bottom tab items](../docs/customBottomTabs.mdx) on iOS and Android.
254+
255+
## registerBottomTabLongPressedListener
256+
257+
Invoked when BottomTab is long pressed by a user. **iOS only.** Not emitted for [custom bottom tab items](../docs/customBottomTabs.mdx) — long press is handled on the native tab bar, which is hidden when every tab uses `bottomTab.component`.
258+
259+
```js
260+
// Subscribe
261+
const bottomTabEventListener = Navigation.events().registerBottomTabLongPressedListener(({ selectedTabIndex }) => {
262+
263+
});
264+
...
265+
// Unsubscribe
266+
bottomTabEventListener.remove();
267+
```
268+
247269
## navigationButtonPressed event
248270

249271
This event is emitted whenever a TopBar button is pressed by a user.

website/docs/api/options-bottomTab.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ bottomTab: {
3737

3838
Native still owns selection, visibility, `drawBehind`, animations, and `dotIndicator`. Pair with [`bottomTabs.customRow`](options-bottomTabs.mdx#customrow) to style the floating row.
3939

40+
Tab press and selection [events](events) match native bottom tabs; long press is not available on custom items. See [Custom bottom tabs — Events](../docs/customBottomTabs.mdx#events).
41+
4042
## `selectTabOnPress`
4143

4244
| Type | Required | Platform |

website/docs/docs/docs-customBottomTabs.mdx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,22 @@ Navigation.mergeOptions('BOTTOM_TABS_LAYOUT_ID', {
119119
});
120120
```
121121

122+
## Events
123+
124+
Taps on custom tab items use the same native selection pipeline as the built-in tab bar. Use the standard [Navigation events](../api/events) listeners:
125+
126+
| Listener | Custom row |
127+
| -------- | ---------- |
128+
| [`registerBottomTabPressedListener`](../api/events#registerbottomtabpressedlistener) | Yes — every tap (iOS and Android) |
129+
| [`registerBottomTabSelectedListener`](../api/events#registerbottomtabselectedlistener) | Yes — when the selected tab changes |
130+
| [`registerBottomTabLongPressedListener`](../api/events#registerbottomtablongpressedlistener) | **No** |
131+
132+
[`bottomTab.selectTabOnPress`](api/options-bottomTab.mdx#selecttabonpress): when `false`, **pressed** still fires; **selected** does not until you change the tab programmatically (for example via `bottomTabs.currentTabIndex`).
133+
134+
[`bottomTab.popToRoot`](api/options-bottomTab.mdx#poptoroot) and Android hardware-back tab history behave the same as with native tab items.
135+
136+
`registerBottomTabLongPressedListener` is **iOS-only** and is wired to the native `UITabBar` long-press gesture. With custom tabs the native bar is hidden and touches go to the custom row, so this listener does not fire for custom tab items.
137+
122138
## Custom row (`bottomTabs.customRow`)
123139

124140
When all tabs use custom components, RNN replaces the visible tab bar chrome with a **floating row** that hosts your React tab cells. Configure it with `bottomTabs.customRow` on the `bottomTabs` layout options.

0 commit comments

Comments
 (0)