callstack / callstack/react-native-paper

Add handler for keyboard interactions to TextInput

Ouverte
#3,087 2 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
repro provided
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.