@uiw/react-native/lib/TextArea/index.js

UIW for React Native

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, TextInput, PanResponder } from 'react-native';
function TextArea(props) {
  const {
    draggable = false,
    textAlignVertical = 'top',
    placeholder = '',
    placeholderTextColor = '#989FB2',
    numberOfLines = 30,
    onChange,
    maxLength = 50,
    value = '',
    editable = true,
    showWords = false,
    autoSize = false,
    style,
    fontStyle,
    height: defaultHeight = 0,
    ...other
  } = props;
  const [defaultText, setDefaultText] = useState('');
  const [height, setHeight] = useState(defaultHeight);
  const [panResponder, setPanResponder] = useState();

  // Create PanResponder for resizing text box
  useEffect(() => {
    if (draggable) {
      const panResponder = PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onPanResponderMove: (_, gestureState) => {
          const {
            dy
          } = gestureState;
          setHeight(Math.max(height + dy, 35));
        }
      });
      setPanResponder(panResponder);
    } else {
      setPanResponder(undefined);
    }
  }, [draggable]);
  const onChangeValue = event => {
    if (autoSize) {
      setDefaultText(event.nativeEvent.text);
    }
  };
  const onContentSizeChange = event => {
    if (autoSize) {
      setHeight(event.nativeEvent.contentSize.height + 20);
    }
  };
  return <View style={[styles.viewBody, style]} {...panResponder?.panHandlers}>
      <View style={styles.bodyLayout}>
        <TextInput style={[styles.TextInput, fontStyle, {
        height: Math.max(35, height)
      }]} multiline={true} textAlignVertical={textAlignVertical} placeholder={placeholder} placeholderTextColor={placeholderTextColor} numberOfLines={numberOfLines} maxLength={maxLength} onChangeText={value => {
        onChange?.(value);
      }} onChange={onChangeValue} onContentSizeChange={onContentSizeChange} editable={editable} value={value} {...other} />
        {showWords && <Text style={[styles.textWords, fontStyle]}>{value.length + '/' + maxLength}</Text>}
      </View>
    </View>;
}
const styles = StyleSheet.create({
  viewBody: {
    marginHorizontal: 10,
    borderColor: 'gray',
    borderWidth: 0.2,
    borderRadius: 2,
    color: 'black',
    backgroundColor: '#fff'
  },
  bodyLayout: {
    padding: 10
  },
  TextInput: {
    backgroundColor: 'transparent',
    borderWidth: 0,
    fontSize: 16
  },
  textWords: {
    padding: 0,
    color: 'gray',
    textAlign: 'right'
  }
});
export default TextArea;