Как поместить липкий Touchable в горизонтальный ScrollView в React Native?

Я пытаюсь создать простое приложение / игру для изучения и практики React Native. В настоящее время я пытаюсь создать липкий TouchableNativeFeedback, который перемещается вместе с экраном, поскольку я использую ScrollView.

Идея состоит в том, что левая половина экрана перемещает персонажа влево, а правая половина экрана перемещает его вправо. Я хочу, чтобы эти элементы управления были зафиксированы на дисплее и не двигались.

Вот как это начинается

Это после небольшого перемещения scrollView

Сначала я пытался изменить значение style.left при прокрутке, но это не кажется хорошим / стабильным решением.

Вот текущий код:

render() {     
    return (
        <ScrollView 
            //onScroll = {this._onScroll}
            ref = {(scrollView) => { this.scrollView = scrollView; }}
            style = {styles.container}
            horizontal= {true}
            snapToAlignment = {"center"}
        >
            <View style = {styles.wrapperView}>
                    <ImageBackground
                        style = {styles.container}
                        source = {require('../images/second.png')}
                    >

                    <TouchableNativeFeedback onPressIn = {this._onPressButton} onPressOut = {this._onPressButton}>
                        <View style = {
                                {
                                    width: width/2,
                                    height: '100%',
                                    position: 'absolute',
                                    left: this.state.touchableLeft,
                                    backgroundColor: 'red',
                                }
                            }>

                        </View>
                    </TouchableNativeFeedback>

                    ... (code about the character)

                </ImageBackground>
            </View>
       </ScrollView>
    );
  }

и код стилей

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',

    },
    wrapperView:{
        width: width*3 + 300,
    },
  });

и просто для справки, это то, что я изначально пробовал:

_onScroll = (event) => {
    this.setState( {
        touchableLeft: this.state.touchableLeft + event.nativeEvent.contentOffset.x
     } )
}

Я просмотрел следующие вопросы и статьи, но не смог найти решение, которое могло бы мне помочь. Обычно люди используют flex, чтобы закрепить свои заголовки над ScrollView, и это невероятно удобно, но в этой ситуации я не уверен, как продолжить. Статьи / вопросы:

Как закрепить заголовок раздела ListView

http://docs.nativebase.io/docs/examples/StickyHeaderExample.html

Липкий компонент внутри scrollview