Third-Party Component Integrations

This page provides guidance on incorporating third-party components into your gluestack-ui project. Enhance your application's functionality by seamlessly integrating external components.

Integration Steps:

  1. Step
    1
    :
    Install the third-party component's package.
  2. Step
    2
    :
    Create a wrapper component that renders the third-party component.
  3. Step
    3
    :
    Add the wrapper component to your gluestack-ui project.

Example

Install the third-party component's package

Install the third-party component's package using your package manager of choice. For example, to install the react-native-color-picker package, run the following command:
yarn add react-native-color-picker

Create a wrapper component

Create a wrapper component that renders the third-party component. For example, to create a wrapper component for the react-native-color-picker
  • Create a new directory for the wrapper component. For example, src/components/ColorPicker.
  • Create a new file for the wrapper component. For example, src/components/ColorPicker/ColorPicker.tsx for native and src/components/ColorPicker/ColorPicker.web.tsx for web.
  • Add the following code to the wrapper component file for native:
import { ColorPicker as ColorPickerComponent } from "react-native-color-picker"
export default ColorPicker = (props) => {
return <ColorPickerComponent />
}
  • Add the following code to the wrapper component file for web:
export default ColorPicker = (props) => {
return <input type="color" />
}
  • Add the following code to the src/components/index.ts file:
export ColorPicker from './ColorPicker';

Add the wrapper component to your gluestack-ui project

Add the wrapper component to your gluestack-ui project. For example, to add the react-native-color-picker wrapper component to your gluestack-ui project:
import { ColorPicker } from "../components"
import { Center } from "@gluestack-ui/themed"
export const HomeScreen = () => {
return (
<Center>
<ColorPicker style={{ height: 80, width: 80 }} />
</Center>
)
}

Styling the third-party component using gluestack-style

You can style the third-party component using the gluestack-style. For example, to style the react-native-color-picker component:
import { ColorPicker } from "../components"
import { styled } from "@gluestack-ui/themed"
const StyledColorPicker = styled(ColorPicker, {
bg: "$yellow100",
height: "$64",
width: "$48",
})
You can check the styled function from gluestack-style to style it more precisely as per needs.

Adding accessibility labels to the third-party component

You can add accessibility labels to the third-party component using the gluestack-accessibility. For example, to add accessibility labels to the react-native-color-picker component:
import { ColorPicker as ColorPickerComponent } from "react-native-color-picker"
export default ColorPicker = (props) => {
return <ColorPickerComponent accessibilityLabel={"your-label"} />
}
Edit this page on GitHub