Count TextInput Inside Text Length example in react native

• Create Components folder under src folder
• Add CountTextInputInsideLength.js file and add below Code

import React, { Component } from "react";

import { StyleSheet, View, TextInput, Text } from "react-native";

export default class CountTextInputInsideLength extends Component {

  constructor() {

    super();

    this.state = {

      TextValue: ""

    };

  }

  GetValueFunction = ValueHolder => {

    var Value = ValueHolder.length.toString();

    this.setState({ TextValue: Value });

  };

  render() {

    return (

      <View style={styles.MainContainer}>

        <Text>Count TextInput Inside Text Length Automatically</Text>

        <Text style={styles.TextStyle}> {this.state.TextValue} </Text>

        <TextInput

          placeholder="Enter Text here"

          onChangeText={ValueHolder => this.GetValueFunction(ValueHolder)}

          style={styles.TextInputStyle}

        />

      </View>

    );

  }

}

const styles = StyleSheet.create({

  MainContainer: {

    justifyContent: "center",

    alignItems: "center",

    flex: 1,

    margin: 10

  },

  TextInputStyle: {

    textAlign: "center",

    height: 50,

    width: "90%"

  },

  TextStyle: {

    textAlign: "center",

    fontSize: 25

  }

});

• Open App.js file and update code as below

import React from 'react';

import {  Text,View,StyleSheet } from 'react-native';

import CountTextInputInsideLength from './src/Component/CountTextInputInsideLength'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <CountTextInputInsideLength/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: