Skip to main content

Getting Started

New Application​

Use React Native's setup documentation to create a boilerplate application, then proceed to the next section to install Abyss.

Existing Application​

For teams that want to use Abyss Mobile within an existing React Native installation 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.

Note

Minimum supported versions may change over time, including the React Native version. See the Versioning Guide to learn more.

"peerDependencies": {
  "react": "^18.0.0 || ^19.0.0",
  "react-native": ">=0.81.0 <1",
  "react-native-safe-area-context": ">=3.0.0",
  "react-native-screens": ">=2.0.0",
  "react-native-svg": ">=13.0.0",
  "@react-navigation/bottom-tabs": ">=6.0.0",
  "@react-navigation/native": ">=6.0.0",
  "@react-navigation/native-stack": ">=6.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.

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

npm install @uhg-abyss/web@latest
yarn add @uhg-abyss/web@latest

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.
Table of Contents