Propagating text theme through context and platform specific modules

[trentcharlie]

Hello, this is such a lovely idea and I am excited about the prospect of having a library similar to shadcn/ui in react native/expo. My team and I have been doing something similar to create UI components and style system for our app and there are a few ideas that I would like to propose:

Composable text styles
One main challenge that we ran into is how to handle the lack of text style inheritance in react native since some components such as buttons greatly benefit from this on the web to easily specify the font style in the component.
From what I have seen from various OSS projects attempting to create shadcn equivalents, the approach seems to be either:

• ButtonText or Button.Text component: While this is straightforward, I find having to use different text components for different components a bit inconsistent
• textClass. This is way less flexible and becomes a problem when you consider various combinations like: text button, text+icon button, etc
  I've conceptualised the following idea and would like to see what you think

import * as React from 'react'
import { ElementRef } from 'react'
import { Text as RNText, TextProps } from 'react-native'

import { cn } from '@/lib/utils'

type TextContextValue = { className?: string }

export const TextContext = React.createContext<TextContextValue>({})

export const useTextContext = () => React.useContext(TextContext)

const Text = React.forwardRef<ElementRef<typeof RNText>, TextProps>(
  ({ className, ...props }, ref) => {
    const context = useTextContext()
    return (
      <RNText
        ref={ref}
        {...props}
        className={cn(
          'text-foreground text-sm font-normal',
          context.className,
          className
        )}
      />
    )
  }
)
Text.displayName = 'Text'

export { Text }

This Text component would be used throughout the app and for components such as buttons where custom base text style is needed, one only need override the TextContext value.

Platform specific modules
I was very excited when I learnt of the ability to specify platform.tsx to create platform specific modules. Since expo web has nearly full support for shadcn/ui and similar web UI libraries, I think it would be a nice pattern if platform specific modules could be leverage to have near parity with the shadcn library for web while ensuring the equivalent native modules also offer as much support as possible while maintaining a similar API

I'd be glad to hear your thoughts on these. I'd also be glad to be able to contribute to this amazing library

[mrzachnugent]

Thanks for bringing this up.

I am trying to step away from textClass towards ButtonText type components. I understand that it might not be intuitive so I see how there could be improvements.

I did add Typography which I feel is close to what you are suggesting. The idea behind having ButtonText components is that changing the variant in the Button component will change the styling of the ButtonText component.

What you're suggesting would be that the Button component provides that className to a new TextContext.Provider instead of passing the variant information.

Interesting. I will definitely look into that.

Thank you

[mrzachnugent]

For the Text components, I pretty much have the same implementation. From the react-native docs, I don't see why they use accessibilityRole since "role communicates the purpose of a component and has precedence over the accessibilityRole prop."

For the other elements, it seems like its mostly just adding a role so I don't think its necessary to add another lib for that. I'll consider adding them for copy/paste purposes.

For the inherit className, I would love to see how you would implement it.

[trentcharlie]

Okie, got it. I'll do some draft, test it out and then share to see what you think.

[trentcharlie]

Btw what's the difference between ui and universal-ui directories?

[mrzachnugent]

The goal is to make universal-ui (works on native and the web). So eventually all ui components will be replaced by universal-ui. The ui folder is more of a the first draft with little to no care about the web components.

The universal-ui uses code from rn-primitives and will eventually become its own npm package and be removed from this repo. So importing rn-primitives code into your own repo might be a little premature since you'll be able to download the package from npm.

[trentcharlie]

That clears it up. I was a little confused by having two different implementation for each component and I wasn't sure which one is the main ones.

[trentcharlie]

I can work on it if you don't mind then I can share implementation details and if you like the direction it's heading I can make it into a PR

[mrzachnugent]

Sure you share the implementation details then make a PR

[mrzachnugent]

@trentcharlie
I tried it out and it works well. I made a PR if you want to look at it.

#23

[trentcharlie]

I've looked at the implementation and it's looking great. Pretty much similar to my approach and I think it's now easier for users to use one Text component everywhere than having to remember when to use the main Text input vs when to use component-specific text components

[trentcharlie]

Have you checked whether the other typography components get correctly rendered as their html equivalents? I think one of the goals of @expo/html-elements is to have the correct semantic html element such as h1 rendered on web. I haven't checked how they ensure that but I am guessing that it's probably the role and aria labels.

[mrzachnugent]

Yeah exactly, that's how react-native-web works for deciding which element is rendered. For example, a text element with a role of heading and an aria-level="2" will result in rendering an <h2> on the web. Touchables are divs by default and you need to add a role of button to have it be a button on the web.

[mrzachnugent]

Thank you for your suggestion! It is now merged: cfec919

Feel free to open a different discussion for improvements to web stuff like some of the features @expo/html-elements offers.

[trentcharlie]

Thank you