How to add button to the right of an input field in react native

Question

I am trying to add a button that should be located to the right of the input field. I have it there now but using absolute parameters, instead I would like to just have a square or round button at the right side of the input field.

The relevant code is:

    render() {
    let notes = this.state.noteArray.map((val, key)=>{
        return <Note key={key} keyval={key} val={val}
                deleteMethod={()=>this.deleteNote(key)}/>
    });
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.headerText}>30-60-90 Activity Planner</Text>
                <TextInput 
                    style={styles.textInput}
                    onChangeText={(noteText)=> this.setState({noteText})}
                    value={this.state.noteText}
                    placeholderTextColor='white'
                    underlineColorAndroid='transparent'>
                </TextInput>
                <TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
                    <Text style={styles.addButtonText}>Add</Text>
                </TouchableOpacity>
            </View>
            <ScrollView style={styles.scrollContainer}>
                {notes}
            </ScrollView>
        </View>
    );
}
addNote(){
    if(this.state.noteText){
        var d = new Date();
        this.state.noteArray.push({
            'date':d.getFullYear()+
            "/"+(d.getMonth()+1) +
            "/"+ d.getDate(),
            'note': this.state.noteText
        });
        this.setState({ noteArray: this.state.noteArray });
        this.setState({noteText:''});
    }
}

Thanks for your help!

Answer 1

It is hard to help you well since we don't have access to your CSS. However, wrapphing your text input and your button inside a view with flex properties should do the trick :

<View style={{flexDirection:'row'}}>
    <TextInput 
        style={styles.textInput}
        onChangeText={(noteText)=> this.setState({noteText})}
        value={this.state.noteText}
        placeholderTextColor='white'
        underlineColorAndroid='transparent'>
    </TextInput>
    <TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
        <Text style={styles.addButtonText}>Add</Text>
    </TouchableOpacity>
</View>

Using flex-direction to row place the TouchableOpacity component in the next position (from left to right) in the same line.