How to detect in TextInput height has reached 50%

Is it possible to detect if your Textinput component's height has change and then trigger something. e.g:

useEffect(() => {
  //if the line heigh has reached 50%
  console.log('Input has reach 50%')
}, []);

<TextInput styles={{maxHeight: '50%'}} multiline={true} />

I don't know where to begin... please help

Solution 1:

You can use the useLayout hook from @react-native-community/hooks. This allows you to dynamically keep track of the height,width,etc.. of a component.

1. First install it npm install @react-native-community/hooks

2. Then just do something like this below.

import { useLayout } from '@react-native-community/hooks'


export default function App() {
    // Use the hook
    const { onLayout, ...layout } = useLayout()

    
    // Check for when the height changes
    useEffect(()=>{
         console.log(layout.height);
    },[layout.height])


    // Lastly place it in the component you wish to track
    return (
        <> 
          <TextInput 
           onLayout={onLayout} 
           styles={{maxHeight: '50%'}} 
           multiline={true} />
        </>
    )

}