React Native ScrollView: Different Colors for top and bottom

Question

I want to use a scrollView that when i scroll over the top it has the background color of the top element (green) and when it bounces on the bottom it has the color of the bottom element (white). I am not sure how I can do that.

<ScrollView style={{backgroundColor: MColor.WHITE, marginTop: 64, height: Display.height - 64 - 72}}>
  <View style={{backgroundColor: 'green', height: 200}} />
  <View style={{backgroundColor: 'white', height: 800}} />
</ScrollView>

Any help is appreciated, probably one can set fake views in at the bottom and at the top but i am not sure how to do that exactly.

Answer 1

Here's one way to do it:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Dimensions,
} from 'react-native';

class MyView extends Component {
  render() {
    const fullHeight = Dimensions.get('window').height;

    return (
      <View style={styles.container}>
        <ScrollView style={{backgroundColor: 'white', flex: 1}}>
          <View style={{backgroundColor: 'green', height: fullHeight, position: 'absolute', top: -fullHeight, left: 0, right: 0}} />
          <View style={{backgroundColor: 'green', height: 200}} />
          <View style={{backgroundColor: 'white', height: 800}} />
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Try it live: https://rnplay.org/apps/5BJASw