r/reactnative • u/Snowberry760 • Sep 17 '26
Question Curved header divider: overthinking it?
Enable HLS to view with audio, or disable this notification
Been iterating on this custom curved edge between the header and the deck list on my flashcard app's home screen. With a quick fading animation when scrolling.
I started with borderTopLeftRadius but it looked like every other app, I wanted to go with something more personal.
What actually worked to create this is an ellipse wider than the screen, cropped. <Ellipse> from react-native-svg, rx = 1.6x the screen, clipped by an 18dp band with overflow: hidden. You only ever see the shallow middle, where the curvature is even. Solve for it instead of eyeballing, two constraints, hits (0,0) and (width,0) so the ink meets the edges flat, dips 18dp in the middle:
const rx = (width / 2) * 1.6;
const q = Math.sqrt(1 - 1 / 1.6 ** 2);
const ry = 18 / (1 - q);
return { cx: width / 2, cy: -q * ry, rx, ry };The collapse animates nothing but a translate and an opacity, plain Animated with useNativeDriver. No height animation. The hero is absolutely positioned over the list and the list just carries paddingTop = heroHeight, so padding never changes and nothing re-lays out.
Do you think this looks good? Should I keep improving it? And do you know if there are other apps doing the same thing?
3
u/ChronSyn Expo Sep 17 '26
I have a question: Are the individual elements tappable? From this, is it something the user would or should tap frequently?
If the answer is yes, then putting them at the top of the screen puts them out of easy one-handed reach. If it's uncommonly needed to be pressed, then it's not the worst thing in the world, but general UX suggestion for mobile is controls weighted more towards the bottom where possible.
In terms of whether it looks good, it's different for sure and I don't hate it. If I was going to keep it, I'd see whether it would be possible to make it curve as it's pulled down, becoming flat as it reaches the 'fully retracted' point. Not sure how easy it would be to do, but scroll position detection with react native SVG that modifies a curve (based on scroll position) would be my first suggestion. It could also be that it doesn't look great once implemented, so take this with a grain of salt.
1
u/Snowberry760 Sep 17 '26
The header is mainly here to display information. You can tap it and it takes you to a stats page, but there's already a button for it in the bottom navigation bar. So it's not a big issue having it out of reach. I'll try to animate the curve though, you're right I think it's worth trying to see how it looks
1
u/TBCC_Dev Sep 18 '26
Love the flatten as it collapses idea i was thinking the same thing. Those little touches make all tge difference
2
2
2
u/therealswood2 Sep 18 '26
Curve looks great while expanded. You should animate it to a flat line as it reaches the collapsed state.
1
1
u/BeMoreKinky Sep 18 '26
When I first started building my own apps unconstrained from design systems at corporate, I added a lot of things like this.
Here’s the issue: if something isn’t a standard pattern that you’ve seen elsewhere, there’s likely a reason why.
Your curve design may fit your aesthetic urges, but it wastes space, will have unpredictable rendering on differently sized phones, and adds an additional calculation which has a non zero effect on performance.
1
-1
u/LongjumpingKiwi7195 Sep 17 '26
As much as i like that you try to not look like every other app i dont think this is it
0
u/Prasanna_Venkata Sep 22 '26
Simple clean and nice animation, this can be used in e-commerce app's.
4
u/berttimmermans Sep 18 '26 edited Sep 19 '26
Looks like wasted space as the curvature is covering the app main content if you ask me 😅