> For the complete documentation index, see [llms.txt](https://bluebase.gitbook.io/core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bluebase.gitbook.io/core/tutorial/overview/1.2-add-plugins.md).

# 1.2 Add Plugins

All functionality in BlueBase is added via plugins. Let us add some ready-made plugins to our project to take a head start on building our app.

### Step 1: Install plugins

Start by adding following devDependencies:

```shell
yarn add @bluebase/plugin-launcher @bluebase/plugin-material-ui @bluebase/plugin-react-native-paper @bluebase/plugin-responsive-grid @bluebase/plugin-vector-icons @bluebase/plugin-settings-app @bluebase/plugin-react-router @bluebase/plugin-react-navigation @bluebase/plugin-responsive-grid @bluebase/plugin-json-schema-components
```

Some of the plugins (react-navigation) require some more dependencies to be installed:

```shell
expo install react-native-safe-area-context react-native-gesture-handler react-native-reanimated
```

### Step 2: Create plugin files

Now in the root folder create the following file `plugins.ts`:

{% code title="plugins.ts" %}

```typescript
import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginMaterialUI from '@bluebase/plugin-material-ui';
import BlueBasePluginReactRouter from '@bluebase/plugin-react-router';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

export const plugins = [
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginMaterialUI,
	BlueBasePluginReactRouter,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,
	BlueBasePluginSettingsApp,
];
```

{% endcode %}

The file above exports an array of plugins, imported from their respective modules.

Create another file similar to the one above and name it `plugins.native.ts`. This way react-native compiler will load this version rather than `plugins.ts` on native platforms. 

So by doing this, we can add web-specific plugins in `plugins.ts` and native specific code in `plugins.native.ts`.

{% code title="plugins.native.ts" %}

```typescript
import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginReactNativePaper from '@bluebase/plugin-react-native-paper';
import BlueBasePluginReactNavigation from '@bluebase/plugin-react-navigation';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

export const plugins = [
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginReactNativePaper,
	BlueBasePluginReactNavigation,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,
	BlueBasePluginSettingsApp,
];
```

{% endcode %}

In this case, the difference in the above 2 files is that `plugins.ts` uses:

* `@bluebase/plugin-react-router`
* `@bluebase/plugin-material-ui`

While `plugins.native.ts` uses the following instead: 

* `@bluebase/plugin-react-navigation`
* `@bluebase/plugin-react-native-paper`

### Step 3. Import plugins

Now edit the `App.tsx` file and add the following content.

{% code title="App.tsx" %}

```typescript
import 'react-native-gesture-handler';

import React from 'react';
import { BlueBaseApp } from '@bluebase/core';
import { plugins } from './plugins';

export default function App() {
  return (
    <BlueBaseApp plugins={plugins} />
  );
}
```

{% endcode %}

Here, we import the plugins array and pass them to the `BlueBaseApp` component as a prop.

### Step 4: Add Babel plugin

Lastly, modify the contents of `babel.config.js` file to:

{% code title="babel.config.js" %}

```javascript
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};
```

{% endcode %}

### Step 5: Run

Now run the app again:

```
expo start
```

You should see the following screen on launch:

#### Home Screen

![Web](/files/9NkdfsfEdktbMxsov2du) ![iOS](/files/Nfxz5h8r6aeBo3Qeex7k)

#### Settings App

![Web](/files/MeL7F14viuOPuF1a50ff) ![iOS](/files/jUWem2dEZqlP9STrnbjb)

### Explanation

So as you can see, by just installing a few plugins, we were able to add a lot of functionality in a very short span of time, by writing very few lines of code.

I'll try to briefly describe what purpose each plugin serves.

| Plugin                                  | Purpose                                                                                                                                                                |
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| @bluebase/plugin-launcher               | Adds Android-like "launcher" home screen, that shows app icons.                                                                                                        |
| @bluebase/plugin-settings-app           | Adds the Settings section to the app. If you remove this plugin, the settings icon on the home screen will disappear.                                                  |
| @bluebase/plugin-json-schema-components | Provides components that help us build layouts by writing JSON. This is used by the settings plugin.                                                                   |
| @bluebase/plugin-material-ui            | Provides Material UI components on the web. Uses the [MUI](https://mui.com/) library.                                                                                  |
| @bluebase/plugin-react-router           | Provides Navigation capability on the web. Uses the [React Router](https://reactrouter.com/) library.                                                                  |
| @bluebase/plugin-react-native-paper     | Provides Material UI components on native. Uses the [React Native Paper](https://reactnativepaper.com/) library.                                                       |
| @bluebase/plugin-react-navigation       | Provides Navigation capability on native. Uses the [React Navigation](https://reactnavigation.org/) library.                                                           |
| @bluebase/plugin-responsive-grid        | Provides Grid components (Column, Row, etc). Used by Launcher plugin.                                                                                                  |
| @bluebase/plugin-vector-icons           | Provides SVG vector icons used on various screens, as shown above. Uses the [React Native Vector Icons](https://oblador.github.io/react-native-vector-icons/) library. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bluebase.gitbook.io/core/tutorial/overview/1.2-add-plugins.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.