@tarojs/router-rn 3.5.0-canary.1 → 3.5.0

package/src/{router.ts → router.tsx}

@@ -1,17 +1,19 @@
-/* eslint-disable react/no-children-prop */
-import * as React from 'react'
-import { StyleProp, ViewStyle } from 'react-native'
-import { camelCase } from 'lodash'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { NavigationContainer } from '@react-navigation/native'
+import {createNativeStackNavigator, NativeStackNavigationOptions} from '@react-navigation/native-stack'
 import { BackBehavior } from '@react-navigation/routers/src/TabRouter'
-import { createStackNavigator, CardStyleInterpolators } from '@react-navigation/stack'
-import { StackHeaderOptions, StackCardMode, StackHeaderMode } from '@react-navigation/stack/src/types'
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { CardStyleInterpolators, createStackNavigator, StackNavigationOptions } from '@react-navigation/stack'
+import { StackHeaderMode, StackHeaderOptions } from '@react-navigation/stack/src/types'
+import { camelCase } from 'lodash'
+import React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+
 import { navigationRef } from './rootNavigation'
-import CustomTabBar from './view/TabBar'
-import HeadTitle from './view/HeadTitle'
+import { getTabInitRoute, getTabItemConfig, getTabVisible, handleUrl, setTabConfig } from './utils/index'
 import BackButton from './view/BackButton'
-import { getTabItemConfig, getTabVisible, setTabConfig, getTabInitRoute, handleUrl } from './utils/index'
+import HeadTitle from './view/HeadTitle'
+import CustomTabBar from './view/TabBar'
+import { TabOptions } from './view/TabBarItem'
 
 interface WindowConfig {
   pageOrientation?: 'auto' | 'portrait' | 'landscape'
@@ -38,49 +40,49 @@ interface ITabBar {
   selectedColor?: string
   backgroundColor?: string
   borderStyle?: 'black' | 'white'
-  list: ITabBarItem[],
+  list: ITabBarItem[]
   position?: 'bottom' | 'top'
   custom?: boolean
 }
 
 interface PageItem {
-  name: string,
-  component: any,
+  name: string
+  component: any
   pagePath: string
 }
 
 interface RNConfig {
-  initialRouteName?: string,
-  linking?: string[],
-  screenOptions?: Record<string, any>,
-  tabBarOptions?: Record<string, any>,
-  options?: Record<string, any>,
-  tabProps?:{
-    backBehavior?: BackBehavior;
-    lazy?: boolean,
-    detachInactiveScreens?:boolean,
+  initialRouteName?: string
+  linking?: string[]
+  screenOptions?: StackNavigationOptions | NativeStackNavigationOptions
+  tabOptions?: TabOptions
+  tabBarOptions?: Record<string, any>
+  tabProps?: {
+    backBehavior?: BackBehavior
+    lazy?: boolean
+    detachInactiveScreens?:boolean
     sceneContainerStyle?: StyleProp<ViewStyle>
-  },
-  stackProps?:{
-    keyboardHandlingEnabled?:boolean,
-    mode?: StackCardMode;
-    headerMode?: StackHeaderMode;
-    detachInactiveScreens?:boolean,
   }
+  stackProps?: {
+    keyboardHandlingEnabled?:boolean
+    headerMode?: StackHeaderMode
+    detachInactiveScreens?:boolean
+  }
+  useNativeStack?: boolean
 }
 
 export interface RouterConfig {
-  pages: PageItem[],
-  tabBar?: ITabBar,
-  window?: WindowConfig,
-  linkPrefix?: string[],
-  rnConfig?: RNConfig,
-  initParams?:Record<string, any>, // 原生启动传递的参数
-  initPath?: string, // 原生启动时传入的参数路径
-  entryPagePath?: string, // 默认启动路径
+  pages: PageItem[]
+  tabBar?: ITabBar
+  window?: WindowConfig
+  linkPrefix?: string[]
+  rnConfig?: RNConfig
+  initParams?:Record<string, any> // 原生启动传递的参数
+  initPath?: string // 原生启动时传入的参数路径
+  entryPagePath?: string // 默认启动路径
 }
 
-export function createRouter (config: RouterConfig): React.ReactNode {
+export function createRouter (config: RouterConfig) {
   if (config?.tabBar?.list?.length) {
     return createTabNavigate(config)
   } else {
@@ -118,7 +120,7 @@ function getTabItemOptions (item, index: number) {
 }
 
 function getHeaderView (title: string, color: string, props: any) {
-  return React.createElement(HeadTitle, { label: title, color, headerProps: props }, null)
+  return <HeadTitle label={title} color={color} headerProps={props} />
 }
 
 // screen配置的内容
@@ -142,12 +144,12 @@ function getStackOptions (config: RouterConfig) {
     },
     headerTintColor: headColor,
     cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+    cardStyle: { elevation: 1 },
     headerBackTitleVisible: false,
-    headerPressColorAndroid: 'rgba(255,255,255,0)',
     headerTitleAlign,
     // eslint-disable-next-line react/display-name
     headerBackImage: ({ tintColor }) => {
-      return React.createElement(BackButton, { tintColor }, null)
+      return <BackButton tintColor={tintColor} />
     }
   }
   const rnConfig = config.rnConfig || {}
@@ -228,29 +230,28 @@ function getInitParams (config, pageName) {
   return params
 }
 
-function createTabStack (config: RouterConfig, parentProps: any) {
+function createTabStack (config: RouterConfig, parentProps: any, screenOptions) {
   const Tab = createBottomTabNavigator()
   const tabBar = config.tabBar
   const rnConfig = config.rnConfig
   const tabList: any = []
-  const userOptions: Record<string, any> = rnConfig?.options || {}
+  const tabOptions: TabOptions = rnConfig?.tabOptions || {}
   tabBar?.list.forEach((item, index) => {
     const defaultOptions = Object.assign({}, { tabBarVisible: config.tabBar?.custom ? false : getTabVisible() }, getTabItemOptions(item, index))
-    const tabItemOptions = Object.assign({}, defaultOptions, userOptions)
+    const tabItemOptions = Object.assign({}, defaultOptions, tabOptions, { headerShown: false, title: item.text })
     setTabConfig('tabBarVisible', tabItemOptions.tabBarVisible)
     const path = item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}`
     const tabName = camelCase(path)
     const tabPage: PageItem = getTabItem(config, tabName) as PageItem
     const initParams = getInitParams(config, tabName)
-    const tabNode = React.createElement(Tab.Screen, {
-      key: `tab${tabName}`,
-      name: `${tabPage.name}`,
-      options: tabItemOptions,
-      component: tabPage.component,
-      initialParams: initParams,
-      ...parentProps
-    })
-    tabList.push(tabNode)
+    tabList.push(<Tab.Screen
+      key={`tab${tabName}`}
+      name={tabPage.name}
+      options={tabItemOptions}
+      component={tabPage.component}
+      initialParams={initParams}
+      {...parentProps}
+    />)
   })
 
   const borderColorMap = {
@@ -278,19 +279,16 @@ function createTabStack (config: RouterConfig, parentProps: any) {
   const tabProps = config.rnConfig?.tabProps || {}
 
   const tabInitRouteName = getTabInitRoute() || getInitTabRoute(config) || tabNames[0]
-  return React.createElement(Tab.Navigator,
-    {
-      ...tabProps,
-      tabBarOptions: tabBarOptions,
-      tabBar: (props) => createTabBar(props, userOptions),
-      initialRouteName: tabInitRouteName,
-      children: tabList
-    },
-    tabList)
+  return <Tab.Navigator
+    {...tabProps}
+    tabBar={(props) => createTabBar(props, tabOptions, tabBarOptions)}
+    initialRouteName={tabInitRouteName}
+    screenOptions={screenOptions}
+  >{tabList}</Tab.Navigator>
 }
 
-function createTabBar (props, userOptions) {
-  return React.createElement(CustomTabBar, { ...props, userOptions })
+function createTabBar (props, tabOptions: TabOptions, tabBarOptions) {
+  return <CustomTabBar {...props} tabOptions={tabOptions} {...tabBarOptions} />
 }
 
 function getLinkingConfig (config: RouterConfig) {
@@ -330,74 +328,61 @@ function getLinkingConfig (config: RouterConfig) {
 }
 
 function createTabNavigate (config: RouterConfig) {
-  const screeList: any = []
-  const Stack = createStackNavigator()
-  // 第一个页面是tabbar的
-  const tabScreen = React.createElement(Stack.Screen, {
-    name: 'tabNav',
-    key: 'tabScreen',
-    children: (props) => createTabStack(config, props)
-  }, (props) => createTabStack(config, props))
-  screeList.push(tabScreen)
+  const Stack = config.rnConfig?.useNativeStack ? createNativeStackNavigator() : createStackNavigator()
   const pageList = getPageList(config)
-  pageList.forEach(item => {
-    const initParams = getInitParams(config, item.name)
-    const screenNode = React.createElement(Stack.Screen,
-      {
-        key: `${item.name}`,
-        name: `${item.name}`,
-        component: item.component,
-        initialParams: initParams
-      }, null)
-    screeList.push(screenNode)
-  })
   const linking = getLinkingConfig(config)
   const stackProps = config.rnConfig?.stackProps
-  const tabStack = React.createElement(Stack.Navigator,
-    {
-      ...stackProps,
-      screenOptions: () => {
-        const options = getCurrentOptions()
-        const defaultOptions = getStackOptions(config)
-        return Object.assign({}, defaultOptions, options)
-      },
-      initialRouteName: getInitRouteName(config),
-      children: screeList
-    }, screeList)
-  return React.createElement(NavigationContainer, { ref: navigationRef, linking: linking, children: tabStack }, tabStack)
+  const screenOptions = getStackOptions(config)
+  return <NavigationContainer
+    ref={navigationRef}
+    linking={linking}
+  >
+    <Stack.Navigator
+      detachInactiveScreens={false}
+      {...stackProps}
+      // @ts-ignore
+      screenOptions={screenOptions}
+      initialRouteName={getInitRouteName(config)}
+    >
+      <Stack.Screen
+        name='tabNav'
+        key='tabScreen'
+        options={{
+          headerShown: false
+        }}
+      >{(props) => createTabStack(config, props, screenOptions)}</Stack.Screen>
+      {pageList.map(item => {
+        const initParams = getInitParams(config, item.name)
+        return <Stack.Screen
+          key={item.name}
+          name={item.name}
+          component={item.component}
+          initialParams={initParams}
+        ></Stack.Screen>
+      })}
+    </Stack.Navigator>
+  </NavigationContainer>
 }
 
 function createStackNavigate (config: RouterConfig) {
-  const Stack = createStackNavigator()
+  const Stack = config.rnConfig?.useNativeStack ? createNativeStackNavigator() : createStackNavigator()
   const pageList = getPageList(config)
   if (pageList.length <= 0) return null
-  const screenChild: any = []
-  pageList.forEach(item => {
-    const initParams = getInitParams(config, item.name)
-    const screenNode = React.createElement(Stack.Screen,
-      {
-        key: `${item.name}`,
-        name: `${item.name}`,
-        component: item.component,
-        initialParams: initParams
-      }, null)
-    screenChild.push(screenNode)
-  })
   const linking = getLinkingConfig(config)
   const stackProps = config.rnConfig?.stackProps
-  const stackNav = React.createElement(Stack.Navigator,
-    {
-      ...stackProps,
-      screenOptions: getStackOptions(config),
-      children: screenChild,
-      initialRouteName: getInitRouteName(config)
-    }, screenChild)
-  return React.createElement(NavigationContainer, { ref: navigationRef, linking: linking, children: stackNav }, stackNav)
-}
-
-function getCurrentOptions () {
-  const options = navigationRef.current?.getCurrentOptions() || {}
-  const params: Record<string, any> = navigationRef.current?.getCurrentRoute()?.params || {}
-  const navParams = params?.navigateConfig || {}
-  return Object.assign({}, options, navParams)
+  return <NavigationContainer
+    ref={navigationRef}
+    linking={linking}
+  >
+    <Stack.Navigator
+      detachInactiveScreens={false}
+      {...stackProps}
+      // @ts-ignore
+      screenOptions={getStackOptions(config)}
+      initialRouteName={getInitRouteName(config)}
+    >{pageList.map(item => {
+        const initParams = getInitParams(config, item.name)
+        return <Stack.Screen key={item.name} name={item.name} component={item.component} initialParams={initParams} />
+      })}</Stack.Navigator>
+  </NavigationContainer>
 }

package/src/tabBar.ts

@@ -1,6 +1,6 @@
-import { successHandler, errorHandler, setTabConfig } from './utils/index'
-import { CallbackResult, TaroTabBarConfig, BaseOption } from './utils/types'
 import { navigationRef } from './rootNavigation'
+import { errorHandler, setTabConfig, successHandler } from './utils/index'
+import { BaseOption, CallbackResult, TaroTabBarConfig } from './utils/types'
 
 const globalAny: any = global
 const INIT_TABBAR_ICON_CONFIG: TaroTabBarConfig = {
@@ -11,19 +11,19 @@ const INIT_TABBAR_ICON_CONFIG: TaroTabBarConfig = {
 }
 globalAny.__taroTabBarIconConfig = INIT_TABBAR_ICON_CONFIG
 interface TabBarBadge extends BaseOption {
-  index: number,
+  index: number
   text?: number | string
 }
 
 interface TabBarRedDot extends BaseOption {
-  index: number,
+  index: number
 }
 
 interface TabBarItem extends BaseOption {
-  index: number,
-  text?: string,
-  iconPath?: string,
-  selectedIconPath?: string,
+  index: number
+  text?: string
+  iconPath?: string
+  selectedIconPath?: string
 }
 
 interface TabBarOptions extends BaseOption {
@@ -31,9 +31,9 @@ interface TabBarOptions extends BaseOption {
 }
 
 interface TabBarStyleOption extends BaseOption {
-  backgroundColor?: string,
-  borderStyle?: 'white' | 'black',
-  color?: string,
+  backgroundColor?: string
+  borderStyle?: 'white' | 'black'
+  color?: string
   selectedColor?: string
 }
 

package/src/utils/index.ts

@@ -1,6 +1,7 @@
 import { camelCase } from 'lodash'
 import { parseUrl } from 'query-string'
-import { TaroTabBarConfig, CallbackResult, OptionsFunc } from './types'
+
+import { CallbackResult, OptionsFunc, TaroTabBarConfig } from './types'
 
 const globalAny: any = global
 
@@ -35,7 +36,6 @@ export function isFunction (obj: unknown): boolean {
   return typeof obj === 'function'
 }
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function isEmptyObject (obj: any): boolean {
   if (obj == null) {
     return true

package/src/utils/types.ts

@@ -1,22 +1,22 @@
 export interface TabItemConfig {
-  showRedDot?: boolean,
-  tabBarBadge?: string | number,
-  tabBarLabel?: string,
-  iconPath?: string,
-  selectedIconPath?: string,
+  showRedDot?: boolean
+  tabBarBadge?: string | number
+  tabBarLabel?: string
+  iconPath?: string
+  selectedIconPath?: string
 }
 
 // 设置全局的tabbar config 中的内容定义
 export interface TaroTabBarConfig {
-  needAnimate: boolean,
-  tabBarVisible: boolean,
+  needAnimate: boolean
+  tabBarVisible: boolean
   tabStyle: {
-    backgroundColor?: string,
-    borderStyle?: string,
-    color?: string,
+    backgroundColor?: string
+    borderStyle?: string
+    color?: string
     selectedColor?: string
-  },
-  tabItems: Record<number, TabItemConfig>,
+  }
+  tabItems: Record<number, TabItemConfig>
 }
 
 export interface CallbackResult {

package/src/view/BackButton.tsx

@@ -1,6 +1,5 @@
-// eslint-disable-next-line no-use-before-define
 import * as React from 'react'
-import { View, Image, Platform } from 'react-native'
+import { Image, Platform, View } from 'react-native'
 
 interface BackButtonProps {
   tintColor: string
@@ -10,7 +9,6 @@ export const blackArrow = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAD
 export const whiteArrow = 'data:image/png;base64,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'
 
 export default class BackButton extends React.PureComponent<BackButtonProps> {
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   render () {
     const { tintColor = '#ffffff' } = this.props
     const color = tintColor.toLowerCase()

package/src/view/Badge.tsx

@@ -1,16 +1,15 @@
-// eslint-disable-next-line no-use-before-define
 import * as React from 'react'
-import { Animated, StyleSheet, StyleProp, TextStyle } from 'react-native'
+import { Animated, StyleProp, StyleSheet, TextStyle } from 'react-native'
 
 export interface BadgeProps {
-  visible: boolean,
-  children?: string | number,
-  size?: number,
+  visible: boolean
+  children?: string | number
+  size?: number
   style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>
 }
 
 export interface BadgeState {
-  opacity: Animated.Value,
+  opacity: Animated.Value
   visible: boolean
 }
 
@@ -62,7 +61,6 @@ export default class Badge extends React.PureComponent<BadgeProps, BadgeState> {
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   render () {
     const { opacity } = this.state
     const { style, size = 18, children, visible } = this.props
@@ -72,7 +70,6 @@ export default class Badge extends React.PureComponent<BadgeProps, BadgeState> {
     const borderRadius = size / 2
     const fontSize = Math.floor((size * 3) / 4)
 
-    // eslint-disable-next-line multiline-ternary
     return (!visible ? null
       : (
         <Animated.Text

package/src/view/HeadTitle.tsx

@@ -1,17 +1,16 @@
-// eslint-disable-next-line no-use-before-define
 import * as React from 'react'
-import { View, Text } from 'react-native'
-import Loading from './Loading'
+import { Text, View } from 'react-native'
+
 import { navigationRef } from '../rootNavigation'
+import Loading from './Loading'
 
 export interface HeadTitleProps {
-  label: string,
-  color: string,
+  label: string
+  color: string
   headerProps?: any
 }
 
 export default class HeadTitle extends React.PureComponent<HeadTitleProps> {
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   render () {
     // showLoading自定义的参数放在params中
     const params: Record<string, any> = navigationRef.current?.getCurrentRoute()?.params || {}

package/src/view/Loading.tsx

@@ -1,9 +1,8 @@
-// eslint-disable-next-line no-use-before-define
 import * as React from 'react'
-import { Animated, StyleSheet, Easing } from 'react-native'
+import { Animated, Easing, StyleSheet } from 'react-native'
 
 interface LoadingViewState {
-  rotateValue: Animated.Value,
+  rotateValue: Animated.Value
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -38,7 +37,6 @@ class LoadingView extends React.Component<LoadingViewProps, LoadingViewState> {
     }).start(() => this.startAnimation())
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   render () {
     return (
       <Animated.Image

package/src/view/TabBar.tsx

@@ -1,44 +1,45 @@
-// eslint-disable-next-line no-use-before-define
-import * as React from 'react'
 import {
   Link
 } from '@react-navigation/native'
-import { withSafeAreaInsets } from 'react-native-safe-area-context'
+import * as React from 'react'
 import {
-  View,
-  TouchableWithoutFeedback,
   Animated,
-  StyleSheet,
-  Platform,
   Dimensions,
+  EmitterSubscription,
+  Keyboard,
   LayoutChangeEvent,
-  Keyboard
+  Platform,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View
 } from 'react-native'
-import { getTabVisible, getTabConfig, getTabItemConfig, getDefalutTabItem, isUrl } from '../utils/index'
-import { getInitSafeAreaInsets } from './tabBarUtils'
+import { withSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { getDefalutTabItem, getTabConfig, getTabItemConfig, getTabVisible, isUrl } from '../utils/index'
 import TabBarItem, { TabBarOptions, TabOptions } from './TabBarItem'
+import { getInitSafeAreaInsets } from './tabBarUtils'
 
 interface TabBarProps extends TabBarOptions {
-  state: Record<string, any>,
-  navigation: any,
-  descriptors: Record<string, any>,
-  userOptions: TabOptions
+  state: Record<string, any>
+  navigation: any
+  descriptors: Record<string, any>
+  tabOptions: TabOptions
 }
 
 interface TabBarState {
-  visible: Animated.Value,
-  isKeyboardShown: boolean,
-  tabVisible: boolean,
+  visible: Animated.Value
+  isKeyboardShown: boolean
+  tabVisible: boolean
   layout: {
-    height: number,
-    width: number,
-  },
+    height: number
+    width: number
+  }
   insets: Record<string, number>
 }
 interface TabBarStyle {
-  color?: string,
-  selectedColor?: string,
-  backgroundColor?: string,
+  color?: string
+  selectedColor?: string
+  backgroundColor?: string
   borderStyle?: string
 }
 
@@ -71,11 +72,13 @@ const styles = StyleSheet.create({
 })
 
 export class TabBar extends React.PureComponent<TabBarProps, TabBarState> {
+  handleKeyboardShowEvent: EmitterSubscription
+  handleKeyboardHideEvent: EmitterSubscription
   constructor (props: TabBarProps) {
     super(props)
     const { height = 0, width = 0 } = Dimensions.get('window')
-    const { safeAreaInsets, userOptions = {} } = this.props
-    const { tabBarVisible = true } = userOptions
+    const { safeAreaInsets, tabOptions = {} } = this.props
+    const { tabBarVisible = true } = tabOptions
     const tabVisible = tabBarVisible === false ? false : getTabVisible()
     this.state = {
       visible: new Animated.Value(tabVisible ? 1 : 0),
@@ -93,11 +96,11 @@ export class TabBar extends React.PureComponent<TabBarProps, TabBarState> {
     const { keyboardHidesTabBar = false } = this.props
     if (keyboardHidesTabBar) {
       if (Platform.OS === 'ios') {
-        Keyboard.addListener('keyboardWillShow', () => this.handleKeyboardShow())
-        Keyboard.addListener('keyboardWillHide', () => this.handleKeyboardHide())
+        this.handleKeyboardShowEvent = Keyboard.addListener('keyboardWillShow', () => this.handleKeyboardShow())
+        this.handleKeyboardHideEvent = Keyboard.addListener('keyboardWillHide', () => this.handleKeyboardHide())
       } else {
-        Keyboard.addListener('keyboardDidShow', () => this.handleKeyboardShow())
-        Keyboard.addListener('keyboardDidHide', () => this.handleKeyboardHide())
+        this.handleKeyboardShowEvent = Keyboard.addListener('keyboardDidShow', () => this.handleKeyboardShow())
+        this.handleKeyboardHideEvent = Keyboard.addListener('keyboardDidHide', () => this.handleKeyboardHide())
       }
     }
   }
@@ -105,13 +108,8 @@ export class TabBar extends React.PureComponent<TabBarProps, TabBarState> {
   componentWillUnmount () {
     const { keyboardHidesTabBar = false } = this.props
     if (keyboardHidesTabBar) {
-      if (Platform.OS === 'ios') {
-        Keyboard.removeListener('keyboardWillShow', () => this.handleKeyboardShow())
-        Keyboard.removeListener('keyboardWillHide', () => this.handleKeyboardHide())
-      } else {
-        Keyboard.removeListener('keyboardDidShow', () => this.handleKeyboardShow())
-        Keyboard.removeListener('keyboardDidHide', () => this.handleKeyboardHide())
-      }
+      this.handleKeyboardShowEvent.remove()
+      this.handleKeyboardHideEvent.remove()
     }
   }
 
@@ -229,7 +227,6 @@ export class TabBar extends React.PureComponent<TabBarProps, TabBarState> {
     return isUrl(path) ? { uri: path } : { uri: path }
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   renderContent () {
     const { state, descriptors, navigation } = this.props
     const horizontal = true
@@ -336,7 +333,6 @@ export class TabBar extends React.PureComponent<TabBarProps, TabBarState> {
     </View>
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   render () {
     const { insets, visible, layout, tabVisible, isKeyboardShown } = this.state
     const paddingBottom = Math.max(
@@ -349,7 +345,6 @@ export class TabBar extends React.PureComponent<TabBarProps, TabBarState> {
 
     const showTabBar = tabVisible !== false && !isKeyboardShown
     if (!needAnimate) {
-      // eslint-disable-next-line multiline-ternary
       return (!showTabBar ? null
         : (
           <View