How to use @react-navigation/material-top-tabs - 3 common examples

import * as React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Albums from '../Shared/Albums';
import Contacts from '../Shared/Contacts';
import Chat from '../Shared/Chat';

type MaterialTopTabParams = {
  Albums: undefined;
  Contacts: undefined;
  Chat: undefined;
};

const MaterialTopTabs = createMaterialTopTabNavigator();

export default function MaterialTopTabsScreen() {
  return (

import Appbar from './Appbar';
import PokemonTypeLabel from './PokemonTypeLabel';
import PokemonDetails from './PokemonDetails';
import PokemonMatches from './PokemonMatches';
import PokemonTools from './PokemonTools';
import store from '../store';
import { PokemonID } from '../types';
import NoResults from './NoResults';

type Props = {
  navigation: any;
  route: any;
  style?: StyleProp;
};

const MaterialTab = createMaterialTopTabNavigator();

export default class PokemonInfo extends PureComponent {
  _getPokemon = memoize((id: PokemonID) => {
    const pokemons = store.getPokemons();
    const pokemon = find(pokemons, { id });
    return pokemon;
  });

  render() {
    const pokemon = this._getPokemon(this.props.route.params.pokemonId);
    const sprite = store.getSprite(this.props.route.params.pokemonId);

    if (pokemon === undefined) {
      return (

import React, { ReactElement } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

import Constants from 'expo-constants';
import { DefaultNavigationProps } from '../../types';
import Friend from '../screen/Friend';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import Message from '../screen/Message';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { useThemeContext } from '@dooboo-ui/native-theme';

const Tab = createMaterialTopTabNavigator();

interface CustomHeaderProps {
  navigation: DefaultNavigationProps;
}

const CustomHeader = (props: CustomHeaderProps): ReactElement => {
  const { theme, changeThemeType } = useThemeContext();
  return (