Money request

src/components/ConfirmedRoute.js

@@ -1,13 +1,13 @@
 import lodashGet from 'lodash/get';
 import lodashIsNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import styles from '@styles/styles';
-import theme from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as MapboxToken from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -37,46 +37,53 @@ const defaultProps = {
     },
 };
 
-const getWaypointMarkers = (waypoints) => {
-    const numberOfWaypoints = _.size(waypoints);
-    const lastWaypointIndex = numberOfWaypoints - 1;
-    return _.filter(
-        _.map(waypoints, (waypoint, key) => {
-            if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) {
-                return;
-            }
-
-            const index = TransactionUtils.getWaypointIndex(key);
-            let MarkerComponent;
-            if (index === 0) {
-                MarkerComponent = Expensicons.DotIndicatorUnfilled;
-            } else if (index === lastWaypointIndex) {
-                MarkerComponent = Expensicons.Location;
-            } else {
-                MarkerComponent = Expensicons.DotIndicator;
-            }
-
-            return {
-                id: `${waypoint.lng},${waypoint.lat},${index}`,
-                coordinate: [waypoint.lng, waypoint.lat],
-                markerComponent: () => (
-                    <MarkerComponent
-                        width={CONST.MAP_MARKER_SIZE}
-                        height={CONST.MAP_MARKER_SIZE}
-                        fill={theme.icon}
-                    />
-                ),
-            };
-        }),
-        (waypoint) => waypoint,
-    );
-};
-
 function ConfirmedRoute({mapboxAccessToken, transaction}) {
     const {isOffline} = useNetwork();
     const {route0: route} = transaction.routes || {};
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const coordinates = lodashGet(route, 'geometry.coordinates', []);
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const getWaypointMarkers = useCallback(
+        (waypointsData) => {
+            const numberOfWaypoints = _.size(waypointsData);
+            const lastWaypointIndex = numberOfWaypoints - 1;
+
+            return _.filter(
+                _.map(waypointsData, (waypoint, key) => {
+                    if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) {
+                        return;
+                    }
+
+                    const index = TransactionUtils.getWaypointIndex(key);
+                    let MarkerComponent;
+                    if (index === 0) {
+                        MarkerComponent = Expensicons.DotIndicatorUnfilled;
+                    } else if (index === lastWaypointIndex) {
+                        MarkerComponent = Expensicons.Location;
+                    } else {
+                        MarkerComponent = Expensicons.DotIndicator;
+                    }
+
+                    return {
+                        id: `${waypoint.lng},${waypoint.lat},${index}`,
+                        coordinate: [waypoint.lng, waypoint.lat],
+                        markerComponent: () => (
+                            <MarkerComponent
+                                width={CONST.MAP_MARKER_SIZE}
+                                height={CONST.MAP_MARKER_SIZE}
+                                fill={theme.icon}
+                            />
+                        ),
+                    };
+                }),
+                (waypoint) => waypoint,
+            );
+        },
+        [theme],
+    );
+
     const waypointMarkers = getWaypointMarkers(waypoints);
 
     useEffect(() => {

src/components/MapView/PendingMapView.tsx

@@ -4,13 +4,13 @@ import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import {PendingMapViewProps} from './MapViewTypes';
 
 function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) {
     const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle);
-
+    const styles = useThemeStyles();
     return (
         <View style={[styles.mapPendingView, style]}>
             {hasTextContent ? (

src/components/TabSelector/TabSelector.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
-import React, {useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import TabSelectorItem from './TabSelectorItem';
 
@@ -68,24 +68,28 @@ const getOpacity = (position, routesLength, tabIndex, active, affectedTabs) => {
     return activeValue;
 };
 
-const getBackgroundColor = (position, 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 ? themeColors.border : themeColors.appBG)),
-        });
-    }
-    return themeColors.border;
-};
-
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-
+    const styles = useThemeStyles();
+    const theme = useTheme();
     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(() => {