React native android scrollview - Content Inset / Content Offset not applied

Question

SNACK - https://snack.expo.io/@dellybro/32f625

As the title suggests, when working with react native scroll view the content inset and content offset do not seem to be applied. Android and iOS both seem to have a different affect.

The following is my code

CIRCLE_WIDTH = 100 INSET = dimensions of screen / 2 - circle_width / 2

<Animated.ScrollView
            ref={(el) => (this.timeScrollView = el)}
            contentContainerStyle={styles.scroll}
            horizontal={true}
            directionalLockEnabled={true}
            bounces={false}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            decelerationRate={0}
            contentInset={{
              left: INSET,
              right: INSET,
            }}
            contentOffset={{x: -INSET}}
            snapToInterval={CIRCLE_WIDTH} //your element width
            snapToAlignment={'center'}
            scrollEventThrottle={16}
            onMomentumScrollEnd={this.handleMomentumScrollEnd.bind(this)}
            onScroll={Animated.event(
              [{nativeEvent: {contentOffset: {x: xOffset}}}],
              {useNativeDriver: true},
            )}>
            {Array.from(new Array(12)).map((circle, index) => {
              const itemOffset = index * CIRCLE_WIDTH;
              return (
                <Animated.View
                  key={`${index}`}
                  style={[
                    styles.circle,
                    {
                      opacity: xOffset.interpolate({
                        inputRange: [
                          itemOffset - INSET * 2,
                          itemOffset - INSET,
                          itemOffset,
                        ],
                        outputRange: [0.25, 1, 0.25],
                      }),
                      transform: [
                        {
                          scale: xOffset.interpolate({
                            inputRange: [
                              itemOffset - INSET * 2,
                              itemOffset - INSET,
                              itemOffset,
                            ],
                            outputRange: [0.5, 1, 0.5],
                          }),
                        },
                        {
                          translateY: xOffset.interpolate({
                            inputRange: [
                              itemOffset - INSET * 2,
                              itemOffset - INSET,
                              itemOffset,
                            ],
                            outputRange: [100, 0, 100],
                          }),
                        },
                      ],
                    },
                  ]}>
                  <Text>
                    {index + 1} {index + 1 === 1 ? 'hour' : 'hours'}
                  </Text>
                </Animated.View>
              );
            })}
          </Animated.ScrollView>

Android GIF

iOS Gif

The gifs provided show that the contentOffset for iOS is different on start then Android. Also on Android the "center" doesn't seem to be the same either.