merged JUIP-124 and solved conflicts

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed lint staged command in order to check typescript errors on commits
+- Fixed Loading component in order to work with android 7 devices
 
 ## [1.0.3] - 2023-08-24
 

src/components/Loading/LoadingSvg/index.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {create} from 'react-test-renderer';
+import LoadingSvg from './index';
+
+describe('LoadingSvg component', () => {
+	it('render correctly', () => {
+		const {toJSON} = create(<LoadingSvg size={20} />);
+
+		expect(toJSON()).toBeTruthy();
+	});
+});

src/components/Loading/LoadingSvg/index.tsx

@@ -0,0 +1,37 @@
+import Svg, {Path} from 'react-native-svg';
+import React from 'react';
+import {Animated, ViewProps} from 'react-native';
+import {white} from '../../../theme/palette';
+
+interface IanimatedView extends Animated.AnimatedProps<ViewProps> {
+	size?: number;
+	color?: string;
+}
+
+const LoadingSvg = ({size, color, ...props}: IanimatedView) => {
+	return (
+		<Animated.View {...props}>
+			<Svg x="0px" y="0px" width={size} height={size} viewBox="0 0 163 163">
+				<Path
+					d="M134.1,136.4c-30.3,29.1-78.5,28-107.5-2.3c-29.1-30.3-28-78.5,2.3-107.5s78.5-28,107.5,2.3"
+					fill="none"
+					stroke={white.dark}
+					strokeWidth="10.5546"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+				<Path
+					id="path-color"
+					d="M78.4,5.5c42-1.7,77.4,30.9,79.1,72.9c1.7,42-30.9,77.4-72.9,79.1c-42,1.7-77.4-30.9-79.1-72.9"
+					fill="none"
+					stroke={color}
+					strokeWidth="10.5546"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</Svg>
+		</Animated.View>
+	);
+};
+
+export default LoadingSvg;

src/components/Loading/index.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import {create} from 'react-test-renderer';
-import {Animated, Text, View} from 'react-native';
+import {Text, View} from 'react-native';
 import Loading from './';
+import {Path} from 'react-native-svg';
 
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
@@ -57,12 +58,10 @@ describe('Loading component', () => {
 					children={validProps.children}
 				/>
 			);
-			const ViewComponent = root.findByType(Animated.View);
-			const {borderBottomColor, borderLeftColor, borderRightColor} = ViewComponent.props.style;
+			const PathComponent = root.findAllByType(Path);
+			const {stroke} = PathComponent[1].props;
 
-			expect(borderBottomColor).toBe(defaultProps.color);
-			expect(borderLeftColor).toBe(defaultProps.color);
-			expect(borderRightColor).toBe(defaultProps.color);
+			expect(stroke).toBe(defaultProps.color);
 		});
 
 		it('duration when it is not exist', () => {

src/components/Loading/index.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useRef, FC} from 'react';
-import {StyleSheet, View, Animated, Easing, ColorValue, ViewStyle} from 'react-native';
-import {primary, white} from '../../theme/palette';
+import {StyleSheet, View, Animated, Easing, ViewStyle} from 'react-native';
+import LoadingSvg from './LoadingSvg';
+import {primary} from '../../theme/palette';
 
 interface Params {
 	duration: number;
@@ -9,7 +10,7 @@ interface Params {
 }
 interface Props {
 	isLoading: boolean;
-	color?: ColorValue;
+	color?: string;
 	size?: number;
 	duration?: number;
 	children?: React.ReactNode | null;
@@ -49,12 +50,8 @@ const Loading: FC<Props> = ({
 			position: 'absolute',
 			width: size,
 			height: size,
-			borderTopColor: white.dark,
-			borderLeftColor: color,
-			borderRightColor: color,
-			borderBottomColor: color,
-			borderRadius: size / 2,
-			borderWidth: 3.5,
+			justifyContent: 'center',
+			alignItems: 'center',
 		},
 	});
 	const animationSpinnerStyle = {
@@ -84,7 +81,7 @@ const Loading: FC<Props> = ({
 
 	return (
 		<View style={[styles.container, style]} {...props}>
-			<Animated.View style={{...styles.spinner, ...animationSpinnerStyle}} />
+			<LoadingSvg style={[styles.spinner, {...animationSpinnerStyle}]} size={size} color={color} />
 			{children}
 		</View>
 	);