Add content in bounce margin of ScrollView in React Native?

Question

In my app I'm using <ScrollView /> to view pages of a book scrolling horizontally. When a user gets to the end of the <ScrollView /> there is a bounce that shows a white area to the right that is only visible if the user drags the last page to the left. I want to add some text there that says "The End" vertically. How can I add content to the right of the <ScrollView /> in the bounce area?

Answer 1

I ALMOST figured it out. This is close but shows up in the right side of the last page but not off the page on the right in the bounce area. I want it to show up "to the right of the page" not "on the right side of the page." Any other ideas?

Create a <View style={styles.end} /> with this style:

theEnd: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 100,
    height: 768, // Device height
    alignItems: 'center',
}

Place it right before the <ScrollView /> and put whatever you want to show inside of the View component with the "theEnd" style.

Answer 2

This probably doesn't apply to your content, but I had the same situation except with a large image for the ScrollView content. I wanted both horizontal and vertical scrolling, where the edge of the image would show up only in the bounce margin. I figured out that the scale transformation works great for this:

<ScrollView horizontal={true}>
  <Image
    source={require('./img/map.jpg')}
    style={{transform: [{scale: 1.1}]}}
  />
</ScrollView>

So the image takes up 110% of the height and width of its box (which is then inside a yet smaller ScrollView).

EDIT: FYI, after testing, discovered this only works on iOS, not Android. (Android won't allow vertical scrolling if you set horizontal to true, and also I think it didn't render the parts outside of the normal viewing area, so the bounce margin was empty.)

Answer 3

there is a prop for this called contentContainerStyle

<ScrollView 
  horizontal={true} 
  contentContainerStyle={{
    paddingLeft: 25,
    paddingRight: 25,
  }}>
 *** CONTENT ***
</ScrollView>