Defining a Base Component for useDeviceContext(tw)

[christianbauer1]

According to the docs I should use the useDeviceContext(tw) hook at the root of any component I want to use breakpoints and dark mode. Since I am using twrnc in every component I want to know if there is a way to create a base component in react native which implements useDeviceContext(tw) and inherits its value to every component which extends this base component. I don't want to declare this hook every time I create a new component.

Maybe something like:

// Base Component 
import { View } from 'react-native'
import React from 'react'
import tw from '../../../tailwind'
import { useDeviceContext } from 'twrnc'

export const Base = (props: BaseProps) => {
  **useDeviceContext(tw)**

  const { children } = props

  return (
    <View>
      {children}
    </View>
  )
}

// Child component
import {
  Text as DefaultText,
  TextProps as DefaultTextProps,
} from 'react-native'
import React from 'react'
// import tw from '../../../tailwind' // no more need to import this
// import { useDeviceContext } from 'twrnc' // no more need to import this

export interface TextProps extends DefaultTextProps {
  className?: string
}

// How can I extend the new Text Component with the BaseComponent?
export const Text = (props: TextProps) => {
  // useDeviceContext(tw) // Not necessary, because defined in Base!

  const { className, children, ...otherProps } = props

  return (
    <DefaultText style={tw.style(className)} {...otherProps}>
      {children}
    </DefaultText>
  )
}

[jaredh159]

I think you're misunderstanding how the hook works. If you call it once, at the root of your component hierarchy, the tw function will have the dynamic app context anywhere and everywhere it is used throughout the app. There's no need to call it multiple times, or from every component.

[christianbauer1]

I tried that at the beginning, where I called the hook in App.tsx like you are doing in the docs. But breakpoints and dark mode wasn't working in screens and components. When I call the hook in every component, it starts working. That's why I am asking this question. I will try to recreate the problem and open an issue for that. Thanks for you answer :-)