Composer - add animated bottom border

[mozzius]

• Adds an animated bottom border when content underlays it
• Tweak icons in bottom bar
• Reduce keyboard vertical offset since I was seeing a white strip on device (not in simulator though? still figuring it out)

Simulator.Screen.Recording.-.iPhone.15.-.2024-06-03.at.09.38.08.mp4

[render]

Your Render PR Server URL is https://social-app-pr-4325.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cpemirkf7o1s739kf090.

[github-actions]

Old size	New size	Diff
7.38 MB	7.38 MB	-355 B (-0.00%)

---

[haileyok]

In these cases, the preferred method seems to be to just update the SharedValue from this callback, and make hasScrolledBottom a derived value with useDerivedValue. Makes it a little easier and lets us avoid the showHideBottomBorder function all together.

[gaearon]

fwiw i remember bumping into issues with useDerivedValue in the past and having to rewrite those but i don’t remember why. so just worth checking that it works well if we switch it

[haileyok]

ooo, yea do check then. it shouldn't necessarily matter since either from the JS thread is async so if this is more reliable it seems fine, unsure if the suggestion in their docs is just for code cleanliness or if there's some other reason as well.

[mozzius]

I didn't see a way to derive a value from multiple inputs?

[haileyok]

Should just be able to use it like so, and the returned value will update once one or multiple of the shared values changes

const hasScrolledBottom = useDerivedValue(() => {
  return withTiming(
    contentHeight.value - contentOffset.value > scrollViewHeight.value ? 1 : 0,
  )
})

[haileyok]

Ahh! The height in onContentSizeChange and layout.height in onScrollViewLayout are given in 3rds, whereas the contentOffset.y is a whole number 🤯

I think if we floor the height and layout.height then just check for contentHeight.value - contentOffset.value > svHeight.value we'll get the expected result! Would explain why it works on and off since it's probably +/- 1 at every position.