Expanding Filter Rows
A dark "Filters" sheet with five rows, each a 60 pt rounded bar with a grey icon and label at the left and its value at the right: "Dates" with "18 Dec 2024", "Friends attend" with a small column of friends' pictures that take turns and "12+", "Time" with "7:00 pm", "Genres" with "Afrobeat, Bluegrass +6" and "Price" with "All price"; at the bottom "Reset all" and a blue pill "Continue with 4" over a fade that rows slide under. A tap on Time springs the row open, pushing the rows below it down, into a darker well with two options, "Single time" and "Time range", an analog clock and a wheel of times in half-hour steps: turning the wheel turns the clock's hands, and "Time range" slides a second wheel in, points the short hand at the start and the long one at the end, and draws a blue arc between them along the rim. A tap on Genres closes Time and opens two facing lists that lie on the rims of two big wheels, so the names tilt and fade away from the middle: the chosen genres on the left, the others with blue rings on the right; each list turns under the finger and a tap moves a genre across. The other rows change value on a tap, and the number on the button counts the filters that are set.
Is this your design? Ask for a correction or removal
React Native · Expo SDK 52+, TypeScript
✦ If the result drifts from the video, tell your agent what looks different and how it should look. A short correction usually closes the gap.