I'll try to keep it short this time: I redesigned Breathly's UI and architecture from the ground up to make it easy to implement many of the requests I got in the past. I'm talking about things like pure OLED theme, being able to use decimals in the exercise step lengths, adding white noise, and so on.
From a technical standpoint, I moved Breathly to Expo. This change should make it easier to update to major versions of React Native.
Check out updated README.md for more info!
New stack
Expo, expo, expo. And several expo-related-libraries like expo-haptics, expo-keep-awake, etc. I'm so happy I can finally use these kind of things without wasting hours tuning them on the native side (check the previous DEVLOG entries for examples of what I mean).
I ditched my custom routing solution for React Navigation (which is pretty good nowadays!).
I'm using NativeWind to style the app. I love Tailwind and NativeWind worked really well for me so far.
I replaced the messy React Context with Zustand. I'm mainly using it to store and persist the user customizations.
Quirks and issues
This ancient React Native bug is still alive: in release mode on iOS the starry background was mistakenly defaulting to resizeMode=”cover” even if I explicitly set it to resizeMode=“repeat”. Had to edit the image to solve it.
On Android, animating the opacity of images with the native driver sometimes causes a flash of the image even when completely transparent. This is also an old issue that I’ve been solving for ages with this ugly workaround.
Transparent Android navbars are cool but are wonky on Expo/RN. To make them work you must set their background to a dumb value like "rgba(0, 0, 0, 0.002)" ("transparent" or hex vals don’t work). Also, the transparency breaks when the app transitions from the background to the foreground. I'm manually forcing the transparency back by checking the appState and avoiding race conditions with ugly timers/next-ticks but it's inconsistent and you can still see it flash a bit. And it also makes the splash screen jump a bit because the navigation bar is hidden while the splash screen is being shown 🙄.
I enjoyed using NativeWind on this project. I only had a couple of issues with useColorScheme returning stale data but I patched it manually (see patches/nativewind+2.0.11.patch). I noticed it’s being solved in the next version (v3) anyway.
I'm back! With a huge update.
I'll try to keep it short this time: I redesigned Breathly's UI and architecture from the ground up to make it easy to implement many of the requests I got in the past. I'm talking about things like pure OLED theme, being able to use decimals in the exercise step lengths, adding white noise, and so on.
From a technical standpoint, I moved Breathly to Expo. This change should make it easier to update to major versions of React Native.
Check out updated README.md for more info!
New stack
expo-haptics,expo-keep-awake, etc. I'm so happy I can finally use these kind of things without wasting hours tuning them on the native side (check the previous DEVLOG entries for examples of what I mean).Quirks and issues
resizeMode=”cover”even if I explicitly set it toresizeMode=“repeat”. Had to edit the image to solve it.Animated.sequence+Animated.loopto work correctly together with animation using the native driver. I’m still using my own little util as a workaround (src/utils/loop-animations.ts)."rgba(0, 0, 0, 0.002)"("transparent"or hex vals don’t work). Also, the transparency breaks when the app transitions from the background to the foreground. I'm manually forcing the transparency back by checking theappStateand avoiding race conditions with ugly timers/next-ticks but it's inconsistent and you can still see it flash a bit. And it also makes the splash screen jump a bit because the navigation bar is hidden while the splash screen is being shown 🙄.useColorSchemereturning stale data but I patched it manually (seepatches/nativewind+2.0.11.patch). I noticed it’s being solved in the next version (v3) anyway.