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;