React Native Not Responding to Touch on Android Only

I am trying to update a Flatlist to present as seen in this video: https://www.youtube.com/watch?v=6XxpUhQqpjY

My elements include touchable components such as TextInput and Buttons.

This works perfectly in iOS. However, on Android, the Flatlist scrolls using the FlingGesture, but none of the touchable components responds to touch. When I tap on a TextInput the keyboard is not invoked.

I'm using NativeBase and React Navigation if that's helpful.

<Content>
 <FlingGestureHandler key='up'
  direction={Directions.UP}
  onHandlerStateChange={ev => { if (ev.nativeEvent.state === State.END) {
      //setActiveIndex()
      if (activeIndex === data.length -1) {
        return
      }
      setActiveIndex(activeIndex + 1)
    }
  }}
  >

  <FlingGestureHandler
  key='down'
  direction={Directions.DOWN}
  onHandlerStateChange={ev => {if (ev.nativeEvent.state === State.END) {
      //setActiveIndex()
      if (activeIndex === 0) {
        return
      }
      setActiveIndex(activeIndex - 1)
    }
  }}
  >
  <FlatList
  scrollEnabled={false}
  removeClippedSubviews={false}
  refreshControl={<RefreshControl refreshing={games.loadingGames}
  onRefresh={onRefresh} />}
  contentContainerStyle={{
    flex: 5,
    justifyContent: 'flex-start',
    padding: SPACING * 2
  }}
  style={{minHeight: Dimensions.get('screen').height-240}}
  data={games.sort((a,b) => {
      return (b.status === a.status) ? new Date(a.startDateTime) - new Date(b.startDateTime) : new Date(b.startDateTime) - new Date(a.startDateTime)
    })}
  CellRendererComponent={({item, index, children, style, ...props}) => {
    // console.log(`props`, props)
    const newStyle = [
      style,
      { zIndex: games.length - index }
    ]
    return (
      <View style={newStyle} index={index} {...props}>
        {children}
      </View>
    )
  }}
  keyExtractor={(item) => item.gameId.toString()}
  renderItem={({item, index}) => {
    const inputRange = [index -1, index, index + 1]
    const translateY = scrollXAnimated.interpolate({
      inputRange,
      outputRange: [50, 0, -100]
    })
    const scale = scrollXAnimated.interpolate({
      inputRange,
      outputRange: [.8, 1, 1.3]
    })  
    const opacity = scrollXAnimated.interpolate({
      inputRange,
      outputRange: [1 - 1/VISIBLE_ITEMS, 1, 0]
    })
    const game = item
    return index >= activeIndex && index < activeIndex+2 && (
      <GameItem
        style={{
          minHeight: ITEM_HEIGHT,
          minWidth: ITEM_WIDTH,
          opacity,
          transform: [
            {
              translateY,
            },
            { scale },
          ],
        }}
        onLayout={getItemDimensions}
        game={game}
        selectGame={selectGame}
        onChangeText={onChangeScore}
        onChangeStars={onChangeStars}
        onSubmit={submitPrediction} />
    )
  }}
/>
  </FlingGestureHandler>
  </FlingGestureHandler>
</Content>

I have tried a lot of different solutions but cannot seem to resolve the issue.