I'm creating analog watch in react native with react-native-svg. I've managed to create the watch but I'm having issues with aligning the watch numbers to the hour marker and make the space even between the markers and numbers. Here's an example
Here's my code for creating the hour marks and the watch numbers
{/* Hour marks */}
{Array.from({ length: 12 }).map((_, index) => {
const angle = (index * Math.PI * 2) / 12;
const x1 = radius + Math.sin(angle) * (radius - verticalScale(20));
const y1 = radius - Math.cos(angle) * (radius - verticalScale(20));
const x2 = radius + Math.sin(angle) * radius;
const y2 = radius - Math.cos(angle) * radius;
return (
<Line
key={`hour-mark-${index}`}
x1={x1}
y1={y1}
x2={x2}
y2={y2}
stroke={'#BEBEBE'}
strokeWidth={2}
/>
);
})}
{/* Numbers */}
{Array.from({ length: 12 }).map((_, index) => {
const angle = ((index + 1) * Math.PI * 2) / 12;
const x = center + Math.sin(angle) * (center - verticalScale(40));
const y = center - Math.cos(angle) * (center - verticalScale(50));
return (
<SvgText
key={`number-${index}`}
x={x}
y={y}
fill={'#515151'}
fontSize={`${verticalScale(29)}`}
textAnchor='middle'
>
{index + 1}
</SvgText>
);
})}
