Looking for documentation on gluestack-ui with NativeWind (alpha) version? Refer to this link.

Incremental Adoption

Incremental adoption is a strategy for implementing changes gradually instead of all at once. It allows for a smoother transition and minimizes disruption to existing systems and processes. By taking small steps and making incremental improvements, organizations can mitigate risks and ensure that the changes are well-received by stakeholders. This approach is particularly useful for complex projects or when there is resistance to change.

Some Pre-Requisites:

If you are building a Web-only app:

  • Install React Native Web
    • npm install react-dom react-native-web
    • For build-time optimizations, install the babel plugin as well - npm install --save-dev babel-plugin-react-native-web
  • If it’s a typescript project install React Native types as well - npm i @types/react-native
  • Install @gluestack-ui/themed and follow the steps mentioned in the Docs according to your use case.

If you are building a universal app:

  • Install @gluestack-ui/themed
    • Follow these steps if you are using Expo
    • Follow these steps if you are using React Native Bare App.

How to incrementally add @gluestack-ui/themed to your Project?

Suppose you have a project that is already deployed on production and you are using a component library named X-Components. Now, since your app/website is becoming popular you want to provide a smooth and fast experience to all your users, but you want to start today and gradually update by keeping on improving your app.
Don’t worry, we’ve got your back! All you need to get started is 4 steps-
  • Install all the prerequisites (Which most probably you already did).
  • Create a config file named gluestack-ui.config.ts and export your config from there.
  • Use GluestackUIProvider and wrap the root of your app.
  • Now you can replace your components that you were importing from X-Components, with components from @gluestack-ui/themed
That’s it!
Similarly, when needed you can replace the components from X-Components with components from @gluestack-ui/themed. By following this approach, you can incrementally adopt @gluestack-ui/themed and improve your app step by step.

What if you had some customizations in older components?

If you had made customizations to the older components from X-Components or the design from X-Components is completely different from @gluestack-ui/themed, you can still incorporate those customizations into the new components from @gluestack-ui/themed. The theming capabilities of @gluestack-ui/themed allow you to customize the appearance of the components to match your specific requirements.
To customize your theme, please follow the steps mentioned in the docs.