Focus not changing from TextInput in redux-form - react-native

Question

I have form with only one TextInput which is made using redux-form. I am checking (!meta.active) to show validation message, since focus is not changing even on button click from TextInput, meta.active is always true and validation message does not shows up.
export default function MTTextInput(props) {
const { input, label, meta, ...inputProps } = props;
var hasError = false;
if (meta.error !== undefined && meta.touched && !meta.active) {
hasError = true;
}
return (
<Item fixedLabel error={hasError} ><Label>{label}</Label>
<Input
{...inputProps}
onChangeText={input.onChange}
onBlur={input.onBlur}
onFocus={input.onFocus}
value={input.value}
/>
{hasError ? <Text>{meta.error}</Text> : <Text />}
</Item>
);
}
MTTextInput.propTypes = {
input: PropTypes.shape({
onBlur: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
onFocus: PropTypes.func.isRequired,
value: PropTypes.any.isRequired
}).isRequired,
meta: PropTypes.shape({
active: PropTypes.bool.isRequired,
error: PropTypes.string,
invalid: PropTypes.bool.isRequired,
pristine: PropTypes.bool.isRequired,
visited: PropTypes.bool.isRequired
}).isRequired
};

Answer 1

Perhaps you may want to switch from an <Input/> component to a <TextInput/> component. Here is a generic example that you can find here:
import React from 'react';
import { TextInput, View, Text } from 'react-native';
/**
* to be wrapped with redux-form Field component
*/
export default function MyTextInput(props) {
const { input, meta, ...inputProps } = props;
const formStates = ['active', 'autofilled', 'asyncValidating', 'dirty', 'invalid', 'pristine',
'submitting', 'touched', 'valid', 'visited'];
return (
<View>
<TextInput
{...inputProps}
onChangeText={input.onChange}
onBlur={input.onBlur}
onFocus={input.onFocus}
value={input.value}
/>
<Text>The { input.name} input is:</Text>
{
formStates.filter((state) => meta[state]).map((state) => {
return <Text key={state}> - { state }</Text>;
})
}
</View>
);
}