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

Settings App

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

@bluebase/plugin-react-router