Handling focus in react native with multiple input - react-native

Question

I am looking to only toggle the focus state on one of the inputs instead of both when onFocus is fired.
With both inputs having the 'onFocus' and 'onBlur' events I was expecting the state to update on only the current element that is focussed.
Should I be using refs instead of state for this sort of event handling?
class SignInScreen extends Component {
state = {
isFocused: false,
style: {
inputContainer: styles.input
}
}
onFocus = () => {
if(!this.state.isFocused) {
this.setState({
isFocused: true,
style: {
inputContainer: styles.inputDifferent
}
})
}
}
onBlur = () => {
if(this.state.isFocused) {
this.setState({
isFocused: false,
style: {
inputContainer: styles.input
}
})
}
}
render() {
return (
<Input
containerStyle={[styles.input, this.state.style.inputContainer]}
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
<Input
containerStyle={[styles.input, this.state.style.inputContainer]}
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
)
}
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: 'white,
marginBottom: 16,
maxWidth: '90%',
marginLeft: 'auto',
marginRight: 'auto'
},
inputDifferent: {
backgroundColor: 'gray',
}
});

Answer 1

Modify your code Like This:
Edited:
class SignInScreen extends Component {
state = {
isFocused: false,
firstLoad: true
}
onFocus = () => {
this.setState({
isFocused: !this.state.isFocused,
firstLoad: false
})
}
render() {
const {isFocused} = this.state
return (
<View>
<Input
containerStyle={isFocused || firstLoad ? styles.input : styles.inputDifferent}
onFocus={this.onFocus}
/>
<Input
containerStyle={!isFocused || firstLoad ? styles.input : styles.inputDifferent}
onFocus={this.onFocus}
/>
</View>
)
}
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: 'white',
marginBottom: 16,
maxWidth: '90%',
marginLeft: 'auto',
marginRight: 'auto'
},
inputDifferent: {
backgroundColor: 'gray',
}
});
its unnecessary to include styles on state. it is better to only use this.state.isFocus to make code simplier. just used this to make a condition on what style the inputs will be using.
you can also disregard onBlur. because all we need on the conditions is isFocus.
the key factor here is the exclamation symbol that will make the state toggle.
Edited: firstLoad state added to make the style of both inputs the same on load. that will be used on the condition inside input styles.
note: it can only work with two inputs