diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx index 976599659c2b..10d465dc40c8 100644 --- a/app/components/Views/Wallet/index.tsx +++ b/app/components/Views/Wallet/index.tsx @@ -127,9 +127,6 @@ import { endTrace, trace, TraceName } from '../../../util/trace'; const createStyles = ({ colors, typography }: Theme) => StyleSheet.create({ - base: { - paddingHorizontal: 16, - }, wrapper: { flex: 1, backgroundColor: colors.background.default, @@ -137,7 +134,7 @@ const createStyles = ({ colors, typography }: Theme) => walletAccount: { marginTop: 28 }, tabUnderlineStyle: { height: 2, - backgroundColor: colors.primary.default, + backgroundColor: colors.icon.default, }, tabStyle: { paddingBottom: 8, @@ -192,19 +189,17 @@ const WalletTokensTabView = React.memo( const renderTabBar = useCallback( (tabBarProps: Record) => ( - - - + ), [styles, colors], ); diff --git a/patches/react-native-scrollable-tab-view+1.1.0.patch b/patches/react-native-scrollable-tab-view+1.1.0.patch index 64a50eec7454..72afd742dcd8 100644 --- a/patches/react-native-scrollable-tab-view+1.1.0.patch +++ b/patches/react-native-scrollable-tab-view+1.1.0.patch @@ -1,29 +1,42 @@ diff --git a/node_modules/react-native-scrollable-tab-view/DefaultTabBar.js b/node_modules/react-native-scrollable-tab-view/DefaultTabBar.js -index 81a8a70..218c33b 100644 +index 81a8a70..812c3e6 100644 --- a/node_modules/react-native-scrollable-tab-view/DefaultTabBar.js +++ b/node_modules/react-native-scrollable-tab-view/DefaultTabBar.js -@@ -60,9 +60,10 @@ const DefaultTabBar = createReactClass({ +@@ -23,6 +23,7 @@ const DefaultTabBar = createReactClass({ + tabStyle: DeprecatedPropTypes.ViewPropTypes.style, + renderTab: PropTypes.func, + underlineStyle: DeprecatedPropTypes.ViewPropTypes.style, ++ tabPadding: PropTypes.number, + }, + + getDefaultProps() { +@@ -60,9 +61,11 @@ const DefaultTabBar = createReactClass({ render() { const containerWidth = this.props.containerWidth; const numberOfTabs = this.props.tabs.length; + const tabPadding = this.props.tabPadding || 0; ++ const effectiveWidth = containerWidth - tabPadding; const tabUnderlineStyle = { position: 'absolute', - width: containerWidth / numberOfTabs, -+ width: containerWidth / numberOfTabs - tabPadding, ++ width: effectiveWidth / numberOfTabs, height: 4, backgroundColor: 'navy', bottom: 0, -@@ -70,7 +71,7 @@ const DefaultTabBar = createReactClass({ +@@ -70,10 +73,10 @@ const DefaultTabBar = createReactClass({ const translateX = this.props.scrollValue.interpolate({ inputRange: [0, 1], - outputRange: [0, containerWidth / numberOfTabs], -+ outputRange: [0, containerWidth / numberOfTabs - tabPadding], ++ outputRange: [tabPadding / 2, (effectiveWidth / numberOfTabs) + (tabPadding / 2)], }); return ( - -@@ -87,7 +88,7 @@ const DefaultTabBar = createReactClass({ +- ++ + {this.props.tabs.map((name, page) => { + const isTabActive = this.props.activeTab === page; + const renderTab = this.props.renderTab || this.renderTab; +@@ -87,7 +90,7 @@ const DefaultTabBar = createReactClass({ { translateX }, ] }, @@ -33,7 +46,7 @@ index 81a8a70..218c33b 100644 /> diff --git a/node_modules/react-native-scrollable-tab-view/index.js b/node_modules/react-native-scrollable-tab-view/index.js -index dc9d4f4..b9d772a 100644 +index dc9d4f4..4965309 100644 --- a/node_modules/react-native-scrollable-tab-view/index.js +++ b/node_modules/react-native-scrollable-tab-view/index.js @@ -13,17 +13,14 @@ const { @@ -56,15 +69,16 @@ index dc9d4f4..b9d772a 100644 const ScrollableTabView = createReactClass({ mixins: [TimerMixin, ], -@@ -235,7 +232,6 @@ const ScrollableTabView = createReactClass({ +@@ -235,7 +232,7 @@ const ScrollableTabView = createReactClass({ ref={(scrollView) => { this.scrollView = scrollView; }} onScroll={Animated.event( [{ nativeEvent: { contentOffset: { x: this.state.scrollXIOS, }, }, }, ], - { useNativeDriver: true, listener: this._onScroll, } ++ { listener: this._onScroll, } )} onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd} onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd} -@@ -266,10 +262,6 @@ const ScrollableTabView = createReactClass({ +@@ -266,10 +263,7 @@ const ScrollableTabView = createReactClass({ offset: this.state.offsetAndroid, }, }, ], @@ -72,6 +86,7 @@ index dc9d4f4..b9d772a 100644 - useNativeDriver: true, - listener: this._onScroll, - }, ++ { listener: this._onScroll, } )} ref={(scrollView) => { this.scrollView = scrollView; }} {...this.props.contentProps}