Реагируйте на собственный заголовок навигатора стека переноса с пользовательским компонентом

Question

Я хочу использовать заголовок react navigation с react-native-linear-gradient для создания заголовка линейного градиента, я попытался добавить <LinearGradient> в заголовок стекового навигатора в папке node_modules, но он не работает должным образом, <SafeAreaView>как-то мешает <LinearGradient> показать.

Вот что я пробовал

<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#9DD295', '#35C5F1']} style={{ flex: 1 }}>
    {/* <View style={{ backgroundColor: 'red', width: '100%', height: '100%', flex: 1, flexGrow: 1, alignSelf: 'stretch', zIndex: 10000}}> */}
      <SafeAreaView forceInset={forceInset} style={containerStyles}>
          {background}
        <View style={styles.flexOne}>{appBar}</View>
      </SafeAreaView>
    {/* </View> */}
    </LinearGradient>
  </Animated.View>