Odtnhj

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!

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.