Ndtyjky

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.