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:

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:

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:

plugins.ts

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,
];

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.

plugins.native.ts

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,
];

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.

App.tsx

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} />
  );
}

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:

babel.config.js

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

Step 5: Run

Now run the app again:

expo start

You should see the following screen on launch:

Home Screen

Web

iOS

Settings App

Web

iOS

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 library.
@bluebase/plugin-react-router	Provides Navigation capability on the web. Uses the React Router library.
@bluebase/plugin-react-native-paper	Provides Material UI components on native. Uses the React Native Paper library.
@bluebase/plugin-react-navigation	Provides Navigation capability on native. Uses the React Navigation 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 library.