onChangeText in TextInput is not working as desired with redux, unable to type

Question

I have a custom TextInput in a screen and I'm trying to store the text in the redux-store . But I'm not able to type in the TextInput once I have added the dispatch for redux in onChangeText of the custom Text Input.

My Custom TextInput Component:

...
import {connect} from 'react-redux';
import {onChangeText} from '../store/actions/saveThreadActions';

function CustomTextInput(props) {
  // Styled Components
  const CreateInput = styled.TextInput`
    ${typography.heading2}
    padding: 20px 24px 20px 16px;
    background-color: ${colors.background};
  `;
  return (
    <CreateInput
      {...props}
      onChangeText={text => props.onChangeText(text)}
      value={props.createText}
      scrollEnabled={false}
      returnKeyType="done"
      maxFontSizeMultiplier={1.5}
      placeholder="Create"
      selectionColor={colors.foregroundText}
    />
  );
}

const mapDispatchToProps = dispatch => {
  return {
    onChangeText: text => dispatch(onChangeText(text)),
  };
};

const mapStateToProps = state => {
  return {
    createText: state.saveThread.createText,
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(CustomTextInput);

My Screen in which the custom textInput is used:

import {connect} from 'react-redux';
function Screen(props){
   return (
       ...
       <CustomInput />
       <Button title="Create" onPress={() => console.log(props.createText)} />
       ...
   );
}

const mapStateToProps = state => {
  return {
    createText: state.saveThread.createText,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onChangeText: text => dispatch(onChangeText(text)),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Screen);

I'm unable to type at all.

As soon as I start typing the keyboard goes down again because the textinput inherits the value, props.createText from redux . If I remove the value prop then the keyboard doesn't go down but I can't type as it backspaces or removes the input value automatically.

This is my reducer :

const initState = {
  createText: null,
};

const saveThreadReducer = (state = initState, action) => {
  switch (action.type) {
    case 'ON_CHANGE_TEXT':
      return {...state, createText: action.text};
    default:
      return state;
  }
};

export default saveThreadReducer;

This is my action :

export const onChangeText = text => {
  return (dispatch, getState) => {
    dispatch({type: 'ON_CHANGE_TEXT', text: text});
  };
};

Help would be very much appreaciated.

Answer 1

You unmount input on every state change, therefore you lose focus and will unable to type.

const CreateInput = styled.input`
  ${props => props.typography.heading2}
  padding: 20px 24px 20px 16px;
  background-color: ${props => props.colors.background};
`;

function CustomTextInput(props) {
  return (
    <CreateInput
      {...props}
      onChangeText={(text) => props.onChangeText(text)}
      value={props.createText}
    />
  );
}