fix: add styled-components types, fix type errors & Android font weights

package.json

@@ -68,6 +68,7 @@
     "intl": "^1.2.5",
     "jdenticon": "^3.1.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "lottie-react-native": "^5.1.3",
     "nodejs-mobile-react-native": "^0.7.0",
@@ -146,6 +147,8 @@
     "@types/react-test-renderer": "^18.0.0",
     "@types/redux-logger": "^3.0.9",
     "@types/semver": "^7.3.13",
+    "@types/styled-components": "^5.1.26",
+    "@types/styled-components-react-native": "^5.2.0",
     "@types/url-parse": "^1.4.8",
     "@typescript-eslint/eslint-plugin": "^5.33.1",
     "@typescript-eslint/parser": "^5.33.1",

src/App.tsx

@@ -14,7 +14,6 @@ import { ThemeProvider } from 'styled-components/native';
 
 import { SafeAreaProvider, StatusBar } from './styles/components';
 import themes from './styles/themes';
-import { TTheme } from './store/types/settings';
 // import { checkForAppUpdate } from './store/actions/ui';
 import { useAppSelector } from './hooks/redux';
 import OnboardingNavigator from './navigation/onboarding/OnboardingNavigator';
@@ -54,7 +53,7 @@ const App = (): ReactElement => {
 		// checkForAppUpdate();
 	}, []);
 
-	const currentTheme: TTheme = useMemo(() => themes[theme], [theme]);
+	const currentTheme = useMemo(() => themes[theme], [theme]);
 
 	const RootComponent = useCallback((): ReactElement => {
 		if (availableUpdateType === 'critical') {

src/assets/icons/header.ts

@@ -1,4 +1,4 @@
-export const settings = (color): string =>
+export const settings = (color = 'white'): string =>
 	`<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="${color}"><path d="m28.654 13.0676c-.0356-.1448-.1026-.28-.1964-.396-.0937-.1159-.2119-.2097-.346-.2748l-2.0845-1.0307-1-1.73207.1496-2.32062c.0108-.14871-.0114-.29796-.0649-.43712-.0536-.13916-.1371-.26481-.2447-.36799-1.4383-1.36428-3.1788-2.36913-5.0794-2.93255-.1432-.04162-.2938-.05115-.441-.02793-.1473.02323-.2877.07865-.4111.16231l-1.9349 1.28982h-2l-1.9348-1.28989c-.1235-.08366-.2638-.13908-.4111-.16231s-.2979-.0137-.4411.02791c-1.9006.56347-3.64103 1.56833-5.0793 2.93258-.10762.10319-.19117.22884-.2447.36799-.05353.13916-.07572.28841-.06499.43713l.14959 2.32055-1 1.73209-2.08453 1.0307c-.13415.0651-.25231.1589-.34606.2748-.09375.116-.1608.2511-.19636.3959-.46234 1.9277-.46232 3.9375.00006 5.8652.03554.1448.10257.2799.19631.3959.09374.1159.2119.2098.34605.2748l2.08448 1.0307 1 1.7321-.1496 2.3206c-.01074.1487.01144.298.06496.4371.05352.1392.13705.2648.24467.368 1.43826 1.3643 3.17872 2.3692 5.07942 2.9326.1432.0416.2937.0511.441.0279s.2876-.0786.411-.1623l1.9349-1.2898h2l1.9349 1.2899c.1234.0836.2638.139.411.1623.1473.0232.2979.0137.4411-.0279 1.9006-.5635 3.6411-1.5684 5.0793-2.9326.1077-.1032.1912-.2289.2447-.368.0536-.1392.0758-.2884.065-.4371l-.1496-2.3206 1-1.7321 2.0846-1.0307c.1341-.065.2523-.1589.346-.2748.0938-.1159.1608-.2511.1964-.3959.4623-1.9277.4623-3.9374 0-5.8651zm-12.6533 9.9325c-1.3844 0-2.7378-.4106-3.889-1.1797-1.1511-.7692-2.0483-1.8625-2.57812-3.1415-.52982-1.2791-.66844-2.6866-.39834-4.0445.27009-1.3578.93676-2.6051 1.91576-3.5841.979-.9789 2.2262-1.64563 3.5841-1.91573s2.7653-.13147 4.0444.39834c1.2791.52979 2.3723 1.42699 3.1415 2.57819.7692 1.1511 1.1797 2.5045 1.1797 3.889 0 1.8565-.7375 3.637-2.0502 4.9497-1.3128 1.3128-3.0933 2.0503-4.9498 2.0503z" opacity=".2"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="m16 12c-2.2091 0-4 1.7909-4 4s1.7909 4 4 4 4-1.7909 4-4-1.7909-4-4-4zm-6 4c0-3.3137 2.6863-6 6-6s6 2.6863 6 6-2.6863 6-6 6-6-2.6863-6-6z"/><path d="m11.9347 2.61537c.2844-.08263.5834-.10154.8759-.05541.291.0459.5684.15507.8125.31977l1.6804 1.12021h1.3945l1.6803-1.12013c.2442-.16472.5216-.27389.8126-.31978.2925-.04613.5915-.0272.8759.05544l.0051.00149c2.0518.60828 3.9307 1.69304 5.4834 3.16579l.0039.00373c.2137.20495.3796.45449.4859.73086.1058.27495.1499.56972.1293.86354l-.1299 2.01536.6973 1.20766 1.8061.8931c.0013.0007.0026.0013.004.002.2648.1291.498.3147.6833.5438.1862.2303.3193.4987.3899.7863l.0013.0052c.4991 2.081.4991 4.2506 0 6.3316l-.0013.0053c-.0706.2875-.2037.556-.3899.7862-.1853.2291-.4184.4147-.6831.5438l-1.8104.8952-.6973 1.2076.1299 2.0154c.0206.2938-.0236.5885-.1293.8635-.1063.2763-.2722.5259-.486.7308l-.0038.0037c-1.5527 1.4728-3.4316 2.5576-5.4834 3.1658l-.0052.0016c-.2843.0826-.5834.1015-.8759.0554-.291-.0459-.5684-.1551-.8126-.3199-.0012-.0008-.0025-.0017-.0037-.0025l-1.6766-1.1176h-1.3944l-1.6803 1.1201c-.2442.1647-.5216.2739-.8126.3198-.2925.0461-.5916.0272-.8759-.0554l-.0052-.0015c-2.05175-.6083-3.93064-1.6931-5.48331-3.1658l-.00392-.0038c-.21373-.2049-.37964-.4544-.48593-.7308-.10575-.275-.14989-.5698-.12933-.8636l.12994-2.0153-.69723-1.2077-1.81039-.8952c-.26468-.1291-.49785-.3147-.68306-.5437-.1862-.2302-.31934-.4987-.38994-.7863l-.00128-.0052c-.49912-2.081-.49911-4.2506-.00001-6.3316l.00126-.0053c.07062-.2875.20378-.556.38999-.7862.18526-.2291.4185-.4147.68327-.5438l1.81023-.8951.69723-1.20769-.12991-2.01521c-.02055-.29386.02359-.58866.12935-.86363.1063-.27638.27223-.52591.48597-.73085l.00387-.00371c1.55266-1.47276 3.43155-2.55753 5.4833-3.16582zm.5587 1.9204c-1.7462.51847-3.34529 1.44174-4.66735 2.69473-.0013.00136-.00232.00297-.003.00473-.00075.00195-.00106.00404-.00091.00612l.00056.00769.16903 2.62268-1.30276 2.25648-2.36283 1.1683c-.00188.0009-.00356.0022-.00487.0039-.0012.0014-.00208.0031-.00261.0049-.42407 1.7715-.42406 3.618.00004 5.3894.00052.0018.0014.0035.00259.005.00131.0016.00297.0029.00485.0038l.00693.0034 2.35583 1.1649 1.30277 2.2565-.1696 2.6304c-.00015.0021.00013.0042.00088.0062.00068.0017.0017.0034.00301.0047 1.32212 1.253 2.92134 2.1763 4.66754 2.6947.0018.0004.0036.0005.0054.0002.001-.0001.0019-.0004.0028-.0007.001-.0004.002-.0009.003-.0016l.0064-.0043 2.1867-1.4577h2.6056l2.1932 1.4621c.0012.0008.0025.0014.0039.0019.0006.0001.0012.0003.0019.0004.0018.0003.0038.0002.0056-.0003 1.7477-.5189 3.348-1.4433 4.6708-2.698l.6881.7256-.692-.7218c.0015-.0015.0027-.0033.0034-.0052.0008-.002.0011-.0041.0009-.0061l-.0005-.0077-.1691-2.6227 1.3028-2.2564 2.3628-1.1684c.0019-.0009.0036-.0022.0049-.0038.0012-.0015.0021-.0032.0026-.005.4241-1.7715.424-3.6181-.0001-5.3896-.0005-.0017-.0014-.0033-.0025-.0048-.0014-.0016-.003-.0029-.0049-.0038l-.0069-.0034-2.3558-1.1649-1.3028-2.25647.1696-2.63044c.0001-.00209-.0001-.00419-.0009-.00614-.0005-.00122-.0011-.00237-.0019-.00341-.0003-.00047-.0007-.00091-.0011-.00134-1.3221-1.25301-2.9213-2.17627-4.6676-2.6947-.0017-.00041-.0036-.00047-.0054-.00019-.002.00032-.004.0011-.0057.00227l-.0064.00433-2.1868 1.45773h-2.6055l-2.1932-1.4621c-.0018-.00117-.0037-.00198-.0058-.0023-.0019-.0003-.0038-.00022-.0056.00023z"/></g></g></svg>`;
 
 export const dismiss = (color = 'white'): string => `

src/assets/icons/wallet.ts

@@ -153,7 +153,7 @@ export const infoIcon = (color = 'white'): string =>
 export const qrPage = (color = 'white'): string =>
 	`<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".2" d="M6.75 1h-4.5a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-4.5A.75.75 0 0 0 6.75 1ZM6.75 10h-4.5a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-.75-.75ZM15.75 1h-4.5a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-.75-.75Z" fill="${color}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M.75 1.75a1.5 1.5 0 0 1 1.5-1.5h4.5a1.5 1.5 0 0 1 1.5 1.5v4.5a1.5 1.5 0 0 1-1.5 1.5h-4.5a1.5 1.5 0 0 1-1.5-1.5v-4.5Zm6 0h-4.5v4.5h4.5v-4.5ZM.75 10.75a1.5 1.5 0 0 1 1.5-1.5h4.5a1.5 1.5 0 0 1 1.5 1.5v4.5a1.5 1.5 0 0 1-1.5 1.5h-4.5a1.5 1.5 0 0 1-1.5-1.5v-4.5Zm6 0h-4.5v4.5h4.5v-4.5ZM9.75 1.75a1.5 1.5 0 0 1 1.5-1.5h4.5a1.5 1.5 0 0 1 1.5 1.5v4.5a1.5 1.5 0 0 1-1.5 1.5h-4.5a1.5 1.5 0 0 1-1.5-1.5v-4.5Zm6 0h-4.5v4.5h4.5v-4.5ZM10.5 9.25a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Z" fill="${color}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 9.25a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1 0-1.5h2.25V10a.75.75 0 0 1 .75-.75Z" fill="${color}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 11.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1-.75-.75ZM16.5 13.75a.75.75 0 0 1 .75.75V16a.75.75 0 0 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75Z" fill="${color}"/></svg>`;
 
-export const scanIcon = (color): string => `
+export const scanIcon = (color = 'white'): string => `
 <svg width="22" height="21" viewBox="0 0 22 21" xmlns="http://www.w3.org/2000/svg">
 <path d="M20.0952 7.47949C20.854 7.47949 21.2642 7.05908 21.2642 6.29004V3.81885C21.2642 1.55273 20.0542 0.342773 17.7676 0.342773H15.2964C14.5273 0.342773 14.1069 0.763184 14.1069 1.52197C14.1069 2.27051 14.5273 2.69092 15.2964 2.69092H17.5522C18.4341 2.69092 18.9263 3.14209 18.9263 4.06494V6.29004C18.9263 7.05908 19.3364 7.47949 20.0952 7.47949ZM1.90479 7.47949C2.67383 7.47949 3.08398 7.05908 3.08398 6.29004V4.06494C3.08398 3.14209 3.55566 2.69092 4.44775 2.69092H6.71387C7.48291 2.69092 7.89307 2.27051 7.89307 1.52197C7.89307 0.763184 7.48291 0.342773 6.71387 0.342773H4.23242C1.95605 0.342773 0.73584 1.55273 0.73584 3.81885V6.29004C0.73584 7.05908 1.15625 7.47949 1.90479 7.47949ZM4.23242 20.8813H6.71387C7.48291 20.8813 7.89307 20.4609 7.89307 19.7021C7.89307 18.9434 7.47266 18.5332 6.71387 18.5332H4.44775C3.55566 18.5332 3.08398 18.082 3.08398 17.1489V14.9341C3.08398 14.165 2.66357 13.7446 1.90479 13.7446C1.146 13.7446 0.73584 14.165 0.73584 14.9341V17.4053C0.73584 19.6714 1.95605 20.8813 4.23242 20.8813ZM15.2964 20.8813H17.7676C20.0542 20.8813 21.2642 19.6611 21.2642 17.4053V14.9341C21.2642 14.165 20.854 13.7446 20.0952 13.7446C19.3364 13.7446 18.9263 14.165 18.9263 14.9341V17.1489C18.9263 18.082 18.4341 18.5332 17.5522 18.5332H15.2964C14.5273 18.5332 14.1069 18.9434 14.1069 19.7021C14.1069 20.4609 14.5273 20.8813 15.2964 20.8813Z" fill="${color}"/>
 </svg>

src/components/AssetCard.tsx

@@ -1,6 +1,6 @@
 import React, { memo, ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
-import { View, Pressable } from '../styles/components';
+import { GestureResponderEvent, Pressable, StyleSheet } from 'react-native';
+import { View } from '../styles/components';
 import { Text01M, Caption13M } from '../styles/text';
 import Money from '../components/Money';
 
@@ -15,10 +15,10 @@ const AssetCard = ({
 	ticker: string;
 	icon: ReactElement;
 	satoshis: number;
-	onPress: Function;
+	onPress: (event: GestureResponderEvent) => void;
 }): ReactElement => {
 	return (
-		<Pressable style={styles.container} onPress={onPress} color="transparent">
+		<Pressable style={styles.container} onPress={onPress}>
 			<View color="transparent" style={styles.col1}>
 				{icon}
 				<View color="transparent" style={styles.titleContainer}>

src/components/AssetCard_deprecated.tsx

@@ -1,11 +1,11 @@
-/**
- * @format
- * @flow strict-local
- */
-
 import React, { memo, ReactElement } from 'react';
-import { LayoutAnimation, StyleSheet } from 'react-native';
-import { View, Pressable } from '../styles/components';
+import {
+	Pressable,
+	LayoutAnimation,
+	StyleSheet,
+	GestureResponderEvent,
+} from 'react-native';
+import { View } from '../styles/components';
 import { Text } from '../styles/text';
 import Card from './Card';
 import BitcoinLogo from '../assets/bitcoin-logo.svg';
@@ -32,23 +32,23 @@ const AssetCard_deprecated = ({
 	description = '',
 	assetBalanceLabel = '0 BTC',
 	fiatBalanceLabel = '$0',
-	onPress = (): null => null,
+	onPress,
 	children = <View />,
 }: {
 	asset: string;
 	title: string;
 	description?: string;
 	assetBalanceLabel: string;
 	fiatBalanceLabel: string;
-	onPress?: Function;
+	onPress?: (event: GestureResponderEvent) => void;
 	children?: ReactElement | false;
 }): ReactElement => {
 	LayoutAnimation.easeInEaseOut();
 
 	return (
 		<Card>
 			<>
-				<Pressable onPress={onPress} color="transparent" style={styles.row}>
+				<Pressable style={styles.row} onPress={onPress}>
 					<View color="transparent" style={styles.col1}>
 						<HeaderIcon id={asset} />
 					</View>

src/components/AssetPickerList_deprecated.tsx

@@ -1,7 +1,7 @@
 import React, { memo, ReactElement, useMemo } from 'react';
 import { StyleSheet, Image, View, TouchableOpacity } from 'react-native';
 
-import { Caption13Up, Text01M, SubHeadM } from '../styles/text';
+import { Caption13Up, Text01M, Subtitle } from '../styles/text';
 import { SpeedFastIcon, SpeedNormalIcon } from '../styles/icons';
 import { getAssetNames } from '../utils/wallet';
 import { capitalize } from '../utils/helpers';
@@ -52,7 +52,7 @@ const Asset = memo(
 				</View>
 				<View style={styles.rightColumn}>
 					<Text01M>{capitalize(assetsInfo[name].title)}</Text01M>
-					<SubHeadM color="gray1">{assetsInfo[name].description}</SubHeadM>
+					<Subtitle color="gray1">{assetsInfo[name].description}</Subtitle>
 				</View>
 			</TouchableOpacity>
 		);

src/components/AssetPicker_deprecated.tsx

@@ -12,28 +12,28 @@ import { capitalize } from '../utils/helpers';
 const AssetPicker = ({
 	assetName = 'Bitcoin',
 	sats = 0,
-	onPress = (): null => null,
+	onPress,
 	hideArrow = true,
 }: {
 	assetName?: TAssetNetwork | string;
 	sats?: number;
-	onPress?: Function;
+	onPress?: (assetName: string) => void;
 	hideArrow?: boolean;
 }): ReactElement => {
 	const balances = useDisplayValues(sats);
 	const handleOnPress = useCallback(() => {
-		onPress(assetName);
+		onPress?.(assetName);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [assetName]);
 
 	const AssetIcon: ReactElement = useMemo(() => {
 		switch (assetName) {
 			case 'bitcoin':
-				return BitcoinCircleIcon;
+				return <BitcoinCircleIcon />;
 			case 'lightning':
-				return LightningIcon;
+				return <LightningIcon />;
 			default:
-				return BitcoinCircleIcon;
+				return <BitcoinCircleIcon />;
 		}
 	}, [assetName]);
 

src/components/Biometrics.tsx

@@ -60,10 +60,9 @@ const Biometrics = ({
 
 	useEffect(() => {
 		(async (): Promise<void> => {
-			const data: IsSensorAvailableResult =
-				await rnBiometrics.isSensorAvailable();
+			const data = await rnBiometrics.isSensorAvailable();
 			setBiometricData(data);
-			authenticate(`Confirm ${data?.biometryType || ''}`);
+			authenticate(`Confirm ${data.biometryType || 'Biometrics'}`);
 		})();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
@@ -73,7 +72,8 @@ const Biometrics = ({
 		//eslint-disable-next-line react-hooks/exhaustive-deps
 		[biometryData?.biometryType],
 	);
-	const text = useCallback((): string => {
+
+	const getText = useCallback((): string => {
 		try {
 			if (!biometryData?.available || !biometryData?.biometryType) {
 				return 'Loading Biometrics...';
@@ -120,12 +120,12 @@ const Biometrics = ({
 	return (
 		<View color="transparent" style={[styles.container, style]}>
 			<TouchableOpacity
+				style={styles.container}
 				color="transparent"
 				activeOpacity={0.6}
-				onPress={authenticate}
-				style={styles.container}>
+				onPress={(): void => authenticate()}>
 				<Icon />
-				<Subtitle style={styles.text}>{text()}</Subtitle>
+				<Subtitle style={styles.text}>{getText()}</Subtitle>
 			</TouchableOpacity>
 			{children}
 		</View>

src/components/BlocksWidget.tsx

@@ -35,13 +35,10 @@ const BlocksWidget = ({
 				<View style={styles.numbers}>
 					{value && (
 						<>
-							<Text01M numberOfLines={1} styles={styles.price}>
+							<Text01M style={styles.price} numberOfLines={1}>
 								{`${value?.transacionCount} / ${value?.size}`}
 							</Text01M>
-							<Caption13M
-								styles={styles.change}
-								color="gray1"
-								numberOfLines={1}>
+							<Caption13M style={styles.change} color="gray1" numberOfLines={1}>
 								{value?.time}
 							</Caption13M>
 						</>

src/components/Button.tsx

@@ -7,17 +7,19 @@ import {
 import { View, TouchableOpacity } from '../styles/components';
 import { Caption13M, Text02M } from '../styles/text';
 import useColors from '../hooks/colors';
+import { IThemeColors } from '../styles/themes';
 
 export interface IButton extends TouchableOpacityProps {
 	text?: string | ReactElement;
-	color?: string;
+	color?: keyof IThemeColors;
 	variant?: 'primary' | 'secondary' | 'transparent';
 	size?: 'small' | 'large';
 	disabled?: boolean;
 	loading?: boolean;
 	icon?: ReactElement;
 	textStyle?: Object;
 }
+
 const Button = ({
 	text,
 	color,
@@ -67,6 +69,7 @@ const Button = ({
 	const Text = size === 'small' ? Caption13M : Text02M;
 
 	return (
+		// @ts-ignore react-native and styled-components types clashing
 		<TouchableOpacity
 			activeOpacity={0.6}
 			color={buttonColor}

src/components/Card.tsx

@@ -1,11 +1,12 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import { View, TouchableOpacity } from '../styles/components';
+import { IThemeColors } from '../styles/themes';
 
 interface ICard {
 	style?: StyleProp<ViewStyle>;
 	children?: ReactNode;
-	color?: string;
+	color?: keyof IThemeColors;
 	onPress?: () => void;
 }
 const Card = ({

src/components/ContactSmall.tsx

@@ -11,7 +11,7 @@ export const ContactSmall = ({
 	onPress,
 }: {
 	url: string;
-	onPress?: Function;
+	onPress?: () => void;
 }): JSX.Element => {
 	const { profile } = useProfile(url);
 

src/components/ContactsList.tsx

@@ -11,6 +11,7 @@ import { useSlashtags } from './SlashtagsProvider';
 import Divider from './Divider';
 import { BottomSheetSectionList } from '@gorhom/bottom-sheet';
 import { truncate } from '../utils/helpers';
+import { IThemeColors } from '../styles/themes';
 
 export const ContactItem = ({
 	contact,
@@ -45,7 +46,7 @@ export const ContactItem = ({
 				/>
 				<View style={cstyles.column} pointerEvents="none">
 					<Text01M
-						numerOfLines={1}
+						numberOfLines={1}
 						style={size !== 'small' ? cstyles.name : {}}>
 						{name}
 					</Text01M>
@@ -73,7 +74,7 @@ const ContactsList = ({
 	onPress: (contact: IContactRecord) => void;
 	searchFilter?: string;
 	includeMyProfile?: boolean;
-	sectionBackgroundColor?: string;
+	sectionBackgroundColor?: keyof IThemeColors;
 	stickySectionHeadersEnabled?: boolean;
 	bottomSheet?: boolean;
 }): ReactElement => {

src/components/LightningChannel.tsx

@@ -26,8 +26,8 @@ const LightningChannel = ({
 	const spendingTotalStyle = useMemo(
 		() => [
 			styles.bar,
+			styles.barLeft,
 			{
-				justifyContent: 'flex-end',
 				borderTopLeftRadius: spendingSize,
 				borderBottomLeftRadius: spendingSize,
 				marginRight: 1,
@@ -121,6 +121,9 @@ const styles = StyleSheet.create({
 		flex: 1,
 		flexDirection: 'row',
 	},
+	barLeft: {
+		justifyContent: 'flex-end',
+	},
 });
 
 export default memo(LightningChannel);