Попытка создать вертикальную вкладку с прокруткой навигации

Question

Я пытаюсь создать вертикальную вкладку таким образом, чтобы при нажатии на один из значков маршрута он перемещался с прокручиваемой анимацией вниз или вверх к соответствующему маршруту и ​​мог делать это с вертикальной прокруткой

Я уже пробовал различные способы, такие как Satyia164 API https://reactnativeexample.com/an-extension-to-react-native-tab-view-which-provides-a-vertical-tab-bar/ Но безрезультатно, я покажу код с различными компонентами, структурированными статически

SettingMenu:

import React from 'react';
import {AppRegistry, StyleSheet, View, Image, Text} from "react-native" ;
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'



export default class SettingMenu extends React.Component {
    render() {
        return(

        <View style={styles.container}>

        <Image  style={{ tintColor: "#9B9B9B", height: 50, width: 50,
        position: 'absolute', top: wp('47.5%'), left: wp('6.5%')}}

          source={require("../Icons/account.png")} 
       // To pay flatIcon
           />
<Text style={styles.text1}> Account </Text>


      <Image  style={{ tintColor: "#9B9B9B", height: 50, width: 50,
        position: 'absolute', top: wp('85%'), left: wp('6.5%')}}

          source={require("../Icons/padlock.png")} 
       // To pay flatIcon
           />

        <Text style={styles.text2}> Privacy </Text>


      <Image  style={{ tintColor: "#9B9B9B", height: 50, width: 50,
        position: 'absolute', top: wp('150%'), left: wp('6.5%')}}

          source={require("../Icons/logout.png")} 
       // To pay flatIcon
           />
           <Text style={styles.text3}> Logout </Text>


                 </View>
        ) 
    }
}


const styles= StyleSheet.create({
    container:{ 
         flex: 1,
        backgroundColor: '#000000',

        width: 100,
    },
    text1:{
 fontSize: 20,
               color: "#9B9B9B",
              top: wp('62%'),
               left: wp('2.5%')


    },
      text2:{
        fontSize: 20,
               color: "#9B9B9B",
              top: wp('94%'),
               left: wp('4%')


    },
    text3:{
        fontSize: 20,
               color: "#9B9B9B",
              top: wp('152%'),
               left: wp('3.5%')


    },




})

SettingScreen:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MenuButton from '../Menu/MenuButton'
import SettingMenu from './SettingMenu'

export default class SettingScreen extends React.Component{
    render(){
        return(
            <View style={styles.container}>
          <SettingMenu/>
          <View style={styles.Mstyle}>
            <MenuButton navigation= {this.props.navigation}/>
          </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#262A2C',

        justifyContent: 'center',
    },
 Mstyle: {
      alignSelf:'center',
      position: 'absolute'
},
});