Adding custom component in `gluestack-ui.config.ts` so it's available from `@gluestack-ui/themed`

[brsnik]

Description

Gluestack uses SafeAreaView from react-native, I want to use the one by react-native-safe-area-context. But am unable to include it as part of the config.

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

gluestack-ui Version

"@gluestack-style/react": "^1.0.56", "@gluestack-ui/config": "^1.1.18", "@gluestack-ui/themed": "^1.1.28",

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

So Gluestack uses SafeAreaView from react-native, I want to use the one by react-native-safe-area-context. How can I replace it, or create a new component that is part of gluestack-ui.config.ts?

I found the following in the docs. But it's unclear where to place it. There are virtually no examples.

How can I incorporate this:

import {SafeAreaView as _SafeAreaView} from 'react-native-safe-area-context';
export const SafeAreaView = styled(
  _SafeAreaView,
  {
    backgroundColor: '$backgroundLight100',
    _light: {
      backgroundColor: '$backgroundLight100',
    },
    _dark: {
      backgroundColor: '$backgroundDark0',
    },
  },
  {
    componentName: 'SafeAreaView',
  },
);```

[Viraj-10]

Hey @brsnik, We don't have this feature in config. If you want to change SafeArea with own component you have eject the components or pass it as prop.

for example of creating component using styled function please refer this docs.