ReactNavigation(v5) MaterialTopTabNavigator のインジケータのカスタマイズ

はじめに

ReactNavigationのMaterialTopTabNavigatorのカスタマイズ方法がdocに載っていなかったのでメモ。

ReactNavigation Doc :TabNavigatorConfig

reactnavigation.org

やったこと

書いたコード

import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Text, View, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

const Tab = createMaterialTopTabNavigator();

const Tab1Screen = () => {
  return (
    <Text>タブ1画面</Text>
  )
}

const Tab2Screen = () => {
  return (
    <Text>タブ2画面</Text>
  )
}

export const TopTabNavigator =  () => {
  const renderIndicator = (route) => {
          if (!route.getTabWidth()) {
            return null;
          }
          return (
          <View style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'flex-end',
            width: route.getTabWidth(),
            height: '100%',
            left: route.navigationState.index * route.getTabWidth(),
          }}>
            <LinearGradient
              colors={['blue', 'red']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
              style={styles.gradient}
            />
          </View>
        );
  };

  return (
    <Tab.Navigator tabBarOptions={{
      renderIndicator: renderIndicator,
    }}
    >
      <Tab.Screen name="Tab1" component={Tab1Screen} />
      <Tab.Screen name="Tab2" component={Tab2Screen} />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  gradient: {
    width: '100%',
    position: 'absolute',
    height: 2,
  }
});