Snapping to an interval in react-native with expo

I'm trying to create a scrollView that snaps to points in intervals of 50.

Looking at the ScrollView docs, I should be able to set the snapToInterval prop within my ScrollView element like so, snapToInterval={50}. This works perfectly on iOS but on Android the intervals appear to be slightly larger than what I am setting them to. You can see this as the further down the scrollView you scroll, the "ticks" get further away from their center.

Here is some code to illustrate the issue (snackable):

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

const TickHeight = 50;

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {}
  }

  buildTicks = () => {
    const arr = [];
    for (let i=0; i < 60; i++) {
      arr.push(
        <View style={styles.tick}>
          <Text style={{fontSize: 20}}>{i}</Text>
        </View>
      )
    }
    return arr;
  }

  render() {

    return (
      <View style={styles.container}>
      <View style={styles.header}></View>
      <View style={{flex: 1, justifyContent: "center"}}>
        <View style={{position: "absolute", height: 300, width: "100%"}}>
          <View style={{height: TickHeight, width: "100%", backgroundColor: 'red'}}></View>
        </View>
        <ScrollView 
          style={[styles.redBorder, styles.scroller]} 
          contentContainerStyle={{flexGrow: 1, paddingBottom: TickHeight * 5}}
          snapToInterval={TickHeight}
          scrollEventThrottle={1}
        >
          {this.buildTicks()}
        </ScrollView>
      </View>

        <View style={styles.footer}>
          <Text style={{color: "white"}}>Nav Bar</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: "stretch",
    backgroundColor: '#FAFAFA',
  },
  header: { height: 50, backgroundColor: 'black'},
  scroller: {flex: 1, maxHeight: 300},
  tick: {
    height: TickHeight,
    justifyContent: "center",
    alignItems: "center"
  },
  redBorder: {
    borderColor: 'red',
    borderWidth: 1
  },
  footer: {height: 50, backgroundColor: "black", alignItems: "center", justifyContent: "center"}
}); 

Am I doing something wrong? Is there something else I need to be doing to get this working on Android?