Open switz opened 11 months ago
didnât even remember this was imported. it was just a prototype i was working on, not meant for public use necessarily
moti does support this, itâs react native that doesnât. react native throws this error even though it works. youâd need to patch RN and remove that line (which iâve done) that throws the error for no reason
hmm, if I want to use moti to create a progress bar without patching RN, do you have a recommendation?
<View className="relative h-1 w-full bg-orange-300">
<MotiView
// from={{ width: '100%' }}
// animate={{ width: '25%' }}
from={{ width: 0 }}
animate={{ width: '30%' }}
className="absolute left-0 top-0 h-full w-full bg-blue-600"
/>
</View>
I was trying to do this before I found the progress bar component, but the % widths don't seem to work.
scaleX
does work, but its transform origin is the center
and I can't figure out how to make it transform origin from the left
i'm honestly not sure...it's absurd that they have this rule
Hi @switz, handled this by getting the width of the MotiView
and using that to run my transforms, something like:
<MotiView
key={"stack-progress-bar"}
onLayout={(evt) => {
const { width } = evt.nativeEvent.layout;
setProgressWidth(width);
}}
from={{
translateX: -progressWidth,
}}
animate={{
translateX:
-progressWidth +
(progressWidth * progress.progress) /
progress.maxProgress,
}}
transition={{
type: "spring",
mass: 2,
damping: 24,
stiffness: 186,
}}
style={
style({ progressBar: { color: color ?? "white" } })
.progressBar
}
/>
It is important to make the width of the bar equal to the parent and pass an 'overflow: hidden` to the parent.
Is there an existing issue for this?
Current Behavior
Expected Behavior
This is from moti's library so I would expect it to support '-100%'
Steps To Reproduce
import
MotiProgressBar
Versions
Screenshots
No response
Reproduction
It's as simple as importing the component, nothing else