🌱 A basic viewport

How it's done

TypeScript

import {
    bibloImporter,
    BibloProvider,
    BibloIndex,
    BibloReader,
} from "@biblo/react-native";

// Import all files ending in .biblo.ts and .biblo.tsx
const components = bibloImporter(
    require.context(
        "/", // The root path to search in
        true, // Recursive (keep searching in subfolders of the root path)
        /\.biblo\.(ts|tsx)$/, // The files to search for
    )
);

export default function App() {
    return (
        <BibloProvider components={components}>
            <View style={{ height: "50%" }}>
                <BibloIndex />
            </View>
            <View style={{ height: "50%" }}>
                <BibloReader />
            </View>
        </BibloProvider>
    );
}

JavaScript

import {
    bibloImporter,
    BibloProvider,
    BibloIndex,
    BibloReader,
} from "@biblo/react-native";

// Import all files ending in .biblo.js and .biblo.jsx
const components = bibloImporter(
    require.context(
        "/", // The root path to search in
        true, // Recursive (keep searching in subfolders of the root path)
        /\.biblo\.(js|jsx)$/, // The files to search for
    )
);

export default function App() {
    return (
        <BibloProvider components={components}>
            <View style={{ height: "50%" }}>
                <BibloIndex />
            </View>
            <View style={{ height: "50%" }}>
                <BibloReader />
            </View>
        </BibloProvider>
    );
}

Note

If you don't want your Biblo files to end in .biblo.*, here's how you change it.

See a demo

Can't wait? You can see a demo of the web version here.

Open demo