Moved control bar into it's own component and fixed itslayout on mobile

2023-11-26 23:12:52 +01:00
parent d2aca488ad
commit 6839cda5b8
3 changed files with 209 additions and 12 deletions
@@ -14,20 +14,20 @@ const StarProgress = (props: StarProgressProps) => {
 	return (
 		<View
 			style={[
-				props.style,
 				{
 					position: 'relative',
-					flex: 1,
 					maxWidth: 600,
-					justifyContent: 'center',
+					display: 'flex',
+					flexDirection: 'row',
+					alignItems: 'center',
 				},
+				props.style,
 			]}
 		>
 			<Progress
 				color={'#6075F9'}
 				style={{
-					position: 'absolute',
-					width: '100%',
+					flex: 1,
 				}}
 				value={props.value}
 				max={props.max}
@@ -42,8 +42,8 @@ const StarProgress = (props: StarProgressProps) => {
 						style={{
 							position: 'absolute',
 							left: `${(step / props.max) * 100}%`,
-							top: '45%',
-							transform: 'translate(-50%, -55%)',
+							// top: '50%',
+							// transform: 'translate(-50%, -55%)',
 						}}
 					/>
 				);