Made in Builder

Made in Builder.io

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

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

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 StartedLogin

‹ 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:

  1. write logic to extract inheritable text styles from styles object
  2. store inheritable text styles in a inheritedTextStyles React.Context
  3. merge new styles into this context whenever a node deeper in the tree updates some of those values
  4. use a React.Context value to make the value available in leaf components
  5. 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.

Bonus: !important

Implementing !important requires a bit more complexity, but is certainly doable. We’ll need to improve our logic to:

  • store whether a value is marked as !important or not:
  • make sure not to override an !important value, unless we’re overriding it with another !important value:

And finally, we have to map over the object and only grab the value properties

We should now have the ability to parse and process !important styles in React Native as well (not that anyone would ever want to do that 😉)

Do you have any suggestions on how we can improve this solution? Is there anything we missed? Please share with us on Twitter!

Visually build with your components

Builder.io is a Visual CMS that let's you drag and drop to create content on your site visually, using your components.

Stop drowning in a backlog of requests - build with your whole team instead.

Try it out
Learn more

Share

Twitter
LinkedIn
Facebook

Continue Reading
Web Performance14 MIN
Optimal Images in HTML
WRITTEN BYSteve Sewell
January 26, 2023
web development9 MIN
The Tailwind CSS Drama Your Users Don't Care About
WRITTEN BYYoav Ganbar
January 25, 2023
Web Development9 MIN
Fast and Light Relative Time Strings in JS
WRITTEN BYSteve Sewell
January 24, 2023

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

PRODUCT

Features

Pricing

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

Submit an Idea

INTEGRATIONS

React

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

Shopify

All Integrations

Security

Privacy Policy

Terms of Service

By clicking “Subscribe”, I agree to Builder.io's Terms of Service and Privacy Policy.