Scrollview with react navigation tabs as content

Question

I have a auth screen where I want to display a logo and react native tabs that switch between two components. When the height of the tab's content is too much to fit the screen I want to be able to scroll down.

class AuthContainer extends Component {
    render() {
        return (
            <View style={{flex:1, paddingBottom: 20}}>
                <ScrollView
                    contentContainerStyle={{ flexGrow: 1}}
                    vertical={true}
                    nestedScrollEnabled={true}
                    >
                    <View style={authContainerStyles.heading}>
                        <Image
                            source={require('../../assets/images/logo.png')}
                            style={authContainerStyles.headingImage}
                            resizeMode='contain'
                        />
                    </View>

                    <Tabs/>

                </ScrollView>
            </View>
        )
    }
}

export default AuthContainer;

The issue is that even if the content of the Tabs component exceeds the screen height the scrollview doesn't show up.

My Tabs component:

const routes = {
    LogIn: {
        screen           : LogIn,
        navigationOptions: {
            title     : 'LogIn'
         }
    },
    SignUp: {
        screen           : SignUp,
        navigationOptions: {
            title     : 'SignUp'
        }
    }
}

const routeConfig = {
    tabBarOptions : {
        animationEnabled: true,
        showLabel        : true
    }
}

export default createMaterialTopTabNavigator(routes, routeConfig);

Any help is appreciated. Thank you all for your time!