[ProgressBar] Transform with key of "translateX" must be a number

[switz]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

 ERROR  Invariant Violation: Transform with key of "translateX" must be a number: {"translateX":"-100%"}

This error is located at:

        <MotiProgressBar color="#fff" containerColor="#666" progress={0.3} />

Expected Behavior

This is from moti's library so I would expect it to support '-100%'

Steps To Reproduce

import MotiProgressBar

        <MotiProgressBar color="#fff" containerColor="#666" progress={0.3} />

Versions

- Moti: "^0.25.3",
- Reanimated: "~3.3.0"
- React Native: "0.72.1"

Screenshots

No response

Reproduction

It's as simple as importing the component, nothing else

[nandorojo]

didn’t even remember this was imported. it was just a prototype i was working on, not meant for public use necessarily

[nandorojo]

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

[switz]

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

[nandorojo]

i'm honestly not sure...it's absurd that they have this rule

[iykazrji]

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.