Skip to main content

Getting started

๐Ÿ’พ Installationโ€‹


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:

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

โ“‚๏ธ Metroโ€‹


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

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:

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

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

Example 2:

module.exports = (async () => {
return {
transformer: {
unstable_allowRequireContext: true,

๐ŸŽฏ TypeScriptโ€‹


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.

"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 };