I am learning React Native while trying to build a simple Android app.
I have two components (TextInput and Button) aligned side by side. The TextInput component is wrapped in and the Button component is wrapped in a regular outside of . Yet somehow whenever I click on TextInput, both the Button and the TextInput get dimmed.
How can I make it work so that only TextInput Component gets dimmed but not the button?
Thank you
export default class TodoItem extends React.Component{
constructor(props)
{
super(props);
}
render(){
const todoItem = this.props.todoItem;
return[
<TouchableOpacity
style={styles.todoItem}
onPress = {() => this.props.toggleDone()} >
<Text
style={(todoItem.done) ? {color: '#AAAAAA'}:{color: '#313131'}}>
{todoItem.title}
</Text>
</TouchableOpacity>,
<View
style={styles.emailButton}
>
<Button
style = {styles.removeButton}
title="Remove"
color = {(todoItem.done) ? 'rgba(200,0,0,0.5)' : 'rgba(255,0,0,1)'}
onPress = {() => this.props.removeTodo()}
/>
</View>,
];
}
}
const styles = StyleSheet.create({
todoItem: {
width: '70%',
height: 40,
borderBottomColor: '#000000',
borderBottomWidth: 1,
flexDirection: 'row',
flex : 1,
alignItems: 'center',
justifyContent: 'flex-start',
paddingLeft: 15
},
removeButton:
{
width : '30%',
flex: 1,
justifyContent : 'flex-end',
}