How to use the react-navigation.useTheme function in react-navigation

export default () => {
  // Need to thread the theme through to detached nested navigator
  let theme = useTheme();

  return ;
};

const SvgCog = ({ active, size }) => {
  const theme = useTheme();
  const fill = active
    ? colors.activeTintColor[theme]
    : colors.inactiveTintColor[theme];

  return (
    <svg viewBox="0 0 32 32" width="{size}" height="{size}">
      <path fill="{fill}" d="M29.181 19.07c-1.679-2.908-.669-6.634 2.255-8.328l-3.145-5.447a6.022 6.022 0 0 1-3.058.829c-3.361 0-6.085-2.742-6.085-6.125h-6.289a6.023 6.023 0 0 1-.811 3.07C10.369 5.977 6.637 6.966 3.709 5.28L.565 10.727a6.023 6.023 0 0 1 2.246 2.234c1.676 2.903.672 6.623-2.241 8.319l3.145 5.447a6.022 6.022 0 0 1 3.044-.82c3.35 0 6.067 2.725 6.084 6.092h6.289a6.032 6.032 0 0 1 .811-3.038c1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447a6.032 6.032 0 0 1-2.232-2.226zM16 22.479A6.48 6.48 0 1 1 16 9.52a6.48 6.48 0 0 1 0 12.959z"></path>
    </svg>
  );
};

const MyNavScreen = ({
  navigation,
  banner,
}: {
  navigation: NavigationStackProp;
  banner: string;
}) => {
  let theme = useTheme();

  return (

export const Separator = (props: View['props']) => {
  let theme = useTheme();
  let { style, ...otherProps } = props;

  return (

export default props => {
  let theme = useTheme();

  return ;
};

const Home = (props: NavigationStackScreenProps) => {
  const theme = useTheme();

  return (

function useRippleColor(_props: any) {
  let theme = useTheme();
  return theme === 'light' ? '#ccc' : '#fff';
}

function useThemeBackgroundColor(props: Props | StyledScrollViewProps, colorName: ThemedColors) {
  let theme = useTheme();
  let colorFromProps = props[`${theme}BackgroundColor`];

  if (colorFromProps) {
    return colorFromProps;
  } else {
    return Colors[theme][colorName];
  }
}

function useThemeColor(props: Props, colorName: ThemedColors) {
  let theme = useTheme();
  let colorFromProps = props[`${theme}Color`];

  if (colorFromProps) {
    return colorFromProps;
  } else {
    return Colors[theme][colorName];
  }
}

const SvgCircleLeft = ({ active, size }) => {
  const theme = useTheme();
  const fill = active
    ? colors.activeTintColor[theme]
    : colors.inactiveTintColor[theme];

  return (
    <svg viewBox="0 0 32 32" width="{size}" height="{size}">
      <path fill="{fill}" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-29c7.18 0 13 5.82 13 13s-5.82 13-13 13S3 23.18 3 16 8.82 3 16 3z"></path>
      <path fill="{fill}" d="M20.914 9.914l-2.829-2.829-8.914 8.914 8.914 8.914 2.828-2.828-6.086-6.086z"></path>
    </svg>
  );