React native Question posted in
The official React Native documentation can be found here.

How can i force TextInput to grow while multiline={false} on react native?


    <TextInput
    ref={inputRef}
    value={text}
 style={styles.textInput}
 returnKeyType="next"
 placeholder={'placeholder'}
 scrollEnabled={false}
 blurOnSubmit={false}
 onFocus={onFocusInput}
 textAlignVertical="center"
 onContentSizeChange={onChangeContentSizeChange}
 onChangeText={onInputChangeValue}
 onBlur={onInputBlur}
 onKeyPress={onInputKeyPress}
 onSubmitEditing={() =>NextScript(id)} 
 multiline={false}
 numberOfLines={5}
 />

The logic is i want onSubmitEditing to take me to next textinputfield and i need the text to wrap one much text is entered. If i enable multiline once enterkey is pressed it goes to next line before going to the next input and that’s what i am trying to avoud

Is it possible to replace enter key totally with onSubmitEditing? anytime i hit enter it attempts to enter newlinw before moving to next TextInput, so it creates a bad UI where the text is moving up slightly before repositioning then going to next line

If i set bluronSubmit to true, it stops but keyboard closes on submit.
If i set multiline to false it stops but doesnt wrap text.

Tags:

2

Answers


  1. 0

    I have created an example, onKeyPresswill allow you to focus the next textfield when enter key were hit.

    import { Text, SafeAreaView, StyleSheet, TextInput } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        multiline={true}
        placeholder={'PLACEHOLDER'}
        onKeyPress={(e) => {
          if (e.nativeEvent.key == 'Enter') {
            console.log('ENTER');
            //focusNextTextField();
          }
        }}
        style={{ borderColor: '#000000', borderWidth: 1 }}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignContent: 'center',
    padding: 8,
  },
});
    Login or Signup to reply.
  2. 0

    I’m also facing the same issues. Later, I found the solution.

    Custom Text Input Handling: You’ll need a custom logic to handle the text input and its behavior upon pressing the ‘Enter’ key. Instead of relying on the default behavior of multiline, you’ll control the text wrapping and navigation to the next input field programmatically.

    Replace Enter Key with onSubmitEditing: To override the default behavior of the ‘Enter’ key, you can use the onKeyPress event. Detect when the ‘Enter’ key is pressed and programmatically trigger the onSubmitEditing function.

    Maintain Text Wrapping: Since multiline={false} disables automatic text wrapping, you’ll need to implement a method to manually handle text wrapping based on the input’s content size or character count.

    Here’s a conceptual example of how you might implement this:

    import React, { useState, useRef } from 'react';
import { TextInput, StyleSheet } from 'react-native';

const CustomTextInput = () => {
  const [text, setText] = useState('');
  const nextInputRef = useRef(null);

  const onInputKeyPress = (e) => {
    if (e.nativeEvent.key === 'Enter') {
      // Replace the Enter key functionality
      // Call the function you would have in onSubmitEditing
      handleEnterKeyPress();
    }
  };

  const handleEnterKeyPress = () => {
    // Logic to navigate to next TextInput
    // Focus the next input field
    if (nextInputRef.current) {
      nextInputRef.current.focus();
    }

    // Additional logic if needed to handle text wrapping
  };

  return (
    <TextInput
      value={text}
      style={styles.textInput}
      onChangeText={setText}
      onKeyPress={onInputKeyPress}
      blurOnSubmit={false} // prevent keyboard from closing
      // other props
    />
  );
};

const styles = StyleSheet.create({
  textInput: {
    // styling for your text input
  },
});

export default CustomTextInput;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search