DEV Community

Jeon
Jeon

Posted on • Edited on

Auto Resize multiline TextInput in React Native

§ If you are not updating a text value programatically:

function Layout() {
  const [height, setHeight] = useState(40);

  return (
    <TextInput multiline
      style={{ height }}
      onContentSizeChange={(event) => 
        setHeight(event.nativEvent.contentSize.height)
      }
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

§ If you are updating a text value programatically by using setState:

 function Layout() {
+  const [text, setText] = useState<string>("");
+  const [rerenderKey, setRerenderKey] = useState(new Date().getTime());
   const [height, setHeight] = useState(40);

+  useEffect(() => {
+    setText("blahblah");
+    setRerenderKey(new Date().getTime());
+  }, []);

   return (
     <TextInput multiline
+      key={rerenderKey}
       style={{ height }}
+      value={text}
+      onChangeText={setText}
       onContentSizeChange={(event) => 
         setHeight(event.nativEvent.contentSize.height)
       }
     />
   );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)