How to make button sticky to the bottom inside ScrollView in react native?

Question

As per the solution given on other answers, to place the sticky content outside the scrollview. But when I am placing sticky button outide the scrollview and when the soft keyboard popsup, the sticky button pops-up to the top of content as it is not inside scrollView. Ideally button should stick to the bottom even after keyboard pops-up ie it should be behind the keyboard. Please check video in the attached URL.

https://filebin.net/e7ek1zkt9840f9lw

Related snack is:

https://snack.expo.io/qtTC4tvTE

Answer 1

You can use stickyHeaderIndices props to ScrollView. consider your structure is as follows:

     <ScrollView> 
       <View><Text>This is header</Text></View>
       <View><Text>This is body</Text></View>
       <View><Text>This is footer</Text></View>
     </ScrollView>

and if you want to make your footer part sticky then simply put stickyHeaderIndices={[2]} inside scrollview.

      <ScrollView stickyHeaderIndices={[2]}> 
       <View><Text>This is header</Text></View>
       <View><Text>This is body</Text></View>
       <View><Text>This is footer</Text></View>
     </ScrollView>