React Native: Hex Scrolling with DrawerNavigator

Question

Current behavior

My code is:

class App extends Component {
   render() {
    return <Drawer /> {/* rigid scrolling effect */} 
    return <Stack /> {/* smooth scrolling effect if I comment above return statement */} 
  }
}

const Drawer = DrawerNavigator({
  Feed: { screen: Feed }
})

const Stack = StackNavigator({
  Feed: { screen: Feed }
})

And component component rendering is just a bunch of lines:

render() {
   return <View style={{flex:1}}>
   <ScrollView>
    <Text>random line...</Text>
   // .. more lines to make it scrollable
   </ScrollView>
   </View>
}

Expected Behavior

The expected behavior is to get a smooth scroll effect in both cases. However, the scroll effect of the DrawerNavigator screen is extremely tough. When I quickly push my finger down, it will not smoothly scroll automatically, as it should be in the Stacknavigator example.

How to play

Create the App.js file above and create a simple Feed.js component that has a bunch of lines to make ScrollView work.

Does anyone help?

Update: Live demo: https://snack.expo.io/Hk8Np7nPG

Answer 1

render() {    
        return (
              <View style={{flex:1}}>    
                <ScrollView>
                  <View>
                    {Your Contnet}
                  </View>    
                </ScrollView>    
              </View>
         )}

... , .

Answer 2

NativeBase Contet (, ScrollView) Header ...

:

npm install native-base --save

npm i
react-native link

:

import React, { Component } from 'react';
import { Content , View , Text } from 'native-base'; //don't need import 'react-native' components

export default class GeneralExample extends Component {
render() {    
    return (
          <Content >    
              <View>
                {Your Contnet}
              </View>    
          </Content>
     )}
}

ScrollView, :

<ScrollView decelerationRate={0.5}>
   <View/>
</ScrollView>

NativeBase