Skip to main content

Getting started

💾 Installation​

Note

This package requires that you use React Native version 0.70.0 or newer.

Or if you're using Expo, make sure it's version 47.0.0 or newer.

npm install --save @biblo/react-native @biblo/babel-plugin

The solution is implemented in JavaScript so no native module linking is required.

🅱️ Babel​

To enable Biblo to list your examples in the same order you export them, add "@biblo/babel-plugin" as a plugin in your babel.config.js file:

babel.config.js
module.exports = {
    plugins: ["@biblo/babel-plugin"],
};

Ⓜ️ Metro​

Note

If you're using Expo (version 47.0.0 or newer) you can skip this step as they have already enabled unstable_allowRequireContext

Note

This is supported since version 0.72.1 of Metro, and version 0.70.0 of React Native

Biblo uses require.context to import all files that end in

  • .biblo.tsx
  • .biblo.jsx
  • .biblo.ts
  • .biblo.js

You need to enable unstable_allowRequireContext in your metro.config.js file.

Example 1:

metro.config.js
const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname);
config.transformer.unstable_allowRequireContext = true;

Example 2:

metro.config.js
module.exports = (async () => {
    return {
        transformer: {
            unstable_allowRequireContext: true,
        },
    };
})();

🎯 TypeScript​

RequireContext​

Using require.context is still experimental in Metro/React Native, so they haven't added it to their TypeScript declaration.

You may be able to fix that by adding metroRequire.d.ts or use // @ts-ignore.

Component types​

It is recommended that you enable strictBindCallApply in your tsconfig.json file, so you'll only have to define types once.

tsconfig.json
{
  "compilerOptions": {
    "strictBindCallApply": true
  }
}

This will allow you to do this:

const Template: BibloItem<SeparatorProps> = (props) => <Separator {...props} />;

export const Default = Template.bind({});

export const MarginVertical = Template.bind({});
MarginVertical.props = { marginVertical: true };

Instead of this:

const Template = (props) => <Separator {...props} />;

export const Default: BibloItem<SeparatorProps> = Template.bind({});

export const MarginVertical: BibloItem<SeparatorProps> = Template.bind({});
MarginVertical.props = { marginVertical: true };