react-native-indicatortextinput v1.0.0

react-native-TextInputWithIndicator

A customized TextInput component with input length indicator. Work in both iOS and Android platform.

Description

This component aims at providing a way to show the limit text length and the text length that has already been inputted at the right corner of an TextInput area.

You can almost regard the component as a extension of reac-native TextInput component.

Effects

Props

Demo

// Omit part of the code
// ...
import {TextInputWithIndicator,indicateMode} from './TextInputWithIndicator';

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>
                    Welcome to use
                </Text>
                <View style={{width:width,height:1,backgroundColor:'black'}}/>
                    <TextInputWithIndicator areaHeight={100} maxLength={60} areaWidth={Dimensions.get('window').width}  placeholder={'please input'}
                                            indicateMode={indicateMode.alreadyInputMode} multiline={true}
                                            onChangeText={(t)=>{console.log(t)}} autoFocus={true}
                    />
                <View style={{width:width,height:1,backgroundColor:'black'}}/>
            </View>
        );
    }
}