React Native how set dynamic color on TextInput

October 29, 2020

For Each Character

import React, {useState} from 'react';
import { SafeAreaView, TextInput,Text, View} from 'react-native';
import randomColor from "randomcolor";
const Randomcolor=randomColor({
  count: 50,
  luminosity: 'dark',
  hue: 'random'
});
const GanrateRondomColor = () => {
  const [textvalue, onChangeTextState] =useState(null)
  const CallChnage=(text)=>{
        onChangeTextState(text)
  }
  return  <SafeAreaView
             style={{
                 flex:1
             }} 
         >
      <View> 
      <TextInput
              style={{margin:10,borderBottomWidth : 1.0,padding:10}}
              onChangeText={text =>CallChnage(text)}
              autoCorrect={false}
              placeholder="text"
             >
              {textvalue&&
                textvalue.split("").map((data,index)=>{
                 return <Text key={index} style={{ color: Randomcolor[index]}}>{textvalue[index]}</Text>
                }) 
              } 
             </TextInput>

       
      </View>
        </SafeAreaView>
}

export default GanrateRondomColor;

Written by Manoj Bhardwaj who lives and works in Dharamshala Himachal Pradesh (India). My stackoverflow