React Native is dimming companion component

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',
    }