callstack / callstack/react-native-paper
Add handler for keyboard interactions to TextInput
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
**Is your feature request related to a problem? Please describe.**
I use your library for mobile and web development (expo with react-native and react-native-web) and in the web app I find even myself hitting enter key to save some text in TextInput component. In react-native-web the TextInput component provides a "onKeyPressed" prop and in react-native there is something similar with "onSubmitEditing" prop.
**Describe the solution you'd like**
I'd like to have an "onKeyPressed" prop on platform web and if usefull an "onSubmitEditing" prop in mobile TextInput component.
```jsx
setValue(newValue)}
label={'some label')}
placeholder={'some placeholder'}
dense={true}
error={getError()}
onKeyPress={(event) => {
if(event.key === 'Enter' && !getError()) {
handleSave();
}
}}
/>
```
**Describe alternatives you've considered**
There is a way to implement the functionality with the "render" prop:
```jsx
import {
Platform,
TextInput as NativeTextInput
} from 'react-native';
setValue(newValue)}
label={'some label')}
placeholder={'some placeholder'}
dense={true}
error={getError()}
render={(props) => {
if(event.key === 'Enter' && isURL(textValue, validatorOptions)) {
handleSave();
}
}
: undefined
}
/>}
/>
```
but the way with direct props is cleaner and more intuitive in my opinion...
**Additional context**
My examples are only with onKeyPress for the "web" version, for the "mobile" it works similar...
I would submit a pull request on this, but I never used typescript while developing, so I hope someone else find this idea useful and develops a solution...
snack as requested by @github-actions: https://snack.expo.dev/3l-fYP0gh
not sure why the versions matter submitting a feature request, but here they are:
* `react-native`: 0.64.3
* `react-native-paper`: 4.11.1
* `react-native-vector-icons`: not sure what is included in "@expo/vector-icons" 12.0.0
Contributor guide
Research direction
Start at the TextInput component and its existing render prop, then inspect how platform-specific input props and keyboard events are exposed. The work is done when the requested direct keyboard interaction props are supported for the relevant web and mobile platforms, with behavior matching the existing platform APIs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100