chore: Updated tabs styling in wallet

app/components/Views/Wallet/index.tsx

@@ -127,17 +127,14 @@ import { endTrace, trace, TraceName } from '../../../util/trace';
 
 const createStyles = ({ colors, typography }: Theme) =>
   StyleSheet.create({
-    base: {
-      paddingHorizontal: 16,
-    },
     wrapper: {
       flex: 1,
       backgroundColor: colors.background.default,
     },
     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<string, unknown>) => (
-        <View style={styles.base}>
-          <DefaultTabBar
-            underlineStyle={styles.tabUnderlineStyle}
-            activeTextColor={colors.primary.default}
-            inactiveTextColor={colors.text.default}
-            backgroundColor={colors.background.default}
-            tabStyle={styles.tabStyle}
-            textStyle={styles.textStyle}
-            tabPadding={16}
-            style={styles.tabBar}
-            {...tabBarProps}
-          />
-        </View>
+        <DefaultTabBar
+          underlineStyle={styles.tabUnderlineStyle}
+          activeTextColor={colors.text.default}
+          inactiveTextColor={colors.text.alternative}
+          backgroundColor={colors.background.default}
+          tabStyle={styles.tabStyle}
+          textStyle={styles.textStyle}
+          style={styles.tabBar}
+          tabPadding={32}
+          {...tabBarProps}
+        />
       ),
       [styles, colors],
     );

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 (
-       <View style={[styles.tabs, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}>
-@@ -87,7 +88,7 @@ const DefaultTabBar = createReactClass({
+-      <View style={[styles.tabs, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}>
++      <View style={[styles.tabs, {backgroundColor: this.props.backgroundColor, paddingHorizontal: tabPadding / 2}, this.props.style, ]}>
+         {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
          />
        </View>
 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,22 +69,24 @@ 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,
              },
            }, ],
 -          {
 -            useNativeDriver: true,
 -            listener: this._onScroll,
 -          },
++          { listener: this._onScroll, }
          )}
          ref={(scrollView) => { this.scrollView = scrollView; }}
          {...this.props.contentProps}