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

Why is the text going multiple lines when I unselect it? – React native

I’m using React Native and React Native Paper and I am fiddling around with the TextInput component. I type some random text inside so it overflows

enter image description here

No problem, but when I deselect it, it goes on multiple lines.

enter image description here

How can I make it so it stays on one line even if I deselect it?

Code:

<TextInput
  label="text"
  mode="outlined"
  style={{
    width: vw(50),
  }}
/>

Package.json:

 {
  "name": "code",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@apollo/client": "3.4.16",
    "@react-navigation/drawer": "^6.5.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.2",
    "expo": "~46.0.16",
    "expo-cli": "^6.0.6",
    "expo-status-bar": "~1.4.0",
    "firebase": "9.12.1",
    "graphql": "15.7.2",
    "react": "18.0.0",
    "react-native": "0.69.6",
    "react-native-css-vh-vw": "^1.0.5",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-paper": "5.0.0-rc.10",
    "react-native-reanimated": "~2.9.1",
    "react-native-reanimated-carousel": "^3.1.0",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "true": "^0.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}
Tags:

3

Answers


  1. 0

    Try this:

    <TextInput
  label="text"
  mode="outlined"
  multiline={false}
  numberOfLines={1}
  style={{
    width: vw(50),
  }}
/>
    Login or Signup to reply.
  2. 0

    You have the property multiline, if you set it to false it won’t go in two lines. Search for multine here -> https://callstack.github.io/react-native-paper/text-input.html#multiline

    Login or Signup to reply.
  3. 0

    Seems like there’s a bug in the TextInput, but you can fix this by adding a text-align: auto to the component style. i.e:

    <TextInput
  label="text"
  mode="outlined"
  style={{
    width: vw(50),
    textAlign: 'auto'
  }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search