Skip to content

Commit b4198e7

Browse files
kirillzyuskokirillzyusko
committed
docs: migrate more props to a new API
1 parent 6a96792 commit b4198e7

File tree

1 file changed

+116
-99
lines changed
  • docs/docs/api/components/keyboard-toolbar

1 file changed

+116
-99
lines changed

‎docs/docs/api/components/keyboard-toolbar/index.mdx‎

Lines changed: 116 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -88,82 +88,50 @@ import { KeyboardToolbar } from "react-native-keyboard-controller";
8888

8989
### `<KeyboardToolbar.Prev>`
9090

91-
## Props
92-
93-
### [`View Props`](https://reactnative.dev/docs/view#props)
94-
95-
Inherits [View Props](https://reactnative.dev/docs/view#props).
96-
97-
### [`KeyboardStickyViewProps`](./keyboard-sticky-view)
98-
99-
Inherits [KeyboardStickyViewProps](./keyboard-sticky-view).
100-
101-
### `button`
102-
103-
This property allows to render custom touchable component for next, previous and done button.
104-
105-
```tsx
106-
import { TouchableOpacity } from "react-native-gesture-handler";
107-
import {
108-
KeyboardToolbar,
109-
KeyboardToolbarProps,
110-
} from "react-native-keyboard-controller";
111-
112-
const CustomButton: KeyboardToolbarProps["button"] = ({
113-
children,
114-
onPress,
115-
}) => <TouchableOpacity onPress={onPress}>{children}</TouchableOpacity>;
116-
117-
// ...
118-
119-
<KeyboardToolbar button={CustomButton} />;
120-
```
121-
122-
### `doneText`
123-
124-
The property that allows to specify custom text for `Done` button.
91+
#### `onPress`
12592

126-
```tsx
127-
<KeyboardToolbar doneText="Close" />
128-
```
129-
130-
### `icon`
131-
132-
`icon` property allows to render custom icons for prev and next buttons.
93+
A callback that is called when the user presses the **previous** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).
13394

13495
```tsx
135-
import { Text } from "react-native";
136-
import {
137-
KeyboardToolbar,
138-
KeyboardToolbarProps,
139-
} from "react-native-keyboard-controller";
96+
import { Platform } from "react-native";
97+
import { KeyboardToolbar } from "react-native-keyboard-controller";
98+
import { trigger } from "react-native-haptic-feedback";
14099

141-
const Icon: KeyboardToolbarProps["icon"] = ({ type }) => {
142-
return <Text>{type === "next" ? "⬇️" : "⬆️"}</Text>;
100+
const options = {
101+
enableVibrateFallback: true,
102+
ignoreAndroidSystemSettings: false,
143103
};
104+
const haptic = () =>
105+
trigger(Platform.OS === "ios" ? "impactLight" : "keyboardTap", options);
144106

145107
// ...
146108

147-
<KeyboardToolbar icon={Icon} />;
109+
<KeyboardToolbar>
110+
<KeyboardToolbar.Prev onPress={haptic} />
111+
</KeyboardToolbar>;
148112
```
149113

150-
### `insets`
151-
152-
An object containing `left` and `right` properties that define the `KeyboardToolbar` padding. This helps prevent overlap with system UI elements, especially in landscape orientation:
114+
:::tip Prevent Default Action
115+
To prevent the default action, call `e.preventDefault()` inside the callback:
153116

154117
```tsx
155-
import { useSafeAreaInsets } from "react-native-safe-area-context";
156-
157-
// ...
118+
<KeyboardToolbar>
119+
<KeyboardToolbar.Prev
120+
onPress={(e) => {
121+
// the focus will not be moved to the prev input
122+
e.preventDefault();
123+
}}
124+
/>
125+
</KeyboardToolbar>
126+
```
158127

159-
const insets = useSafeAreaInsets();
128+
:::
160129

161-
<KeyboardToolbar insets={insets} />;
162-
```
130+
### `<KeyboardToolbar.Next>`
163131

164-
### `onDoneCallback`
132+
#### `onPress`
165133

166-
A callback that is called when the user presses the **done** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).
134+
A callback that is called when the user presses the **next** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).
167135

168136
```tsx
169137
import { Platform } from "react-native";
@@ -179,25 +147,42 @@ const haptic = () =>
179147

180148
// ...
181149

182-
<KeyboardToolbar onDoneCallback={haptic} />;
150+
<KeyboardToolbar>
151+
<KeyboardToolbar.Next onPress={haptic} />
152+
</KeyboardToolbar>;
183153
```
184154

185155
:::tip Prevent Default Action
186156
To prevent the default action, call `e.preventDefault()` inside the callback:
187157

188158
```tsx
189-
<KeyboardToolbar
190-
onDoneCallback={(e) => {
191-
e.preventDefault(); // keyboard will not be dismissed, since we cancelled the default action
192-
}}
193-
/>
159+
<KeyboardToolbar>
160+
<KeyboardToolbar.Next
161+
onPress={(e) => {
162+
// the focus will not be moved to the next input
163+
e.preventDefault();
164+
}}
165+
/>
166+
</KeyboardToolbar>
194167
```
195168

196169
:::
197170

198-
### `onNextCallback`
171+
### `<KeyboardToolbar.Done>`
199172

200-
A callback that is called when the user presses the **next** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).
173+
#### `text`
174+
175+
The property that allows to specify custom text for `Done` button.
176+
177+
```tsx
178+
<KeyboardToolbar>
179+
<KeyboardToolbar.Done text="Close" />
180+
</KeyboardToolbar>
181+
```
182+
183+
#### `onPress`
184+
185+
A callback that is called when the user presses the **done** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).
201186

202187
```tsx
203188
import { Platform } from "react-native";
@@ -213,55 +198,91 @@ const haptic = () =>
213198

214199
// ...
215200

216-
<KeyboardToolbar onNextCallback={haptic} />;
201+
<KeyboardToolbar>
202+
<KeyboardToolbar.Done onPress={haptic} />
203+
</KeyboardToolbar>;
217204
```
218205

219206
:::tip Prevent Default Action
220207
To prevent the default action, call `e.preventDefault()` inside the callback:
221208

222209
```tsx
223-
<KeyboardToolbar
224-
onNextCallback={(e) => {
225-
e.preventDefault(); // the focus will not be moved to the next input
226-
}}
227-
/>
210+
<KeyboardToolbar>
211+
<KeyboardToolbar.Done
212+
onPress={(e) => {
213+
// keyboard will not be dismissed, since we cancelled the default action
214+
e.preventDefault();
215+
}}
216+
/>
217+
</KeyboardToolbar>
228218
```
229219

230220
:::
231221

232-
### `onPrevCallback`
222+
## Props
233223

234-
A callback that is called when the user presses the **previous** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).
224+
### [`View Props`](https://reactnative.dev/docs/view#props)
225+
226+
Inherits [View Props](https://reactnative.dev/docs/view#props).
227+
228+
### [`KeyboardStickyViewProps`](./keyboard-sticky-view)
229+
230+
Inherits [KeyboardStickyViewProps](./keyboard-sticky-view).
231+
232+
### `button`
233+
234+
This property allows to render custom touchable component for next, previous and done button.
235235

236236
```tsx
237-
import { Platform } from "react-native";
238-
import { KeyboardToolbar } from "react-native-keyboard-controller";
239-
import { trigger } from "react-native-haptic-feedback";
237+
import { TouchableOpacity } from "react-native-gesture-handler";
238+
import {
239+
KeyboardToolbar,
240+
KeyboardToolbarProps,
241+
} from "react-native-keyboard-controller";
240242

241-
const options = {
242-
enableVibrateFallback: true,
243-
ignoreAndroidSystemSettings: false,
244-
};
245-
const haptic = () =>
246-
trigger(Platform.OS === "ios" ? "impactLight" : "keyboardTap", options);
243+
const CustomButton: KeyboardToolbarProps["button"] = ({
244+
children,
245+
onPress,
246+
}) => <TouchableOpacity onPress={onPress}>{children}</TouchableOpacity>;
247247

248248
// ...
249249

250-
<KeyboardToolbar onPrevCallback={haptic} />;
250+
<KeyboardToolbar button={CustomButton} />;
251251
```
252252

253-
:::tip Prevent Default Action
254-
To prevent the default action, call `e.preventDefault()` inside the callback:
253+
### `icon`
254+
255+
`icon` property allows to render custom icons for prev and next buttons.
255256

256257
```tsx
257-
<KeyboardToolbar
258-
onPrevCallback={(e) => {
259-
e.preventDefault(); // the focus will not be moved to the prev input
260-
}}
261-
/>
258+
import { Text } from "react-native";
259+
import {
260+
KeyboardToolbar,
261+
KeyboardToolbarProps,
262+
} from "react-native-keyboard-controller";
263+
264+
const Icon: KeyboardToolbarProps["icon"] = ({ type }) => {
265+
return <Text>{type === "next" ? "⬇️" : "⬆️"}</Text>;
266+
};
267+
268+
// ...
269+
270+
<KeyboardToolbar icon={Icon} />;
262271
```
263272

264-
:::
273+
### `insets`
274+
275+
An object containing `left` and `right` properties that define the `KeyboardToolbar` padding. This helps prevent overlap with system UI elements, especially in landscape orientation:
276+
277+
```tsx
278+
import { useSafeAreaInsets } from "react-native-safe-area-context";
279+
280+
// ...
281+
282+
const insets = useSafeAreaInsets();
283+
284+
<KeyboardToolbar insets={insets} />;
285+
```
265286

266287
### `opacity`
267288

@@ -271,10 +292,6 @@ This property allows to specify the opacity of the toolbar container. The value
271292
<KeyboardToolbar opacity="EE" />
272293
```
273294

274-
### `showArrows`
275-
276-
A boolean prop indicating whether to show `next` and `prev` buttons. Can be useful to set it to `false` if you have only one input and want to show only `Done` button. Default to `true`.
277-
278295
### `theme`
279296

280297
Prop allowing you to specify the brand colors of your application for `KeyboardToolbar` component. If you want to re-use already platform specific colors you can import `DefaultKeyboardToolbarTheme` object and override colors only necessary colors:
@@ -473,7 +490,7 @@ To migrate from the legacy prop-based API to the compound API:
473490

474491
```tsx
475492
// Old:
476-
<KeyboardToolbar content={<AutoFillContacts />} blur={<BlurView />} />
493+
<KeyboardToolbar content={<AutoFillContacts />} blur={<BlurView />} doneText="Close" />
477494

478495
// New:
479496
<KeyboardToolbar>

0 commit comments

Comments
 (0)