Made in Builder

Made in Builder.io

Live Demo 👉 All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13

Blog

Home

Resources

Blog

Forum

Github

Signup

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get Started Login

☰

‹ Back to blog

react native

Implementing CSS Style Inheritance in React Native

January 2, 2023

Written By Sami Jaber

Sami Jaber is a Software Engineer at Builder.io, and the tech lead on the SDKs.

Recently, one of our users expanded their usage of Builder from their React app to their React Native app. They soon reported a rather troublesome bug: applying text styles to a button’s text did not properly work in React Native.

In this piece, we’re going to dive into this bug, and how the solution involves re-creating some of CSS’s cascading mechanisms for React Native.

The issue

Let’s assume our user is trying to render a button with a blue background and white text that says “Click Me!”.

In the React SDK, the Button component looks like this:

Given the appropriate props, this final HTML will look something like:

PS: styles actually end up in CSS classes and not as inlined `style` attributes. I am writing them as such only to simplify the code examples.

In React Native, all text context must be wrapped in a Text component (kind of like a required span). Additionally, you must use View to represent layout elements (think of it as the div of React Native). So the same button looks something like:

Which results in the following React Native output:

The issue here is that the styles are all applied to the parent View. This wouldn’t be an issue on the web, but it is in React Native. Why? Because in React Native, elements do not inherit styles from their parents!

We could manually fix this particular Button component by selectively applying text styles to the inner Text component. But we want a generalizable solution: Builder allows users to drag’n’drop their own custom components into the Builder blocks, and vice versa. Additionally, if a parent block had text styles applied, those still wouldn’t cascade down to this Text component.

While the React Native team may have very good reasons to not implement this core CSS feature, it is something that we certainly need in the Builder.io SDKs, or else our users would have to manually style every single Text block manually. We want the React Native SDK experience to be as close as possible to that of our other web-based SDKs.

Solution Overview

To implement CSS inheritance, we need to first make sure we understand it. While MDN has a great in-depth article on CSS inheritance, here’s a brief explanation:

At a high level, CSS inheritance works by climbing up the DOM tree until you find a parent node that provides a value for it. This of course also includes any values set by the node iself.

Things to note:

CSS inheritance only applies to certain styles, not all of them.
we will ignore !important (for now)

Before explaining our solution, it’s important to briefly explain how the Builder.io SDK works. Its architecture will dictate the solution we choose to implement.

SDK Architecture Overview

The Builder.io SDK exports a <RenderContent> component. The user will make an API call to Builder, fetch a JSON object that represents their content, and provide it to <RenderContent>. This component is then responsible for rendering the JSON content. Here’s an example of the JSON:

which would render HTML like this:

Internally, <RenderContent> will loop over the content.children arrays and call <RenderBlock> for each item, until all of the content is rendered.

Given that we are traversing the JSON data top-down from the root down to the leaf nodes, how would we go about implementing style inheritance in React Native?

We decided to implement it in the following way:

write logic to extract inheritable text styles from styles object
store inheritable text styles in a inheritedTextStyles React.Context
merge new styles into this context whenever a node deeper in the tree updates some of those values
use a React.Context value to make the value available in leaf components
consume that context in wrapped Text component

Let’s get to work!

Step 1 - Inherit Text Styles

First, we need to grab all inheritable styles from the styles JSON object, we receive from the Builder API. The API guarantees that these styles all map nicely to React Native (it, therefore, excludes things like CSS functions, and special units e.g. vw, vh, etc.).

Let’s implement extractInheritedTextStyles, which returns the subset of styles that we plan on passing down:

Step 2 & 3 - Create & Merge Context

An empty default context will do the trick here:

Now that we have the context and the extraction logic, we can pass styles down in the recursive RenderBlock calls. We also have to merge the new inherited text styles into the previous context passed from above. Here’s what that looks like:

Step 4 - Wrap Text

The last piece of this puzzle is to implement a component that wraps Text, and consumes these inherited text styles:

And render this inside of our Button (and any other block that renders text):

And that’s it! Now, whenever we provide text styles that ought to be inherited, they are going to be stored in this styles context that makes its way down to BaseText.

Do you remember how I mentioned that Builder customers can render their own React Native components inside of Builder content? They can also make sure the <Text> within those components is styled just like the text in Builder by importing the <BaseText> component and using it in their own code! Since the component uses a React.Context to consume the styles, there is no additional work needed on the end-user’s part.