Mode in react native picker not working - ios

I want to make a gender selection using picker. but the mode is not working in ios. Im not sure in android.
<Picker
style={{justifyContent: 'center',backgroundColor: 'white'}}
selectedValue={this.state.gender}
onValueChange={(gender) => this.setState({ gender })}
mode='dialog'
>
<Item label="Male" value="Male" />
<Item label="Female" value="Female" />
</Picker>
Hope anyone could give some suggestion..
Thank you

The <Picker> component renders as a UIPickerView on iOS - that's what you're seeing there. This picker is rendered in-place rather than in a modal (as is the case on Android) - the mode prop you specified only applies to Android.
There are two options: render the picker within something like a <Modal> or use a different component entirely.

I solved this type of issue by doing like this.
import PickerExample from './PickerExample.js';
class Sample extends React.Component {
constructor(props) {
super(props);
this.state = {gender: '',};
this.updateGender = this.updateGender.bind(this);
}
updateGender(val){
this.setState({
gender: val
},function(){
alert("callback function as your wish")
});
}
render(){
return (
<PickerExample gender={this.state.gender} updateGender={this.updateGender.bind(this)} />
);
}
The PickerExample.js file look like this.
export default PickerExample = (props) => {
return (
<Picker selectedValue = {props.gender} onValueChange = {props.updateGender}>
<Picker.Item label = "MALE" value ="Male" />
<Picker.Item label = "Female" value = "female" />
</Picker>
);
}

I use the .ios.jsx extension for the iOS specific picker. Which I code as follows:
export const SelectWidget = ({
selectedOption,
setSelectedOption,
placeholderLabel,
options
}) => {
const items = options.map((option) => {
return <Picker.Item
key={option.key ?? option.label}
label={option.label}
value={option.value}
/>;
});
return (
<Picker
onValueChange={(value) => {
setSelectedOption(value);
}}
placeholder={{
label: placeholderLabel,
value: null,
}}
selectedValue={selectedOption}
style={{
width: '100%', // fill up the width of the device (without this, nothing gets displayed
}}
itemStyle={{
height: 150, // this reduces the height of the selector
color: colors.text, // if you're in dark mode set this to white.
}}
>
// default item
<Picker.Item label={placeholderLabel} value={null} />
{items}
</Picker>
);
};

Related

How to use draft-js-plugins in react-hook-form

I am using react-hook-form and draft.js as wysiwiyg.
My code where I am using draft-js-plugins:
import React, {useRef} from "react";
import { Controller } from "./src";
import Editor from "#draft-js-plugins/editor";
import createToolbarPlugin from "#draft-js-plugins/static-toolbar";
import "draft-js/dist/Draft.css";
import "#draft-js-plugins/static-toolbar/lib/plugin.css";
const staticToolbarPlugin = createToolbarPlugin();
const { Toolbar } = staticToolbarPlugin;
const plugins = [staticToolbarPlugin];
function RichText({ control }) {
const editor = useRef(null);
return (
<div
style={{
border: "1px solid #ccc",
minHeight: 30,
padding: 10
}}
>
<Toolbar />
<Controller
ref={editor}
name="DraftJS"
control={control}
plugins={plugins}
render={({ value, onChange }) => {
return <Editor editorState={value} onChange={onChange} />;
}}
/>
</div>
);
}
export default RichText;
All is ok, I see plugins. But when I want select word and click to plugin (I, B, U) button show me error
props.getEditorState is not a function
I don't understand how to solve it? I found some examples https://www.draft-js-plugins.com/plugin/static-toolbar .but didn't help
live example on codesandbox
I think you have to place the <Toolbar /> component as a sibling to your <Editor /> component and also pass the ref to it.
<Controller
name="DraftJS"
control={control}
render={({ value, onChange, ref }) => {
return (
<>
<Toolbar />
<Editor
ref={ref}
editorState={value}
onChange={onChange}
plugins={plugins}
/>
</>
);
}}
/>

react-hook-form FormContext default values problem

Trying to use react-hook-form FormContext.
I'm supplying deafultValues object in useForm hook. But couldn't manage to populate my component, simple textfield, with the default value in by Bottom.tsx component.
sandbox
Not sure if you got this working, but I was able to get it working by spreading the methods and using Controller for both TextFields. Also, you were importing control from RHF but it's actually returned from useFormContext()
import React from "react";
import Bottom from "./Bottom";
import { Grid } from "#material-ui/core";
import { useForm, FormContext } from "react-hook-form";
const App = () => {
const defaultValues = {
car: "AUDI",
city: "Tokyo"
};
const { ...methods } = useForm({ defaultValues });
return (
<FormContext {...methods}>
<Grid container direction="column">
<Grid item>
<Bottom />
</Grid>
</Grid>
</FormContext>
);
};
export default App;
import React from "react";
import { TextField } from "#material-ui/core";
import { useFormContext, Controller } from "react-hook-form";
interface BottomProps {}
const Bottom: React.FunctionComponent<BottomProps> = (props: BottomProps) => {
const { register, control } = useFormContext();
return (
<>
<Controller
name="city"
control={control}
as={
<TextField
ref={register}
style={{ margin: 20 }}
variant="outlined"
size="small"
label="City"
/>
}
/>
<Controller
name="car"
control={control}
as={
<TextField
ref={register}
style={{ margin: 20 }}
variant="outlined"
size="small"
label="Car"
/>
}
/>
</>
);
};
export default Bottom;
https://codesandbox.io/s/dreamy-goldwasser-so349?file=/src/App.tsx

not able to add image to tab bar item react navigation

# i am trying to add image to tab bar item but not able to load in react navigation #
## i am referring https://github.com/react-navigation/react-navigation/issues/1205#issuecomment-296708338 ##
import React from 'react';
import { Text, View, Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation'
import ScreenOne from './ScreenOne';
import Screentwo from './Screentwo';
import Preferences from './Preferences';
const TabNavigator = createBottomTabNavigator(
{
Home: {
screen : ScreenOne,
navigationOptions: {
showLabel: false,
tabBarIcon: <Image style={{ width: 30, height: 30 }} source={require('../images/Help_Header_Icon.png'
)}/>,
showIcon: true,
activeTintColor: '#00000',
inactiveTintColor: '#000000'
}
},
Settings: Screentwo,
Preference: Preferences
},
{
initialRouteName: "Home"
}
);
export default createAppContainer(TabNavigator);
### expecting to show image in tab bar item and hide tab bar label###
tabBarIcon
React Element or a function that given { focused: boolean,
horizontal: boolean, tintColor: string } returns a React.Node, to
display in the tab bar. horizontal is true when the device is in
landscape and false when portrait. The icon is re-rendered whenever
the device orientation changes.
Usage
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor, image }) => {
const { routeName } = navigation.state;
let imagepath;
if (routeName === "Home") {
imagepath = require('../images/Help_Header_Icon.png');
} else if (routeName === "Settings") {
imagepath = require('../images/Settings.png');
} else if (routeName === "Preference") {
imagepath = require('../images/Preference.png');
}
return (
<Image
style={{ width: 30, height: 30, resizeMode: "stretch" }}
source={imagepath}
/>
);
Please use Nativebase
https://docs.nativebase.io/Components.html#footer-tabs-icon-headref
import { Container, Header, Content, Footer, FooterTab, Button, Icon } from 'native-base';
<Footer>
<FooterTab>
<Button>
<Icon name="apps" />
</Button>
<Button>
<Icon name="camera" />
</Button>
<Button active>
<Icon active name="navigate" />
</Button>
<Button>
<Icon name="person" />
</Button>
</FooterTab>
</Footer>

React Native TextInput not updating when set state in iOS

I am facing this issue in iOS, did same thing on this link React Native TextInput that only accepts numeric characters
but did not slove in iOS deivce
changes by setting state not reflecting in TextInput, below is my code:
constructor(props) {
super(props);
this.state = {
enteredMobile: '',
};}
onChanged(text){
this.setState({
enteredMobile: text.replace(/[^0-9]/g, ''),
});
}
My Text Input
<TextInput
placeholderTextColor="lightgrey"
placeholder="Enter mobile no."
keyboardType = 'numeric'
maxLength={10}
style={{height: 40,top:140, left :94,width:500, borderColor: 'white', borderWidth: 1}}
onChangeText={(text) => this.onChanged(text)}
value = {this.state.enteredMobile}
/>
You can see the updated one in the image below the table but its not updating TextInput itself.
Pankaj You have to code using ES6 JS in onChanged function because sometime it will not work in ES5 syntax.
Try this one
constructor(props) {
super(props);
this.state = {
enteredMobile: '',
};
}
onChanged = (text) => {
this.setState({
enteredMobile: text.replace(/[^0-9]/g, ''),
});
}
My Text Input
<TextInput
placeholderTextColor="lightgrey"
placeholder="Enter mobile no."
keyboardType = 'numeric'
maxLength={10}
style={{height: 40,top:140, left :94,width:500, borderColor: 'white', borderWidth: 1}}
onChangeText={(text) => this.onChanged(text)}
value = {this.state.enteredMobile}
/>

React Native: How to select the next TextInput after pressing the "next" keyboard button?

I defined two TextInput fields as follows:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
But after pressing the "next" button on my keyboard, my react-native app isn't jumping to the second TextInput field. How can I achieve that?
Thanks!
Set the second TextInput focus, when the previous TextInput's onSubmitEditing is triggered.
Try this
Adding a Ref to second TextInput
ref={(input) => { this.secondTextInput = input; }}
Bind focus function to first TextInput's onSubmitEditing event.
onSubmitEditing={() => { this.secondTextInput.focus(); }}
Remember to set blurOnSubmit to false, to prevent keyboard flickering.
blurOnSubmit={false}
When all done, it should looks like this.
<TextInput
placeholder="FirstTextInput"
returnKeyType="next"
onSubmitEditing={() => { this.secondTextInput.focus(); }}
blurOnSubmit={false}
/>
<TextInput
ref={(input) => { this.secondTextInput = input; }}
placeholder="secondTextInput"
/>
Thought I would share my solution using a function component... 'this' not needed!
React 16.12.0 and React Native 0.61.5
Here is an example of my component:
import React, { useRef } from 'react'
...
const MyFormComponent = () => {
const ref_input2 = useRef();
const ref_input3 = useRef();
return (
<>
<TextInput
placeholder="Input1"
autoFocus={true}
returnKeyType="next"
onSubmitEditing={() => ref_input2.current.focus()}
/>
<TextInput
placeholder="Input2"
returnKeyType="next"
onSubmitEditing={() => ref_input3.current.focus()}
ref={ref_input2}
/>
<TextInput
placeholder="Input3"
ref={ref_input3}
/>
</>
)
}
You can do this without using refs. This approach is preferred, since refs can lead to fragile code. The React docs advise finding other solutions where possible:
If you have not programmed several apps with React, your first
inclination is usually going to be to try to use refs to "make things
happen" in your app. If this is the case, take a moment and think more
critically about where state should be owned in the component
hierarchy. Often, it becomes clear that the proper place to "own" that
state is at a higher level in the hierarchy. Placing the state there
often eliminates any desire to use refs to "make things happen" –
instead, the data flow will usually accomplish your goal.
Instead, we'll use a state variable to focus the second input field.
Add a state variable that we'll pass as a prop to the DescriptionInput:
initialState() {
return {
focusDescriptionInput: false,
};
}
Define a handler method that will set this state variable to true:
handleTitleInputSubmit() {
this.setState(focusDescriptionInput: true);
}
Upon submitting / hitting enter / next on the TitleInput, we'll call handleTitleInputSubmit. This will set focusDescriptionInput to true.
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title"
onSubmitEditing={this.handleTitleInputSubmit}
/>
DescriptionInput's focus prop is set to our focusDescriptionInput state variable. So, when focusDescriptionInput changes (in step 3), DescriptionInput will re-render with focus={true}.
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description"
focus={this.state.focusDescriptionInput}
/>
This is a nice way to avoid using refs, since refs can lead to more fragile code :)
EDIT: h/t to #LaneRettig for pointing out that you'll need to wrap the React Native TextInput with some added props & methods to get it to respond to focus:
// Props:
static propTypes = {
focus: PropTypes.bool,
}
static defaultProps = {
focus: false,
}
// Methods:
focus() {
this._component.focus();
}
componentWillReceiveProps(nextProps) {
const {focus} = nextProps;
focus && this.focus();
}
As of React Native 0.36, calling focus() (as suggested in several other answers) on a text input node isn't supported any more. Instead, you can use the TextInputState module from React Native. I created the following helper module to make this easier:
// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'
export function focusTextInput(node) {
try {
TextInputState.focusTextInput(findNodeHandle(node))
} catch(e) {
console.log("Couldn't focus text input: ", e.message)
}
}
You can, then, call the focusTextInput function on any "ref" of a TextInput. For example:
...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...
I created a small library that does this, no code change needed other than replacing your wrapping view and import of TextInput:
import { Form, TextInput } from 'react-native-autofocus'
export default () => (
<Form>
<TextInput placeholder="test" />
<TextInput placeholder="test 2" />
</Form>
)
https://github.com/zackify/react-native-autofocus
Explained in detail here: https://zach.codes/autofocus-inputs-in-react-native/
Using react-native 0.45.1 I also encountered problems trying to set focus on a password TextInput after pressing return key on a username TextInput.
After having tried most of the top rated solutions here on SO I found a solution on github that fulfilled my needs:
https://github.com/shoutem/ui/issues/44#issuecomment-290724642
To sum it up:
import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';
export default class TextInput extends Component {
render() {
const { props } = this;
return (
<RNTextInput
{...props}
ref={(input) => props.inputRef && props.inputRef(input)}
/>
);
}
}
And then I use it like this:
import React, {Component} from 'react';
import {
View,
} from 'react-native';
import TextInput from "../../components/TextInput";
class Login extends Component {
constructor(props) {
super(props);
this.passTextInput = null
}
render() {
return (
<View style={{flex:1}}>
<TextInput
style={{flex:1}}
placeholder="Username"
onSubmitEditing={(event) => {
this.passTextInput.focus()
}}
/>
<TextInput
style={{flex:1}}
placeholder="Password"
inputRef={(input) => {
this.passTextInput = input
}}
/>
</View>
)
}
}
Combining #Eli Johnson's solution for functional components with #Rodrigo Tessarollo's solution for a CustomTextInput:
import React, { useRef } from 'react';
import { CustomTextInput } from 'path/to/CustomTextInput';
...
export const MyFormComponent = () => {
const ref_to_input2 = useRef();
return (
<>
<CustomTextInput
placeholder="Input 1"
autoFocus={true}
returnKeyType="next"
onSubmitEditing={() => ref_to_input2.current.focus()}
/>
<CustomTextInput
placeholder="Input 2"
returnKeyType="done"
refInner={ref_to_input2}
onSubmitEditing={/* Do something! */}
/>
</>
)
}
and in your CustomTextInput component:
import { TextInput } from "react-native";
export const CustomTextInput = (props) => {
<TextInput
ref={props.refInner}
{...props}
/>
}
For me on RN 0.50.3 it's possible with this way:
<TextInput
autoFocus={true}
onSubmitEditing={() => {this.PasswordInputRef._root.focus()}}
/>
<TextInput ref={input => {this.PasswordInputRef = input}} />
You must see this.PasswordInputRef._root.focus()
My scenario is < CustomBoladonesTextInput /> wrapping a RN < TextInput />.
I solved this issue as follow:
My form looks like:
<CustomBoladonesTextInput
onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
returnKeyType="next"
... />
<CustomBoladonesTextInput
ref={ref => this.customInput2 = ref}
refInner="innerTextInput2"
... />
On CustomBoladonesTextInput's component definition, I pass the refField to the inner ref prop like this:
export default class CustomBoladonesTextInput extends React.Component {
render() {
return (< TextInput ref={this.props.refInner} ... />);
}
}
And voila. Everything get back works again.
Hope this helps
If you happen to be using tcomb-form-native as I am, you can do this, too. Here's the trick: instead of setting the props of the TextInput directly, you do it via options. You can refer to the fields of the form as:
this.refs.form.getComponent('password').refs.input.focus()
So the final product looks something like this:
var t = require('tcomb-form-native');
var Form = t.form.Form;
var MyForm = t.struct({
field1: t.String,
field2: t.String,
});
var MyComponent = React.createClass({
_getFormOptions () {
return {
fields: {
field1: {
returnKeyType: 'next',
onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
},
},
};
},
render () {
var formOptions = this._getFormOptions();
return (
<View style={styles.container}>
<Form ref="form" type={MyForm} options={formOptions}/>
</View>
);
},
});
(Credit to remcoanker for posting the idea here: https://github.com/gcanti/tcomb-form-native/issues/96)
This is the way I achieved it. And the example below has used the React.createRef() API introduced in React 16.3.
class Test extends React.Component {
constructor(props) {
super(props);
this.secondTextInputRef = React.createRef();
}
render() {
return(
<View>
<TextInput
placeholder = "FirstTextInput"
returnKeyType="next"
onSubmitEditing={() => { this.secondTextInputRef.current.focus(); }}
/>
<TextInput
ref={this.secondTextInputRef}
placeholder = "secondTextInput"
/>
</View>
);
}
}
I think this will help you.
Try this solution on React Native's GitHub issues.
https://github.com/facebook/react-native/pull/2149#issuecomment-129262565
You need to use the ref prop for the TextInput component.
Then you need a create a function that gets called on onSubmitEditing prop that moves the focus on the second TextInput ref.
var InputScreen = React.createClass({
_focusNextField(nextField) {
this.refs[nextField].focus()
},
render: function() {
return (
<View style={styles.container}>
<TextInput
ref='1'
style={styles.input}
placeholder='Normal'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => this._focusNextField('2')}
/>
<TextInput
ref='2'
style={styles.input}
keyboardType='email-address'
placeholder='Email Address'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => this._focusNextField('3')}
/>
<TextInput
ref='3'
style={styles.input}
keyboardType='url'
placeholder='URL'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => this._focusNextField('4')}
/>
<TextInput
ref='4'
style={styles.input}
keyboardType='numeric'
placeholder='Numeric'
blurOnSubmit={false}
onSubmitEditing={() => this._focusNextField('5')}
/>
<TextInput
ref='5'
style={styles.input}
keyboardType='numbers-and-punctuation'
placeholder='Numbers & Punctuation'
returnKeyType='done'
/>
</View>
);
}
});
<TextInput placeholder="Nombre"
ref="1"
editable={true}
returnKeyType="next"
underlineColorAndroid={'#4DB6AC'}
blurOnSubmit={false}
value={this.state.First_Name}
onChangeText={First_Name => this.setState({ First_Name })}
onSubmitEditing={() => this.focusNextField('2')}
placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />
<TextInput placeholder="Apellido"
ref="2"
editable={true}
returnKeyType="next"
underlineColorAndroid={'#4DB6AC'}
blurOnSubmit={false}
value={this.state.Last_Name}
onChangeText={Last_Name => this.setState({ Last_Name })}
onSubmitEditing={() => this.focusNextField('3')}
placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />
and add method
focusNextField(nextField) {
this.refs[nextField].focus();
}
Using callback refs instead of the legacy string refs:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title"
onSubmitEditing={() => {this.nextInput.focus()}}
/>
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description"
ref={nextInput => this.nextInput = nextInput}
/>
For the accepted solution to work if your TextInput is inside another component, you'll need to "pop" the reference from ref to the parent container.
// MyComponent
render() {
<View>
<TextInput ref={(r) => this.props.onRef(r)} { ...this.props }/>
</View>
}
// MyView
render() {
<MyComponent onSubmitEditing={(evt) => this.myField2.focus()}/>
<MyComponent onRef={(r) => this.myField2 = r}/>
}
in your component:
constructor(props) {
super(props);
this.focusNextField = this
.focusNextField
.bind(this);
// to store our input refs
this.inputs = {};
}
focusNextField(id) {
console.log("focus next input: " + id);
this
.inputs[id]
._root
.focus();
}
Note: I used ._root because it is a ref to TextInput in NativeBase'Library' Input
and in your text inputs like this
<TextInput
onSubmitEditing={() => {
this.focusNextField('two');
}}
returnKeyType="next"
blurOnSubmit={false}/>
<TextInput
ref={input => {
this.inputs['two'] = input;
}}/>
<TextInput
keyboardType="email-address"
placeholder="Email"
returnKeyType="next"
ref="email"
onSubmitEditing={() => this.focusTextInput(this.refs.password)}
blurOnSubmit={false}
/>
<TextInput
ref="password"
placeholder="Password"
secureTextEntry={true} />
And add method for onSubmitEditing={() => this.focusTextInput(this.refs.password)} as below:
private focusTextInput(node: any) {
node.focus();
}
Here is how achieved this for reactjs phone code inputs
import React, { useState, useRef } from 'react';
function Header(props) {
const [state , setState] = useState({
phone_number:"",
code_one:'',
code_two:'',
code_three:'',
code_four:'',
submitted:false,
})
const codeOneInput = useRef(null);
const codeTwoInput = useRef(null);
const codeThreeInput = useRef(null);
const codeFourInput = useRef(null);
const handleCodeChange = (e) => {
const {id , value} = e.target
if(value.length < 2){
setState(prevState => ({
...prevState,
[id] : value
}))
if(id=='code_one' && value.length >0){
codeTwoInput.current.focus();
}
if(id=='code_two' && value.length >0){
codeThreeInput.current.focus();
}
if(id=='code_three' && value.length >0){
codeFourInput.current.focus();
}
}
}
const sendCodeToServer = () => {
setState(prevState => ({
...prevState,
submitted : true,
}))
let codeEnteredByUser = state.code_one + state.code_two + state.code_three + state.code_four
axios.post(API_BASE_URL, {code:codeEnteredByUser})
.then(function (response) {
console.log(response)
})
}
return(
<>
<div className="are">
<div className="POP-INN-INPUT">
<input type="text" id="code_one" ref={codeOneInput} value={state.code_one} onChange={handleCodeChange} autoFocus/>
<input type="text" id="code_two" ref={codeTwoInput} value={state.code_two} onChange={handleCodeChange}/>
<input type="text" id="code_three" ref={codeThreeInput} value={state.code_three} onChange={handleCodeChange}/>
<input type="text" id="code_four" ref={codeFourInput} value={state.code_four} onChange={handleCodeChange}/>
</div>
<button disabled={state.submitted} onClick={sendCodeToServer}>
</div>
</>
)
}
export default
There is a way to capture tabs in a TextInput. It's hacky, but better than nothing.
Define an onChangeText handler that compares the new input value with the old, checking for a \t. If one is found, advance the field as shown by #boredgames
Assuming the variable username contains the value for the username and setUsername dispatches an action to change it in the store (component state, redux store, etc), do something like this:
function tabGuard (newValue, oldValue, callback, nextCallback) {
if (newValue.indexOf('\t') >= 0 && oldValue.indexOf('\t') === -1) {
callback(oldValue)
nextCallback()
} else {
callback(newValue)
}
}
class LoginScene {
focusNextField = (nextField) => {
this.refs[nextField].focus()
}
focusOnPassword = () => {
this.focusNextField('password')
}
handleUsernameChange = (newValue) => {
const { username } = this.props // or from wherever
const { setUsername } = this.props.actions // or from wherever
tabGuard(newValue, username, setUsername, this.focusOnPassword)
}
render () {
const { username } = this.props
return (
<TextInput ref='username'
placeholder='Username'
autoCapitalize='none'
autoCorrect={false}
autoFocus
keyboardType='email-address'
onChangeText={handleUsernameChange}
blurOnSubmit={false}
onSubmitEditing={focusOnPassword}
value={username} />
)
}
}
Really annoying that RN doesn't have some sort of Tabindex system.
A functional component, for my use case, I have an array of string IDs for inputs which I iterate through and show one text input each. The following code will automatically jump the user through all of them, stopping the keyboard from disappearing/reappearing between fields and dismissing it at the end, also showing the appropriate "action" button on the keyboard.
Typescript, Native Base.
const stringFieldIDs = [
'q1', 'q2', 'q3'
];
export default () => {
const stringFieldRefs = stringFieldIDs.map(() => useRef < any > ());
const basicStringField = (id: string, ind: number) => {
const posInd = stringFieldIDs.indexOf(id);
const isLast = posInd === stringFieldIDs.length - 1;
return ( <
Input blurOnSubmit = {
isLast
}
ref = {
stringFieldRefs[posInd]
}
returnKeyType = {
isLast ? 'done' : 'next'
}
onSubmitEditing = {
isLast ?
undefined :
() => stringFieldRefs[posInd + 1].current._root.focus()
}
/>
);
};
return stringFieldIDs.map(basicStringField);
};
import React, { useState, useEffect, useRef, } from 'react';
const OTP = (props) => {
const OTP = [];
const ref_input = [];
ref_input[0] = useRef();
ref_input[1] = useRef();
ref_input[2] = useRef();
ref_input[3] = useRef();
const focusNext = (text, index) => {
if (index < ref_input.length - 1 && text) {
ref_input[index + 1].current.focus();
}
if (index == ref_input.length - 1) {
ref_input[index].current.blur();
}
OTP[index] = text;
}
const focusPrev = (key, index) => {
if (key === "Backspace" && index !== 0) {
ref_input[index - 1].current.focus();
}
}
return (
<SafeAreaView>
<View>
<ScrollView contentInsetAdjustmentBehavior="automatic" showsVerticalScrollIndicator={false}>
<View style={loginScreenStyle.titleWrap}>
<Title style={loginScreenStyle.titleHeading}>Verify OTP</Title>
<Subheading style={loginScreenStyle.subTitle}>Enter the 4 digit code sent to your mobile number</Subheading>
</View>
<View style={loginScreenStyle.inputContainer}>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
autoFocus={true}
returnKeyType="next"
ref={ref_input[0]}
onChangeText={text => focusNext(text, 0)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 0)}
/>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
ref={ref_input[1]}
onChangeText={text => focusNext(text, 1)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 1)}
/>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
ref={ref_input[2]}
onChangeText={text => focusNext(text, 2)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 2)}
/>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
ref={ref_input[3]}
onChangeText={text => focusNext(text, 3)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 3)}
/>
</View>
</ScrollView>
</View>
</SafeAreaView >
)
}
export default OTP;
If you are using NativeBase as UI Components you can use this sample
<Item floatingLabel>
<Label>Title</Label>
<Input
returnKeyType = {"next"}
autoFocus = {true}
onSubmitEditing={(event) => {
this._inputDesc._root.focus();
}} />
</Item>
<Item floatingLabel>
<Label>Description</Label>
<Input
getRef={(c) => this._inputDesc = c}
multiline={true} style={{height: 100}} />
onSubmitEditing={(event) => { this._inputLink._root.focus(); }} />
</Item>
Here a reagent solution for a input component that has a :focus property.
The field will be focused as long as this prop is set to true and will not have focus as long as this is false.
Unfortunately this component needs to have a :ref defined, I could not find an other way to call .focus() on it. I am happy about suggestions.
(defn focusable-input [init-attrs]
(r/create-class
{:display-name "focusable-input"
:component-will-receive-props
(fn [this new-argv]
(let [ref-c (aget this "refs" (:ref init-attrs))
focus (:focus (ru/extract-props new-argv))
is-focused (.isFocused ref-c)]
(if focus
(when-not is-focused (.focus ref-c))
(when is-focused (.blur ref-c)))))
:reagent-render
(fn [attrs]
(let [init-focus (:focus init-attrs)
auto-focus (or (:auto-focus attrs) init-focus)
attrs (assoc attrs :auto-focus auto-focus)]
[input attrs]))}))
https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5

Resources