Comments (12)
It could be handled by tcomb-form-native
, enabled or disabled by a prop in the Form
component. This is something we would like to have, how do you feel about sending a PR? I'm glad to review.
from tcomb-form-native.
@gcanti the solution in SO is very specific to specific form.
I would expect tcomb-form-native to handle this dynamically.
from tcomb-form-native.
Any update on this?
from tcomb-form-native.
Was this issue closed because of no gist or because the feature was added?
Here is an example of how to do it: http://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar
In short, add an onSubmitEditing attribute to the TextInput:
<TextInput
...
onSubmitEditing={(event) => {
this.refs.foo.focus();
}}
/>
from tcomb-form-native.
I agree it'd be nice to have this inside tcomb-form-native
. Just wanted to leave a possible workaround for anyone coming to this issue (like I did). Add this method to the component with the form:
addNext = (nextFieldName) => {
return {
returnKeyType: 'next',
onSubmitEditing: () => {
// Assuming your form ref is stored in this.form, change to your needs.
const target = this.form.getComponent(nextFieldName);
if (target && target.refs && target.refs.input) target.refs.input.focus();
}
}
}
and then in the config of your fields simply add
fields: {
name: { label: 'Name', ...this.addNext('surname') },
surname: { label: 'Surname', ...this.addNext('address') },
}
from tcomb-form-native.
I know this is an old topic – but this is still an issue!
I can't use the solution above because onSubmitEditing
is not fired when hitting the next
button on Android. Tried with onBlur
instead, which is fired, but then target.refs
is just an empty object, so I cannot focus the next input. Any advice on how to solve this?
Here is the simplified code:
const formRef = useRef();
const Name = t.struct({
firstname: t.String,
lastname: t.String,
});
const options = {
order: ['firstname', 'lastname'],
fields: {
firstname: {
placeholder: 'First Name',
returnKeyType: 'next',
onSubmitEditing: () => console.log('submit editing'), // never fired
onBlur: () => formRef.current.getComponent('lastname').refs.input.focus(), // input is undefined
},
lastname: {
placeholder: 'Last Name',
returnKeyType: 'done',
},
},
};
return (
<KeyboardAvoidingView behavior='position'>
<Animatable.View animation='fadeInUp' duration={400}>
<Form ref={formRef} type={Name} options={options} value={formData} onChange={handleFormChange} />
</Animatable.View>
<KeyboardAvoidingView>
);
from tcomb-form-native.
Yes, it would be nice.
Generally if it can be done by hand and a rule exists, it can be automated by tcomb-form(-native).
Currently how you do that with react-native? Could you provide a gist?
from tcomb-form-native.
Was this issue closed because...
Because of inactivity. BTW there's a solution for tcomb-form-native
in the SO question you posted and that links to this issue #96 (no feature to add)
from tcomb-form-native.
Excellent. Wasn't familiar with the getComponent
api.
from tcomb-form-native.
This would be cool functionality to have; Is this something that tcomb-form-native should handle out of the box, or is that up to the user to control? 🤔
from tcomb-form-native.
+1, subscribing to thread
from tcomb-form-native.
I know this is an old topic – but this is still an issue!
I can't use the solution above because
onSubmitEditing
is not fired when hitting thenext
button on Android. Tried withonBlur
instead, which is fired, but thentarget.refs
is just an empty object, so I cannot focus the next input. Any advice on how to solve this?Here is the simplified code:
const formRef = useRef(); const Name = t.struct({ firstname: t.String, lastname: t.String, }); const options = { order: ['firstname', 'lastname'], fields: { firstname: { placeholder: 'First Name', returnKeyType: 'next', onSubmitEditing: () => console.log('submit editing'), // never fired onBlur: () => formRef.current.getComponent('lastname').refs.input.focus(), // input is undefined }, lastname: { placeholder: 'Last Name', returnKeyType: 'done', }, }, }; return ( <KeyboardAvoidingView behavior='position'> <Animatable.View animation='fadeInUp' duration={400}> <Form ref={formRef} type={Name} options={options} value={formData} onChange={handleFormChange} /> </Animatable.View> <KeyboardAvoidingView> );
Any luck on this?
from tcomb-form-native.
Related Issues (20)
- Contact us form ?
- Styling error fields
- Terms validation ?
- Keep entered values after error HOT 1
- how we set height to input box? HOT 1
- numberOfLines is not working HOT 1
- Changing the placeholder for datetimepicker from Tap here to select a date to Start Date for example
- Unable to resolve "tcomb-form.native" from "app\components\forms\testForm.js"
- I've got error message when I try expo start --web HOT 1
- componentWillReceiveProps
- TypeError: locals.value.toDateString is not a function when trying to use value prop HOT 1
- Need more control over opening and closing of iOS Select component
- Does tcomb-form-native support async verification?
- iOS 14: Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`
- custom stylesheets does not apply to optional field title
- Problem with submit form HOT 1
- how to add BUTTON IN BETWEEN the form fields
- Please delete
- react native t comb form ERROR Warning: Component "Textbox" contains the string ref "input". React.createRef() HOT 2
- WARNING: This library will no longer work with React Native after version 0.65 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tcomb-form-native.