title: React Native Button in ScrollView positioning
body: <p>I have another problem with a button. I have to position it inside a <code>ListView</code> under the last item.</p>
  
  <p>Here are the classes I used:</p>
  
  <p>Notes.js:</p>
  
  <pre><code>    import React, { Component } from 'react';
  import {
      View,
      Text,
      StyleSheet,
      TouchableOpacity,
  } from 'react-native';
  
  
  export default class Note extends Component {
      render() {
          return (
              &lt;View key={this.props.keyval} style={styles.note}&gt;
                  &lt;Text style={styles.noteText}&gt;{this.props.val.date}&lt;/Text&gt;
                  &lt;Text style={styles.noteText}&gt;{this.props.val.note}&lt;/Text&gt;
  
                  &lt;TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}&gt;
                      &lt;Text style={styles.noteDeleteText}&gt;Del&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          );
      }
  }
  
  
      const styles = StyleSheet.create({
      note: {
          position: 'relative',
          padding: 20,
          paddingRight: 100,
          borderBottomWidth:2,
          borderBottomColor: '#ededed'
      },
      noteText: {
          paddingLeft: 20,
          borderLeftWidth: 10,
          borderLeftColor: '#0000FF'
      },
      noteDelete: {
          position: 'absolute',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#2980b9',
          padding: 10,
          top: 10,
          bottom: 10,
          right: 10
      },
      noteDeleteText: {
          color: 'white'
      }
  });
  
  This is the component that I use every time when I want to create a note.
  </code></pre>
  
  <p><code>Main.js</code>:</p>
  
  <pre><code>    import React, { Component } from 'react';
  import {
      View,
      Text,
      StyleSheet,
      TextInput,
      ScrollView,
      TouchableOpacity,
      AsyncStorage,
  } from 'react-native';
  
  import Note from './Note';
  
  export default class Main extends Component {
  
      constructor(props){
          super(props);
          this.state = {
              noteArray: [],
              noteText: '',
          };
          this.getSavedNotes(this.state.noteArray);
      }
      render() {
          let notes = this.state.noteArray.map((val, key)=&gt;{
              return &lt;Note key={key} keyval={key} val={val}
                      deleteMethod={()=&gt;this.deleteNote(key)}/&gt;
          });
          return (
              &lt;View style={styles.container}&gt;
                  &lt;View style={styles.header}&gt;
                      &lt;Text style={styles.headerText}&gt;- NOTER -&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;ScrollView style={styles.scrollContainer}&gt;
                  {notes}
                  &lt;TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}&gt;
                      &lt;Text style={styles.addButtonText}&gt;+&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/ScrollView&gt;
  
                  &lt;View style={styles.footer}&gt;
                      &lt;TextInput 
                          style={styles.textInput}
                          placeholder='Write your note here'
                          onChangeText={(noteText)=&gt; this.setState({noteText})}
                          value={this.state.noteText}
                          placeholderTextColor='white'
                          underlineColorAndroid='transparent'&gt;
                      &lt;/TextInput&gt;
                  &lt;/View&gt;
  
              &lt;/View&gt;
          );
      }
  
      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:''});
              AsyncStorage.setItem('arr', JSON.stringify(this.state.noteArray));
              alert(this.state.noteArray);
          }
      }
  
      deleteNote(key){
          this.state.noteArray.splice(key, 1);
          this.setState({noteArray: this.state.noteArray});
      }
  
      getSavedNotes = async (noteArray) =&gt;{
        try{
          let data = await AsyncStorage.getItem('arr');
          if(JSON.parse(data))
          {
            this.state.noteArray = JSON.parse(data);v
          }
        }catch(error){
          alert(error);
        }
      }
  }
  
  
      const styles = StyleSheet.create({
      container: {
          flex: 1,
      },
      header: {
          backgroundColor: '#1A237E',
          alignItems: 'center',
          justifyContent:'center',
          borderBottomWidth: 10,
          borderBottomColor: '#ddd'
      },
      headerText: {
          color: 'white',
          fontSize: 18,
          padding: 26
      },
      scrollContainer: {
          flex: 1,
          marginBottom: 100
      },
      footer: {
          position: 'absolute',
          bottom: 0,
          backgroundColor: '#000000',
          left: 0,
          right: 70,
          zIndex: 10
      },
      textInput: {
          alignSelf: 'stretch',
          color: '#fff',
          padding: 20,
          backgroundColor: '#252525',
          borderTopWidth:2,
          borderTopColor: '#ededed'
      },
      addButton: {
          position: 'absolute',
          zIndex: 11,
          right: 0,
          bottom: 0,
          backgroundColor: '#1A237E',
          width: 70,
          height: 68,
          // borderRadius: 35,
          alignItems: 'center',
          justifyContent: 'center',
          elevation: 8
      },
      addButtonText: {
          color: '#fff',
          fontSize: 24
      }
  });
  </code></pre>
  
  <p>Here is where I save the notes and display them inside the <code>ListView</code>. After the insertion, the button should appear under the new added note.</p>
  
  <p>Finally the <code>App.js</code>:</p>
  
  <pre><code>    import React, { Component } from 'react';
      import Main from './app/components/Main.js';
  
  
      export default class App extends Component {
        render() {
          return (
            &lt;Main/&gt;
          );
        }
      }
  </code></pre>
  
  <p>Here I just display the <code>Main.js</code> component.</p>