Logo

dev-resources.site

for different kinds of informations.

Auto Resize multiline TextInput in React Native

Published at
1/14/2025
Categories
reactnative
Author
somidad
Categories
1 categories in total
reactnative
open
Author
7 person written this
somidad
open
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 ref = useRef<TextInput>(null);
+  const [text, setText] = useState<string>("");
   const [height, setHeight] = useState(40);

+  useEffefct(() => {
+    ref.current?.setNativeProps({ text });
+  }, [text]);

   return (
     <TextInput multiline
+      ref={ref}
       style={{ height }}
+      onChangeText={setText}
       onContentSizeChange={(event) => 
         setHeight(event.nativEvent.contentSize.height)
       }
     />
   );
}
Enter fullscreen mode Exit fullscreen mode
reactnative Article's
30 articles in total
Favicon
Using Direct Line botframework in a React Native Application to connect to Copilot Studio Agent
Favicon
[Video]Build a Full-Stack Mobile App with React Native Expo and Payload CMS in 2025!
Favicon
Introducing EAS Hosting: Simplified deployment for modern React apps
Favicon
Auto Resize multiline TextInput in React Native
Favicon
Read Text Asset File in Expo
Favicon
Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle
Favicon
Building High-Performance React Native Apps[Tips for Developers]
Favicon
React Native With TypeScript: Everything You Need To Know
Favicon
Building the 'One of a Kind' Ultimate Mobile App Framework. Seeking exceptional engineers to join the journey.
Favicon
Ship mobile apps faster with React-Native-Blossom-UI
Favicon
Encryption in React Native apps enhances data security, protecting user information and ensuring privacy. However, it also presents challenges, such as performance overhead and complex implementation
Favicon
How to Integrate Stack, Bottom Tab, and Drawer Navigator in React Native
Favicon
🌎 Seamless Multi-Language Support in React Native
Favicon
Mastering React Native with TypeScript: From Basics to Brilliance - Part 1
Favicon
Building "Where Am I?": A GeoGuessr Alternative for Mobile
Favicon
React Native is powerful modern technology
Favicon
How to Build a Centered Input Field for Amounts in React Native
Favicon
Compound Component pattern in react
Favicon
Pop Quiz: Is There a Bug in This React Native Component?
Favicon
The Unlikely Fix: How a Simple Folder Change Saved My React Native Journey
Favicon
How to Integrate Stack and Bottom Tab Navigator in React Native
Favicon
How to make a view expand downwards in an inverted FlatList?
Favicon
Building a Custom Star Rating Component in React Native with Sliding and Press Interactions
Favicon
Choosing the Right Compiler for React Native Development in 2025
Favicon
Simple remove transition animation in react native
Favicon
How to Hire Dedicated React Native Developers for Customizable Features
Favicon
React Native’s New Architecture: Sync and async rendering
Favicon
Top Mobile App Development Company in Bangalore | Hyena IT
Favicon
Mastering Import Order in React: A Deep Dive Into Best Practices and Tools
Favicon
Creating Custom Inputs for Regex Validation in React and React Native

Featured ones: