Проблема пользовательского интерфейса с заголовком градиента в React Native 0.62

Question

Я работаю над проектом React Native 0.62, в котором я создал собственный ящик. И заголовок градиента для экранов, но содержимое экранов скрывается за заголовком градиента.

MainNavigator. js:

    const DashboardStack = createStackNavigator();
    const TimesheetStack = createStackNavigator();
    const MyProfileStack = createStackNavigator();
    const LmsStack = createStackNavigator();
    const ChangePasswordStack = createStackNavigator();
    const Drawer = createDrawerNavigator();
    
    const GradientHeader = props => (
      <View style={{ backgroundColor: 'transparent' }}>
          <LinearGradient
            colors={['#6CCFF6', '#596AB2']}
            start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
            style={{  height: 128  /* height: Header.HEIGHT  */}}
          >
              <Header {...props} />   
          </LinearGradient>
        </View>
      )
    
    const DashboardStackScreen = ({ navigation }) => {
      return (
        <DashboardStack.Navigator screenOptions={{
          headerTitle: 'Good Morning, John',
          header: props => <GradientHeader {...props} />,
          headerLeft: () => (
            <TouchableOpacity onPress={navigation.openDrawer} style={{padding: 20}}>
              <Image source={require('../assets/images/menu_bar.png')} style={{width:18, height:12}}/>
            </TouchableOpacity>
          ),
          headerStyle: {
            backgroundColor: 'transparent',
          },
          headerTintColor: '#fff',    
          headerTitleStyle: { fontFamily: 'OpenSans-SemiBold', fontSize: 20},
        }}>
          <DashboardStack.Screen name="Dashboard" component={Dashboard} />
        </DashboardStack.Navigator>
      );
    }

Любая помощь приветствуется. Заранее спасибо.

Мокап:

My View: введите описание изображения здесь

Заранее спасибо