Comments (4)
Thanks for the tip! However, it seems that removing the animation prop doesn’t actually remove the animation, I just bumped the tamagui patch version from 1.108.3 to the latest, 1.108.4 and tried again.
To summarize what I've seen, there appears to be two issues here:
- We are unable to remove the animation off of the progress bar, regardless of if we provide animation prop as null, or do not provide animation at all, to either the indicator or the progressbar component.
- We are seeing the progress animate from right to left, even when explicitly using
maxValue
as 100, and a whole number value between 0-100
I'd appreciate if there's anything else you think I should try, and I'm happy to provide more info as well.
from tamagui.
@hackily you kinda have to multiply it by 100. it looks and is buggy if you use values which are lower than 100.
if you set your progress to 1 and max to 100, it properly shows the progressbar.
if you have like progress 1 and max10, you get the bug there.
@natew needs to fix the bug with with value and max range which calculates the diff from them and not only at 100 or something.
<Progress size='$1.5' value={1} backgroundColor='#f4f4f5' max={10}>
<Progress.Indicator animation='bouncy' backgroundColor='#18181b' />
</Progress.Indicator>
![Bildschirmfoto 2024-08-14 um 18 57 52](https://private-user-images.githubusercontent.com/8994411/357920770-aa0e18da-298c-4057-ac9b-40f2558548ef.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUyMjYzNTQsIm5iZiI6MTcyNTIyNjA1NCwicGF0aCI6Ii84OTk0NDExLzM1NzkyMDc3MC1hYTBlMThkYS0yOThjLTQwNTctYWM5Yi00MGYyNTU4NTQ4ZWYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDFUMjEyNzM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDM2YzFlZDEwNWI2MDYxOWZkODU3MjY0Nzk2MzAxNzE1OWIyYzkzNGJhMzdjYjkwN2RlNGI1ZmQyY2E3MTUzOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.SUm_si2ufeTS0bkz0cW1aCyDaDnRDJ33oAQ3UjguF7Y)
<Progress size='$1.5' value={1} backgroundColor='#f4f4f5' max={100}>
<Progress.Indicator animation='bouncy' backgroundColor='#18181b' />
</Progress>
![Bildschirmfoto 2024-08-14 um 18 58 41](https://private-user-images.githubusercontent.com/8994411/357921075-7d8cc7d3-9c0f-46ba-a0b9-0291cea9993d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUyMjYzNTQsIm5iZiI6MTcyNTIyNjA1NCwicGF0aCI6Ii84OTk0NDExLzM1NzkyMTA3NS03ZDhjYzdkMy05YzBmLTQ2YmEtYTBiOS0wMjkxY2VhOTk5M2QucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDFUMjEyNzM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTI1N2IzODg2ODg2MmU5YzRlNDYyYmU3NTNkMDY4NGUzMmI0NDM3NDk1ODE2NDI3MjY0OTk2ZDY3MmVhMTM5OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.z6MLutH0QlaHQGWPBvHLGE0EXVyD1BIuPj4xfPTUH-k)
from tamagui.
I'm not sure what you mean, the percent renders correctly, but I see a bouncing animation from right to left when I didn't want an animation.
I have the same animation if I pass a max, and even if I explicitly pass null for animation
<Progress height={10} backgroundColor="gray" value={value} max={100}>
<Progress.Indicator backgroundColor="green" animation={null}/>
</Progress>
Screen.Recording.2024-08-14.at.2.02.41.PM.mov
from tamagui.
@hackily ah ok, I misread a bit the post. Thought you also meant the bug with the progress indicator, not showing the right progress :D
remove the animation prop from
<Progress.Indicator backgroundColor="green" animation={null}/>
to
<Progress.Indicator backgroundColor="green" />
and it removes the bouncy animation on init.
from tamagui.
Related Issues (20)
- Popover incorrect positioning on Android HOT 1
- Slider does not work properly when used inside a FlatList (on Android) HOT 1
- Losing context when using `.styleable`
- docs: document Sheet unmountChildrenWhenHidden prop HOT 4
- Cannot drag sheet up/down when there is scroll inside (Android only)
- Animation not working on Accordion HOT 2
- Broken links on documentation compiler installation page
- Dismissing Select re-focuses full page
- Input. Ref is undefined HOT 1
- Expo Router template fails on start with `Error: createCSSVariable expected string, got: undefined` HOT 2
- Can't perform an iOS or an Android using Expo's EAS Build
- Support for Nextjs Turbopack
- [Bug]: `<Theme />` component not updating all components within provider starting at `v1.105.x` & up HOT 3
- [BUG] CSS Animations with exit/enter styles does not work
- useToastState() hook gets invoked twice HOT 1
- `tabIndex={0}` does not work for accessibility of iOS HOT 1
- Weird jumping issue with simple <Select /> on web
- Pressed state of button is active after returning from in app browser
- "Modal" Prop on Popover Obsolete, Documentation Needs Update
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tamagui.