0
186
ViewsHow to change the border color of textinputs when typing in React Native
I have a TextInput in react native like this:
<SafeAreaView style={ChatWindowStyles.bottomAreaViewStyles}>
<TextInput
className="userMessageInput"
style={ChatWindowStyles.messageTextInputStyles}
placeholder="Enter a message"
onChangeText={(text) => userMessage = (text)}
/>
</SafeAreaView>
I want the border color to be blue when I am typing something in the TextInput. How can I do that?
·
Juan Pablo Isaza
1 answers
Answer question0
import React, { useState } from 'react'
import { SafeAreaView, View, TextInput, Text } from 'react-native'
export default function Example() {
const [value, setValue] = useState('')
const [isTextInputFocused, setTextInputFocused] = useState(false)
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, justifyContent: 'center', }}>
<TextInput
value={value}
onChangeText={value => setValue(value)}
style={{ height: 60, width: '90%', marginLeft: '5%', borderColor: isTextInputFocused == true ? 'blue' : 'black', borderWidth: 1, borderRadius: 10, paddingLeft: 10 }}
placeholder='Enter text'
onFocus={() => setTextInputFocused(true)}
onSubmitEditing={() => setTextInputFocused(false)}
onEndEditing={() => setTextInputFocused(false)}
/>
</View>
</SafeAreaView>
)
}
·
Juan Pablo Isaza
Report
Answer question