DreamFund

So much progress.

I added a small script to generate felt variations for hue variations every 10deg, which improves app loading time. I’m still trying to optimize the loading of so many assets, but it seems faster than applying a hue transformation on tons of elements in real time.

I added a card carousel element (see image) and successfully added some card to it. Probably not the final form, but it seems pretty good for now.

Another huge improvement was implementing my own tab bar. Though it appears a little off–as I’m still working out the kinks of the (+) icon being set up a bit, I think it looks better than the plain white rectangle I previously had. Still working on making it glide smoothly though, I’m looking into some animation libraries and grabbing them.

Tried implementing themes too, but it seems to early to do so. I ended up writing 3 different versions and hated them all. I refactored lots of code unneccassarily, so I just reverted a lot of the changes.

Overall lots done, hopefully going to finish the rough draft of the app today!

I just finished adding the threaded border around my app cards. Though it looks simple, it was surprisingly difficult to add. React Native seems to have a longterm bug (an issue for it is present on github) where rounded corners alongside a dashed pattern for the border css property of an element breaks. It just becomes a solid-lined square.

So the only solution and workaround, as this was vital to its look, was to use svgs. So I used an svg rect with all the attributes I needed and molded it to the shape. I spent a solid few hours debugging this, as it wouldn’t show. Finally, I found out that Tamagui’s view element does not seem to initialize with a width nor height, meaning it would initialize an element holder with those attributes set to undefined. I also had incorrectly reffered the attributes as .w and .h instead of their lengthier counterparts.

In summary, it was a hard, but very crucial experience, learning to be careful with mixing on library elements and workarounds for things that don’t exist.

I finished adding a small tab navigation ui to my app. It took a while to figure out how to link tamagui with expo, but after a few tutorials online (very elusive) I finally found out how to set it up. Its as simple as running npx create-expo-app@latest my-app and then npm install tamagui @tamagui/config. I actually switched to using expo-stack, but then ultimately changed a lot of files.

I also learned how to make my own components, creating a felt-like texture, and then adding a ‘raised’ element that I could use. There is a huge issue though, which has plagued me for the past 2ish hours: expo go, or at least within my speicific app, won’t render boxshadows that are out-set. You can see in the screenshot that the corners are the only part that are rendered. Using online Snack + Expo Go demo yields a working version, but it won’t work on mine right now.

Tomorrow ill try prebuilding and see if expo-go is the issue. Maybe a true apk will solve it. But thats a temporary fix, as I need fast changes to rapidly learn and iterate.

EDIT: Holy moly I did it. Sometimes a nap is the solution. The issue is that my felt custom element didn’t have the corner radius and overflow attributes set. For some reason–I assume because I’m tiling the bg–it prevented the boxshadow from rendering.