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

UIW for React Native

import React, { useState } from 'react';
import { StyleSheet, View, Text, TextInput } from 'react-native';
function TextArea(props) {
  const {
    textAlignVertical = 'top',
    placeholder = '',
    placeholderTextColor = '#989FB2',
    numberOfLines = 30,
    onChange,
    maxLength = 50,
    value = '',
    editable = true,
    showWords = false,
    autoSize = false,
    style,
    fontStyle,
    ...other
  } = props;
  const [defaultText, setDefaultText] = useState('');
  const [height = 0, setHeight] = useState(0);
  const onChangeValue = event => {
    if (autoSize) {
      setDefaultText(event.nativeEvent.text);
    }
  };
  const onContentSizeChange = event => {
    if (autoSize) {
      setHeight(event.nativeEvent.contentSize.height);
    }
  };
  return <View style={StyleSheet.flatten([styles.viewBody, style])}>
      <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 === true && <Text style={[styles.textWords, fontStyle]}>{value.length + '/' + maxLength}</Text>}
      </View>
    </View>;
}
const styles = StyleSheet.create({
  viewBody: {
    // height: 100,
    marginHorizontal: 10,
    borderColor: 'gray',
    borderWidth: 0.2,
    borderRadius: 2,
    color: 'black',
    backgroundColor: '#fff'
  },
  bodyLayout: {
    // height: '100%',
    // flexDirection: 'column',
    justifyContent: 'space-between',
    padding: 10
  },
  TextInput: {
    height: '100%'
  },
  textWords: {
    padding: 0,
    color: 'gray',
    textAlign: 'right'
  }
});
export default TextArea;