From ded2e8aa88337af65f25e4e72e746f636e9439dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Wed, 6 Dec 2023 18:39:01 +0100 Subject: [PATCH 1/9] move animation from TabSelector to TabSelectorItem --- src/components/TabSelector/TabSelector.js | 65 +++---------------- src/components/TabSelector/TabSelectorItem.js | 55 +++++++++------- src/styles/styles.ts | 9 --- 3 files changed, 42 insertions(+), 87 deletions(-) diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index 602a326d6c48..d451bb31a675 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -1,10 +1,9 @@ import PropTypes from 'prop-types'; -import React, {useCallback, useMemo, useState} from 'react'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import TabSelectorItem from './TabSelectorItem'; @@ -53,56 +52,13 @@ const getIconAndTitle = (route, translate) => { } }; -const getOpacity = (position, routesLength, tabIndex, active, affectedTabs) => { - const activeValue = active ? 1 : 0; - const inactiveValue = active ? 0 : 1; - - if (routesLength > 1) { - const inputRange = Array.from({length: routesLength}, (v, i) => i); - - return position.interpolate({ - inputRange, - outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? activeValue : inactiveValue)), - }); - } - return activeValue; -}; - -function TabSelector({state, navigation, onTabPress, position}) { +function TabSelector({state, navigation, onTabPress}) { const {translate} = useLocalize(); - const theme = useTheme(); const styles = useThemeStyles(); - const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: state.routes.length}, (v, i) => i), [state.routes.length]); - const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs); - - const getBackgroundColor = useCallback( - (routesLength, tabIndex, affectedTabs) => { - if (routesLength > 1) { - const inputRange = Array.from({length: routesLength}, (v, i) => i); - - return position.interpolate({ - inputRange, - outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG)), - }); - } - return theme.border; - }, - [theme, position], - ); - React.useEffect(() => { - // It is required to wait transition end to reset affectedAnimatedTabs because tabs style is still animating during transition. - setTimeout(() => { - setAffectedAnimatedTabs(defaultAffectedAnimatedTabs); - }, CONST.ANIMATED_TRANSITION); - }, [defaultAffectedAnimatedTabs, state.index]); - - return ( - - {_.map(state.routes, (route, index) => { - const activeOpacity = getOpacity(position, state.routes.length, index, true, affectedAnimatedTabs); - const inactiveOpacity = getOpacity(position, state.routes.length, index, false, affectedAnimatedTabs); - const backgroundColor = getBackgroundColor(state.routes.length, index, affectedAnimatedTabs); + const tabs = useMemo( + () => + _.map(state.routes, (route, index) => { const isFocused = index === state.index; const {icon, title} = getIconAndTitle(route.name, translate); @@ -111,8 +67,6 @@ function TabSelector({state, navigation, onTabPress, position}) { return; } - setAffectedAnimatedTabs([state.index, index]); - const event = navigation.emit({ type: 'tabPress', target: route.key, @@ -133,15 +87,14 @@ function TabSelector({state, navigation, onTabPress, position}) { icon={icon} title={title} onPress={onPress} - activeOpacity={activeOpacity} - inactiveOpacity={inactiveOpacity} - backgroundColor={backgroundColor} isFocused={isFocused} /> ); - })} - + }), + [navigation, onTabPress, state.index, state.routes, translate], ); + + return {tabs}; } TabSelector.propTypes = propTypes; diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js index 116b5db02d2c..1b6d04405a09 100644 --- a/src/components/TabSelector/TabSelectorItem.js +++ b/src/components/TabSelector/TabSelectorItem.js @@ -1,8 +1,10 @@ import PropTypes from 'prop-types'; -import React from 'react'; +import React, {useCallback, useEffect, useRef} from 'react'; import {Animated, StyleSheet} from 'react-native'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; +import CONST from '@src/CONST'; import TabIcon from './TabIcon'; import TabLabel from './TabLabel'; @@ -16,18 +18,6 @@ const propTypes = { /** Title of the tab */ title: PropTypes.string, - /** Animated background color value for the tab button */ - // eslint-disable-next-line - backgroundColor: PropTypes.any, - - /** Animated opacity value while the label is inactive state */ - // eslint-disable-next-line - inactiveOpacity: PropTypes.any, - - /** Animated opacity value while the label is in active state */ - // eslint-disable-next-line - activeOpacity: PropTypes.any, - /** Whether this tab is active */ isFocused: PropTypes.bool, }; @@ -36,14 +26,35 @@ const defaultProps = { onPress: () => {}, icon: () => {}, title: '', - backgroundColor: '', - inactiveOpacity: 1, - activeOpacity: 0, isFocused: false, }; -function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity, isFocused}) { +function TabSelectorItem({icon, title, onPress, isFocused}) { + const focusValueRef = useRef(new Animated.Value(isFocused ? 1 : 0)); const styles = useThemeStyles(); + const theme = useTheme(); + + useEffect(() => { + Animated.timing(focusValueRef.current, { + toValue: isFocused ? 1 : 0, + duration: CONST.ANIMATED_TRANSITION, + useNativeDriver: true, + }).start(); + }, [isFocused]); + + const getBackgroundColorStyle = useCallback( + (hovered) => { + if (hovered && !isFocused) { + return {backgroundColor: theme.highlightBG}; + } + return {backgroundColor: focusValueRef.current.interpolate({inputRange: [0, 1], outputRange: [theme.appBG, theme.border]})}; + }, + [theme, isFocused], + ); + + const activeOpacityValue = focusValueRef.current; + const inactiveOpacityValue = focusValueRef.current.interpolate({inputRange: [0, 1], outputRange: [1, 0]}); + return ( {({hovered}) => ( - + )} diff --git a/src/styles/styles.ts b/src/styles/styles.ts index b88119beae74..92f4bf561213 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3612,15 +3612,6 @@ const styles = (theme: ThemeColors) => fontWeight: isSelected ? fontWeightBold : '400', color: isSelected ? theme.text : theme.textSupporting, } satisfies TextStyle), - - tabBackground: (hovered: boolean, isFocused: boolean, background: string) => ({ - backgroundColor: hovered && !isFocused ? theme.highlightBG : background, - }), - - tabOpacity: (hovered: boolean, isFocused: boolean, activeOpacityValue: number, inactiveOpacityValue: number) => ({ - opacity: hovered && !isFocused ? inactiveOpacityValue : activeOpacityValue, - }), - overscrollSpacer: (backgroundColor: string, height: number) => ({ backgroundColor, From 50a6b8c0514c02a9d4db906e000e310b7524c0fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Wed, 6 Dec 2023 18:42:43 +0100 Subject: [PATCH 2/9] remove unused props --- src/components/TabSelector/TabSelector.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index d451bb31a675..a9a1d28e503d 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -21,18 +21,10 @@ const propTypes = { /* Callback fired when tab is pressed */ onTabPress: PropTypes.func, - - /* AnimatedValue for the position of the screen while swiping */ - position: PropTypes.shape({ - interpolate: PropTypes.func.isRequired, - }), }; const defaultProps = { onTabPress: () => {}, - position: { - interpolate: () => {}, - }, }; const getIconAndTitle = (route, translate) => { From 0fc209cbc216f5545db3a97ab4386d5493068c85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Fri, 8 Dec 2023 14:05:39 +0100 Subject: [PATCH 3/9] disable animation on web and desktop --- src/components/TabSelector/TabSelector.js | 2 ++ src/components/TabSelector/TabSelectorItem.js | 24 +++++++++++++------ src/libs/Navigation/OnyxTabNavigator.tsx | 15 ++++++++++++ 3 files changed, 34 insertions(+), 7 deletions(-) diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index a9a1d28e503d..f469f0440e2c 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -4,6 +4,7 @@ import {View} from 'react-native'; import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; +import {TabNavigatorAnimationEnabled} from '@libs/Navigation/OnyxTabNavigator'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import TabSelectorItem from './TabSelectorItem'; @@ -80,6 +81,7 @@ function TabSelector({state, navigation, onTabPress}) { title={title} onPress={onPress} isFocused={isFocused} + animationEnabled={TabNavigatorAnimationEnabled()} /> ); }), diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js index 1b6d04405a09..1a7328f46a6b 100644 --- a/src/components/TabSelector/TabSelectorItem.js +++ b/src/components/TabSelector/TabSelectorItem.js @@ -20,6 +20,9 @@ const propTypes = { /** Whether this tab is active */ isFocused: PropTypes.bool, + + /** Whether animations should be skipped */ + animationEnabled: PropTypes.bool, }; const defaultProps = { @@ -27,20 +30,27 @@ const defaultProps = { icon: () => {}, title: '', isFocused: false, + animationEnabled: true, }; -function TabSelectorItem({icon, title, onPress, isFocused}) { +function TabSelectorItem({icon, title, onPress, isFocused, animationEnabled}) { const focusValueRef = useRef(new Animated.Value(isFocused ? 1 : 0)); const styles = useThemeStyles(); const theme = useTheme(); useEffect(() => { - Animated.timing(focusValueRef.current, { - toValue: isFocused ? 1 : 0, - duration: CONST.ANIMATED_TRANSITION, - useNativeDriver: true, - }).start(); - }, [isFocused]); + const focusValue = isFocused ? 1 : 0; + + if (animationEnabled) { + return Animated.timing(focusValueRef.current, { + toValue: focusValue, + duration: CONST.ANIMATED_TRANSITION, + useNativeDriver: true, + }).start(); + } + + focusValueRef.current.setValue(focusValue); + }, [animationEnabled, isFocused]); const getBackgroundColorStyle = useCallback( (hovered) => { diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index 1ea57e773323..b8928a88f61e 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -1,12 +1,24 @@ import {createMaterialTopTabNavigator, MaterialTopTabNavigationEventMap} from '@react-navigation/material-top-tabs'; import {EventMapCore, NavigationState, ScreenListeners} from '@react-navigation/native'; import React from 'react'; +import {Platform} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {OnyxEntry} from 'react-native-onyx/lib/types'; import Tab from '@userActions/Tab'; import ONYXKEYS from '@src/ONYXKEYS'; import ChildrenProps from '@src/types/utils/ChildrenProps'; +const TabNavigatorAnimationEnabled = () => { + switch (Platform.OS) { + case 'macos': + case 'windows': + case 'web': + return false; + default: + return true; + } +}; + type OnyxTabNavigatorOnyxProps = { selectedTab: OnyxEntry; }; @@ -34,6 +46,7 @@ function OnyxTabNavigator({id, selectedTab = '', children, screenListeners, ...r {...rest} id={id} initialRouteName={selectedTab} + screenOptions={{animationEnabled: TabNavigatorAnimationEnabled()}} backBehavior="initialRoute" keyboardDismissMode="none" screenListeners={{ @@ -59,3 +72,5 @@ export default withOnyx({ key: ({id}) => `${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`, }, })(OnyxTabNavigator); + +export {TabNavigatorAnimationEnabled}; From 5c2fffdbcfce87a7f4d38cdfc2d3a1c8715e398d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Mon, 11 Dec 2023 11:07:13 +0100 Subject: [PATCH 4/9] tabBar replace inline function with a component --- src/pages/iou/MoneyRequestSelectorPage.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js index af52ea1222ed..e66e383cf3a1 100644 --- a/src/pages/iou/MoneyRequestSelectorPage.js +++ b/src/pages/iou/MoneyRequestSelectorPage.js @@ -112,13 +112,7 @@ function MoneyRequestSelectorPage(props) { ( - - )} + tabBar={TabSelector} > Date: Mon, 11 Dec 2023 16:44:43 +0100 Subject: [PATCH 5/9] Bump From 60739a1c01fa1962b9f4dfaba874e928f5d35f8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Tue, 12 Dec 2023 10:15:34 +0100 Subject: [PATCH 6/9] fix animation enabled config --- src/components/TabSelector/TabSelector.js | 2 +- src/libs/Navigation/OnyxTabNavigator.tsx | 15 ++++----------- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index f469f0440e2c..13cf67f12e29 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -81,7 +81,7 @@ function TabSelector({state, navigation, onTabPress}) { title={title} onPress={onPress} isFocused={isFocused} - animationEnabled={TabNavigatorAnimationEnabled()} + animationEnabled={TabNavigatorAnimationEnabled} /> ); }), diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index b8928a88f61e..e0eefb68032e 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -8,16 +8,9 @@ import Tab from '@userActions/Tab'; import ONYXKEYS from '@src/ONYXKEYS'; import ChildrenProps from '@src/types/utils/ChildrenProps'; -const TabNavigatorAnimationEnabled = () => { - switch (Platform.OS) { - case 'macos': - case 'windows': - case 'web': - return false; - default: - return true; - } -}; +const TabNavigatorAnimationEnabled = ['ios', 'android'].includes(Platform.OS); + +const screenOptions = {animationEnabled: TabNavigatorAnimationEnabled}; type OnyxTabNavigatorOnyxProps = { selectedTab: OnyxEntry; @@ -46,7 +39,7 @@ function OnyxTabNavigator({id, selectedTab = '', children, screenListeners, ...r {...rest} id={id} initialRouteName={selectedTab} - screenOptions={{animationEnabled: TabNavigatorAnimationEnabled()}} + screenOptions={screenOptions} backBehavior="initialRoute" keyboardDismissMode="none" screenListeners={{ From 7868c9c9e01b07ed3e2ab3b4d2e1866d523f8ace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Thu, 21 Dec 2023 15:27:17 +0100 Subject: [PATCH 7/9] move tabNavigatorAnimationEnabled to separate files --- src/libs/Navigation/OnyxTabNavigator.tsx | 6 ++---- .../Navigation/tabNavigatorAnimationEnabled/index.native.ts | 3 +++ src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts | 3 +++ 3 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 src/libs/Navigation/tabNavigatorAnimationEnabled/index.native.ts create mode 100644 src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index 6149ada7253c..54600b9bbe31 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -1,16 +1,14 @@ import {createMaterialTopTabNavigator, MaterialTopTabNavigationEventMap} from '@react-navigation/material-top-tabs'; import {EventMapCore, NavigationState, ScreenListeners} from '@react-navigation/native'; import React from 'react'; -import {Platform} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {OnyxEntry} from 'react-native-onyx/lib/types'; import Tab from '@userActions/Tab'; import ONYXKEYS from '@src/ONYXKEYS'; import ChildrenProps from '@src/types/utils/ChildrenProps'; +import tabNavigatorAnimationEnabled from './tabNavigatorAnimationEnabled'; -const TabNavigatorAnimationEnabled = ['ios', 'android'].includes(Platform.OS); - -const screenOptions = {animationEnabled: TabNavigatorAnimationEnabled}; +const screenOptions = {animationEnabled: tabNavigatorAnimationEnabled}; type OnyxTabNavigatorOnyxProps = { selectedTab: OnyxEntry; diff --git a/src/libs/Navigation/tabNavigatorAnimationEnabled/index.native.ts b/src/libs/Navigation/tabNavigatorAnimationEnabled/index.native.ts new file mode 100644 index 000000000000..6282734e15c8 --- /dev/null +++ b/src/libs/Navigation/tabNavigatorAnimationEnabled/index.native.ts @@ -0,0 +1,3 @@ +const tabNavigatorAnimationEnabled = false; + +export default tabNavigatorAnimationEnabled; diff --git a/src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts b/src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts new file mode 100644 index 000000000000..531df2999215 --- /dev/null +++ b/src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts @@ -0,0 +1,3 @@ +const tabNavigatorAnimationEnabled = true; + +export default tabNavigatorAnimationEnabled; From 709519d24a3a9430cc379025bda06b7229c16147 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Thu, 21 Dec 2023 15:31:37 +0100 Subject: [PATCH 8/9] fix imports and conditions --- src/components/TabSelector/TabSelector.js | 4 ++-- src/libs/Navigation/OnyxTabNavigator.tsx | 2 -- .../Navigation/tabNavigatorAnimationEnabled/index.native.ts | 2 +- src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index 5d5c7e495ddd..a72289523f68 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -5,7 +5,7 @@ import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import {TabNavigatorAnimationEnabled} from '@libs/Navigation/OnyxTabNavigator'; +import tabNavigatorAnimationEnabled from '@libs/Navigation/tabNavigatorAnimationEnabled'; import CONST from '@src/CONST'; import TabSelectorItem from './TabSelectorItem'; @@ -81,7 +81,7 @@ function TabSelector({state, navigation, onTabPress}) { title={title} onPress={onPress} isFocused={isFocused} - animationEnabled={TabNavigatorAnimationEnabled} + animationEnabled={tabNavigatorAnimationEnabled} /> ); }), diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index 54600b9bbe31..506c60900d2f 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -67,5 +67,3 @@ export default withOnyx({ key: ({id}) => `${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`, }, })(OnyxTabNavigator); - -export {TabNavigatorAnimationEnabled}; diff --git a/src/libs/Navigation/tabNavigatorAnimationEnabled/index.native.ts b/src/libs/Navigation/tabNavigatorAnimationEnabled/index.native.ts index 6282734e15c8..531df2999215 100644 --- a/src/libs/Navigation/tabNavigatorAnimationEnabled/index.native.ts +++ b/src/libs/Navigation/tabNavigatorAnimationEnabled/index.native.ts @@ -1,3 +1,3 @@ -const tabNavigatorAnimationEnabled = false; +const tabNavigatorAnimationEnabled = true; export default tabNavigatorAnimationEnabled; diff --git a/src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts b/src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts index 531df2999215..6282734e15c8 100644 --- a/src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts +++ b/src/libs/Navigation/tabNavigatorAnimationEnabled/index.ts @@ -1,3 +1,3 @@ -const tabNavigatorAnimationEnabled = true; +const tabNavigatorAnimationEnabled = false; export default tabNavigatorAnimationEnabled; From 058ea49547ec0b90497888d2b73286c87e460090 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Thu, 28 Dec 2023 13:42:01 +0100 Subject: [PATCH 9/9] remove unused props --- src/components/TabSelector/TabSelector.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/TabSelector/TabSelector.tsx b/src/components/TabSelector/TabSelector.tsx index 6f4e145f3329..fcbdbaddad5d 100644 --- a/src/components/TabSelector/TabSelector.tsx +++ b/src/components/TabSelector/TabSelector.tsx @@ -1,7 +1,6 @@ import {MaterialTopTabNavigationHelpers} from '@react-navigation/material-top-tabs/lib/typescript/src/types'; import {TabNavigationState} from '@react-navigation/native'; import React, {useMemo} from 'react'; -import type {Animated} from 'react-native'; import {View} from 'react-native'; import * as Expensicons from '@components/Icon/Expensicons'; import {LocaleContextProps} from '@components/LocaleContextProvider'; @@ -22,9 +21,6 @@ type TabSelectorProps = { /* Callback fired when tab is pressed */ onTabPress?: (name: string) => void; - - /* AnimatedValue for the position of the screen while swiping */ - position: Animated.AnimatedInterpolation; }; type IconAndTitle = {