Filipe filipef101

Platform Colors and Dynamic Colors, easy dark mode theming in react native

We're gonna see how we can implement dark-light theming on any react native app, looking at an approach that can be very simple, and non intrusive.

For those familiar with appearance based theming, you likely seen/used implementations that rely on hooks, context etc. (useColorScheme etc)

The goal of this article is to show how we can do the same, differently, an unique approach levaraging the core PlatformColor and DynamicColorIOS API's!

Let's start with DynamicColorIOS

My Software Development Toolbox

Software development is an ever-evolving field, and as a professional who works with mobile app development for iOS and Android using React Native, I am constantly exploring more efficient ways to do my job. Here, I'd like to share some indispensable tools that help me streamline my work and boost my productivity.

Raycast

My go-to tool instead of Spotlight, an enhanced productivity booster and, in my opinion, a step above Alfred. -Awesome extensions, clipboard history out-of-the-box

You can use translate your messages:

I18n.t("some.scoped.translation");
// or translate with explicit setting of locale
I18n.t("some.scoped.translation", {locale: "fr"});

You can also interpolate values:

	const useConstructor(callBack) => {
	const [hasBeenCalled, setHasBeenCalled] = useState(false);
	if (hasBeenCalled) return;
	callBack?.();
	setHasBeenCalled(true);
	}