Live Demo 👉 All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13
Use Cases
Pricing
Blog
×
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☰
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.
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.
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:
!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.
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:
inheritedTextStyles
React.Context
React.Context
value to make the value available in leaf componentsText
componentLet’s get to work!
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:
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:
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.
!important
Implementing !important
requires a bit more complexity, but is certainly doable. We’ll need to improve our logic to:
!important
or not:!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!
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.