wrathchaos/react-native-text-area

Simple and easy to use TextArea for React Native.

Installation

Add the dependency:

React Native

npm i @freakycoder/react-native-text-area

Peer Dependencies

IMPORTANT! You need install them

Zero Dependency

Basic Usage

import RNTextArea from "@freakycoder/react-native-text-area";

<RNTextArea
  maxCharLimit={50}
  placeholderTextColor="black"
  exceedCharCountColor="#990606"
  placeholder={"Write your review..."}
  onChangeText={(text: string) => console.log("Text: ", text)}
/>;

Example Project 😍

You can checkout the example project 🥰

Simply run

• npm i
• react-native run-ios/android

should work of the example project.

Configuration - Props

Property	Type	Default	Description
style	style	default	set your own style
charCount	number	0	set the current character count
maxCharLimit	number	200	set the maximum character count limit
charCountColor	color	"#ccc"	change character count's color
exceedCharCountColor	color	"red"	change the exceeded character count color
defaultCharCount	number	0	set the default char count other than 0
inputRef	ref	default	set the input reference

Author

FreakyCoder, [email protected]

License

React Native Text Area Library is available under the MIT license. See the LICENSE file for more info.

react-native-text-area's Issues

Failed to compile

Got this error when trying to use the component node_modules/@freakycoder/react-native-text-area/build/dist/RNTextArea.js 20:16

Module parse failed: Unexpected token (20:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         if (!maxCharLimit)
|             return null;
>         return (<react_native_1.Text style={[
|             RNTextArea_style_1._charCountStyle(charCount > maxCharLimit ? exceedCharCountColor : charCountColor),
|             maxCharTextStyle, ```

Add input ref for text area

Add inputRef as property to text area component