Extending default Header from react-navigation to compose a new component

Question

How can I implement a ThemedHeader extending from default Header component in react-navigation? I'm already tried something like this:

as Class Component

import React, {PureComponent} from 'react';
import {Header, HeaderProps} from 'react-navigation-stack';
import {StyleSheet} from 'react-native';
import {ThemeContext} from 'styled-components';

export default class ThemedHeader extends PureComponent<HeaderProps> {
  static contextType = ThemeContext;

  render() {
    const {scene} = this.props;
    const {colors} = this.context;

    const headerStyleObj = StyleSheet.flatten(
      scene.descriptor.options.headerStyle,
    );

    const themedScene = {
      ...scene,
      descriptor: {
        ...scene.descriptor,
        options: {
          ...scene.descriptor.options,
          headerTintColor: colors.accent,
          headerStyle: {
            backgroundColor: colors.primary,
            ...headerStyleObj,
          },
        },
      },
    };

    //@ts-ignore
    return <Header {...props} scene={themedScene} />;
  }
}

and return the following error when define as header in navigationOptions:

class component error

as Function Component:

import React, {useMemo} from 'react';
import {Header, HeaderProps} from 'react-navigation-stack';
import {useTheme} from 'react-native-paper';
import {StyleSheet} from 'react-native';
import {Theme} from 'react-native-paper/lib/typescript/src/types';
import {ThemeContext} from 'styled-components';

export default function ThemedHeader(props: HeaderProps, context: Theme) {
  const {scene} = props;
  const {colors} = useTheme();

  const headerStyleObj = StyleSheet.flatten(
    scene.descriptor.options.headerStyle,
  );

  const themedScene = {
    ...scene,
    descriptor: {
      ...scene.descriptor,
      options: {
        ...scene.descriptor.options,
        headerTintColor: colors.accent,
        headerStyle: {
          backgroundColor: colors.primary,
          ...headerStyleObj,
        },
      },
    },
  };

  //@ts-ignore
  return <Header {...props} scene={themedScene} />;
}

and return the following error when define as header in navigationOptions:

function component errro

Answer 1

Solving passing the ThemedHeader as inline render function props => <ThemedHeader {...props} /> on header in navigationOptions