I stumbled upon this issue that whenever I type anything on the TextInput, there is no text being type, meaning its blank.

I am using typescript btw. Here's my FormInput code:

import React from 'react';
import {View, TextInput, StyleSheet} from 'react-native';
import {COLORS, FONTS} from '../../constants';

interface Props {
  placeholderText: string;
  labelValue: any;
}

const FormInput: React.FC<Props> = ({
  placeholderText,
  labelValue,
  ...restProps
}) => {
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder={placeholderText}
        autoCorrect={false}
        value={labelValue}
        {...restProps}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginVertical: 35,
  },
  input: {
    paddingVertical: 25,
    paddingHorizontal: 20,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: COLORS.transparent,
    backgroundColor: COLORS.lightGray,
    ...FONTS.body3,
    color: COLORS.darkgray,
  },
});

export default FormInput;

And I added it on my LoginScreen like this:

interface Props {
  placeholder: string;
  keyBoardType: string;
  secureTextEntry: string;
  buttonTitle: string;
}

interface State {
  email: string;
  password: string;
}

export default class LoginScreen extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      email: '',
      password: '',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <SafeAreaView>
          <View style={styles.logoContainer}>
            <Image style={styles.logo} source={images.logo} />
          </View>
          <Text style={styles.loginText}>Login</Text>
          <View style={styles.textInputContainer}>
            <FormInput
              placeholderText="Your email..."
              keyBoardType="email-address"
              autoCapitalize="none"
              autoCorrect="none"
              labelValue={this.state.email}
              onChangeText={(userEmail: any) =>
                this.setState({email: userEmail})
              }
            />
            <FormInput
              placeholderText="Your password..."
              secureTextEntry={true}
              labelValue={this.state.password}
              onChangeText={(userPassword: any) =>
                this.setState({password: userPassword})
              }
            />
            <FormButton
              buttonTitle="Login"
              onPress={() => Alert.alert('hello')}
            />
          </View>
        </SafeAreaView>
      </View>
    );
  }
}

When I started typing. It looks like this:

Any idea what's causing this?

CodePudding user response：

From React Native documentation: Note that some props are only available with multiline={true/false}. Additionally, border styles that apply to only one side of the element (e.g., borderBottomColor, borderLeftWidth, etc.) will not be applied if multiline=true. To achieve the same effect, you can wrap your TextInput in a View:

So just add multiline prop to your FormInput

const FormInput = ({ placeholderText, labelValue, ...restProps }) => {
 return (
<View style={styles.container}>
  <TextInput
    style={styles.input}
    placeholder={placeholderText}
    autoCorrect={false}
    multiline // -- this one!
    value={labelValue}
    {...restProps}
  />
</View>)}