React Native persistent scrollbar

After perusing the React Native Documentation I couldn't seem to find out how to make a <ScrollView> have a persistent scrollbar that doesn't fade out. How would I achieve that?

iOS

The underlying iOS native component, UIScrollView (technically, RCTEnhancedScrollView), doesn't support keeping the scroll indicators visible. For this reason, the React Native wrapper around it won't either.

There is a hack to get this working with the native component (see this answer for one approach). To accomplish this in React Native, you'd need to implement this hack on the native side, and then either create your own Native Module or fork React Native and modify their ScrollView component.

That said, the iOS Scroll View interface guidelines discourage this, so you may want to leave the indicators' behavior alone.

Android

The only known workaround is to set <item name="android:overScrollMode">always</item>, but this is similarly discouraged.

I was looking for a solution but I didn't find nothing, then I created a solution, I hope can help you with it. I created a view View with height and width and put it over my scrollview, after that I used the Props of scrollview like onMomentumScrollBegin, onMomentumScrollEnd, onContentSizeChange and onScroll

after that I make a condition with a boolean variable, if this variable is false, the View is visible, if is false the View is hide, How do I active this variable? with the Prop onMomentumScrollBegin that detect when you use the scrollView and the same way to set the variable in false with onMomentumScrollEnd that detects when the scroll ends.

The Prop onContentSizeChange allows me to get the height and width of my scrollview, this values I used to calculate where would be set the scrollbar/scrollIndicator

and finally with the Prop onScroll I get the position.

the example:

<ScrollView 
  onMomentumScrollBegin={() => {this.setvarScrollState()}}
  onMomentumScrollEnd={() => {this.setvarScrollStateRev()}}
  scrollEventThrottle={5} 
  onContentSizeChange={(w, h) => this.state.hScroll = h}
  showsVerticalScrollIndicator={false}
  onScroll={event => { this.state.wScroll = event.nativeEvent.contentOffset.y }}
  style={{ marginVertical: 15, marginHorizontal:15, width: this.state.measurements3.width}}>                    
   {
   Mydata.map((value, index) => {

   return <TouchableOpacity>
           <Text>{ value.MyDataItem }</Text>
          </TouchableOpacity>
       })
   }

the functions:

setvarScrollState() {
    this.setState({VarScroll: true});
}

setvarScrollStateRev() {
    this.setState({VarScroll: false});
}

and the variable

this.state = {VarScroll: false}

Then my condition is

!this.state.VarScroll ?
 <View
  style = {{
  marginTop: 200*(this.state.wScroll / this.state.hScroll),
  marginLeft:338.5,
  height: 35,
  width: 2,
  backgroundColor: 'grey',
  position:'absolute'
  }}
  /> 
 : null

Why 200? because is the maximum value that my marginTop can set Check the picture

Final note: the scrollView have to be inside a View with the another View (scrollbar) something like this

<View>
    {/*---- ScrollBar and conditions----*/}
    <View>
    <View>
    <ScrollView>
    </ScrollView>
</View>