React Native Input is off screen

Question

I'm attempting to implement an Input field at the bottom of my project's screen, however something in my code is prohibiting this from happening.

my code is as follows:

<View style={{ flexDirection: 'column', marginTop:-30,}}>
    //This is where my 'header' is
    <ScrollView 
      ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight)=>{        
        this.scrollView.scrollToEnd({animated: true});
    }}
    style={{ marginBottom: 150}}>
//Objects in my ScrollView will be here
    </ScrollView>
<View style={{flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-end'}}>
      <Input
      containerStyle={{
                      backgroundColor: 'rgba(0, 162, 255, 1)'
                    }}
  placeholder='Enter Text Here'
  leftIcon={
    <Icon
      name='add'
      type='material'
      size={24}
      color='white'
    />
  }

/>
</View>
</View>

so a little explanation: my ScrollView has a marginBottom of 150 because for some reason without that my screen will not show the entire ScrollView; some parts of it are cut off the screen and if I scroll all the way down some objects are cut off.

Answer 1

try setting the absolute position of Input like this:

<View style={{ flexDirection: 'column', marginTop:-30,}}>
    //This is where my 'header' is
    <ScrollView 
      ref={ref => this.scrollView = ref}
      onContentSizeChange={(contentWidth, contentHeight)=>{        
        this.scrollView.scrollToEnd({animated: true});
      }}
      style={{ marginBottom: 150}}>
      //Objects in my ScrollView will be here
    </ScrollView>
    <View style={{ position: 'absolute', bottom: 30 }}>
      <Input
        containerStyle={{
          backgroundColor: 'rgba(0, 162, 255, 1)'
        }}
        placeholder='Enter Text Here'
        leftIcon={
          <Icon
            name='add'
            type='material'
            size={24}
            color='white'
          />
          }
      />
    </View>
</View>