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

| Props | Type | Description | | --- | :-- | :-- | | areaWidth | number | width of component | | areaHeight | number | height of component | | maxLength | number | tell component the limit length of your input | | indicateMode | number |indicateMode.leftMode: indicator will display the left length to input.(see the effects image2) | |||indicateMode.alreadyInputMode: example: indicator will display 1/60  |

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>
        );
    }
}