reanimated-arc icon indicating copy to clipboard operation
reanimated-arc copied to clipboard

How to change width and height of ReanimatedArcBase?

Open Jalson1982 opened this issue 4 years ago • 3 comments

Hello, thank you for awesome job you do with this. I have a question. I can not change the size of the ReanimatedArcBase. Can you maybe help me with it?

Jalson1982 avatar May 10 '20 17:05 Jalson1982

It should be possible by changing the diameter prop. However this prop cannot be animated

jayu avatar May 10 '20 18:05 jayu

Here is my component:

        <Reanimated.Code
          exec={Reanimated.call([arcAngle.current], ([value]) => {
            setText(`${Math.round((value / 360) * 100)}%`);
          })}
        />
        <ReanimatedArcBase
          color={colors.lightGray}
          diameter={200}
          width={10}
          arcSweepAngle={360}
          lineCap="round"
          rotation={0}
          style={{position: 'absolute'}}
        />
        <ReanimatedArcBase
          color={colors.skyBlue}
          diameter={200}
          width={10}
          arcSweepAngle={arcAngle.current}
          lineCap="round"
          rotation={0}
          style={{position: 'absolute'}}
        />

If I set diameter like 100 it shows half of loader.

Jalson1982 avatar May 10 '20 20:05 Jalson1982

You can change the diameter, but if you change the diameter, you have to reload the app for it to take place, so I think this means it can't be dynamic.

aprilmintacpineda avatar Oct 28 '20 09:10 aprilmintacpineda