ryer.io

Navigating Distractions & Implementing Drop Shadows in React Native

#react-native #android #svg #debugging

TL;DR

  • Personal interruptions can impact productivity, such as impromptu singing or helping friends.
  • Implemented drop shadows on Android using React Native 0.80; found workarounds due to SVG limitations.
  • Applied shadows using a wrapper view due to unavailability of filter for SVGs in React Native.
  • Debugging Next.js app parse error due to module type misconfiguration.

Some days, I find my productivity takes a hit, whether it’s from spontaneous singing or being there for a friend with heavy stuff on their mind. Today was one of those days. Nonetheless, I made some progress on a pesky issue related to drop shadows in React Native on Android.

Development Insight: Drop Shadows on Android

With the release of React Native 0.80, I could finally apply drop shadows on Android images using the new filter-based drop shadow. Before, I was limited to using elevations across the app, but found this unsuitable for images, particularly due to visual consistency.

Here’s what I did:

  1. Update Theme System: Implemented shadows using the filter method, a feature previously unsupported.
  2. SVG Wrapper: Given that React Native SVG doesn’t yet support the new architecture, I wrapped SVGs that need shadows in a view component. This enabled the use of Android’s filter style prop.
  3. Conditional Logic: Applied these changes only for Android platforms to maintain a consistent user experience across devices.
  4. Testing: Ran these on different user profiles to verify outcomes. Minor issues required logging out and back in to properly validate.

Troubleshooting a New Issue:

While working, I hit a snag with my Next.js app when attempting to parse a TypeScript file. An unexpected token error at the very beginning suggested a configuration misalignment—likely involving module settings. Next steps will involve diving deeper into Next.js’s module handling to fix this parse problem.

This exploration was a day of highs and lows—balancing coding with life’s unpredictability, but progress was made and bugs remain to be squashed. I’ll report back once the Next.js configuration issue is resolved.