Skip to main content

Installation

There are two ways to go about installing Abyss - either by creating a new Abyss app or by adding Abyss to an existing application.

The recommended way to get started with Abyss is by using create-abyss-app. Go to our tutorials to get started!

Advantages​

  • Zero Configuration Setup
    • All tools are already configured that are essential for React development. Tools like Webpack (for bundling your code) and Babel (for using modern JavaScript features).
  • Easy To Use
    • You can start developing and see those results immediately.
  • Optimized Build Output
    • Provides optimized production builds out of the box, including minification, concatenation, and efficient loading (e.g., code splitting).
  • Community and Support:
    • Many teams are already using the create-abyss-app, it offers significant support, regular updates, and a large number of resources for troubleshooting.

Existing Application​

For teams that want to use Abyss web within an existing React framework (i.e. NextJs) or are unable to migrate their existing application to a create-abyss-app you can still use Abyss within your application.

Peer dependencies​

Please note that react and react-native are peer dependencies, meaning you should ensure they are installed before installing Abyss.

"peerDependencies": {


   "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
   "react-native": ">=0.63.0 <1",
   "react-native-safe-area-context": ">=3.0.0",
   "react-native-screens": ">=2.0.0",
   "react-native-svg": ">=12.0.0"
   "@react-navigation/bottom-tabs": ">=5.0.0",
   "@react-navigation/native": ">=5.0.0",
   "@react-navigation/native-stack": ">=5.0.0",
},

Install Abyss Mobile​

To add Abyss mobile to an existing application, first install the Abyss dependencies:

npm install @uhg-abyss/mobile

Then, wrap your application root component with ThemeProvider. The ThemeProvider enables global theming for your application, with the option to customize or rely on the default styles of Abyss components. Utilizing React's context, it distributes your theme to all nested components.

import { ThemeProvider } from '@uhg-abyss/mobile/ui/ThemeProvider';


const theme = createTheme('uhc');


function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

Upgrading Abyss​

Abyss releases New Versions on a biweekly basis. For further details, refer to our Versioning Guide. Benefits to staying current with the latest version of Abyss include:

  • Adhering to Brand Guidelines
    • Align with the latest branding guidelines, ensuring your application maintains a consistent look and feel with the overall brand identity.
  • Enhanced Security
    • Address vulnerabilities and security enhancements to protect your application against emerging threats.
  • Improved Accessibility
    • As accessibility standards evolve, Abyss updates provide enhancements and fixes that help ensure your application is accessible to all users, including those with disabilities.
  • Access to New Components Features
    • Gain access to new components and features that can enrich the user experience and offer new functionality for your application.
  • Bug Fixes
    • Addresses defects that improve the stability and performance of your application.
  • Efficient Upgrades and Minimal Regression Testing
    • Staying updated with the latest version simplifies the upgrade process and minimizes related regression testing efforts.

How To Upgrade Abyss​

You can upgrade Abyss by running the following command in the root of your application:

npm install @uhg-abyss/mobile@latest
yarn add @uhg-abyss/mobile@latest
Table of Contents