# 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](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FaAtpddTqK3H38zUPHRJl%2FScreenshot%202022-04-22%20at%201.24.56%20AM.png?alt=media\&token=c6b89db4-ca60-4378-b93a-4d7864a69bd4) ![iOS](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2Fx93tM8xr0dJTlSoFaxrZ%2FScreenshot%202022-04-22%20at%201.36.51%20AM.png?alt=media\&token=b8318233-690f-47c3-8551-086c0f4c3dd4)

#### Settings App

![Web](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FA2GdTKuxlhB03QematKm%2FScreenshot%202022-04-22%20at%201.36.59%20AM.png?alt=media\&token=961c767c-f612-4e33-81eb-03858e36dd5f) ![iOS](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FQEh6Si7GVbi7KJ6MKeWM%2FScreenshot%202022-04-22%20at%201.37.11%20AM.png?alt=media\&token=b49724cd-de4d-4697-9abe-025add25346e)

### 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. |