Textbox w/ Max Character Limit

    0

    0

    Estee Tey

    React Native Recipes

    The demo of this component can be found at the expo snack here.

    import * as React from 'react';
    import { Text, TextInput, View, StyleSheet, Image } from 'react-native';
    
    const maxLimit = 10;
    const Textbox = () => {
      const [text, onChangeText] = React.useState('');
      const [color, onChangeColor] = React.useState('black');
      const [backgroundColor, onChangeBgColor] = React.useState('');
      const getRemainingChars = () => maxLimit - text.length;
      React.useEffect(() => {
        if (getRemainingChars() < 10 && getRemainingChars() > 0) {
          onChangeColor('#c4b56d');
          onChangeBgColor('rgba(255, 221, 50, 0.1)');
        } else if (getRemainingChars() <= 0) {
          onChangeColor('red');
          onChangeBgColor('rgba(255,0,0,0.1)');
        } else {
          onChangeColor('black');
          onChangeBgColor('rgba(0,0,0,0)');
        }
      }, [text]);
      const textContainerStyle = StyleSheet.flatten([styles.textContainer, {
              borderColor: color,
              backgroundColor: backgroundColor,
            }]);
      return (
        <View style={styles.container}>
          <TextInput
            multiline={true}
            onChangeText={onChangeText}
            value={text}
            style={textContainerStyle}
            placeholder="type something here"
          />
          <Text style={{ color }}>{getRemainingChars()} characters remaining</Text>
        </View>
      );
    };
    const styles = StyleSheet.create({
      container: {
        alignItems: 'center',
        justifyContent: 'center',
        padding: 24,
        margin: 24,
        marginTop: 0,
        fontSize: 14,
        height: '50%',
      },
      textContainer: {
        padding: 24,
        textAlignVertical: 'top',
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 24,
        height: '100%',
        width: '100%',
      },
    });
    export default Textbox;
    
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Explore
    • Cookbooks
    • Playground
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.