Adding docz to an existing expo managed project

Installation

    yarn add docz react react-dom react-native-web react-art gatsby-plugin-react-native-web --dev

gatsby-plugin-react-native-web is needed so expo libraries use react-native-web when visualizing the docs.

Finally, add a docs directory in the root of the project. This is not needed but quite recommendable.

mkdir docs

Configure aliases

We should configure the gatsby app of the docs so it knows where our files are located. To do that we create a gatsby-node.js file in the root directory and write in it all the aliases we need.

Also, it's important to add react-native: react-native-web as an alias.

//gatsby-node.js
const path = require('path');
exports.onCreateWebpackConfig = args => {
    args.actions.setWebpackConfig({
        resolve: {
        //Note the '..' in the path because the docz gatsby project lives in the `.docz` directory
            modules: [path.resolve(__dirname, '../src'), 'node_modules'],
            alias: {
                'react-native': 'react-native-web',
                '@': path.resolve(__dirname, '../src/components/'),
            },
        },
    })
}

Configure docz to work properly with expo

Create a gatsby-config.js file in the root with the content:

// gatsby-config.js
module.exports = {
    plugins: ['gatsby-plugin-react-native-web'],
}

Optional configuration steps

Add docz dev to package json

Add these lines to have the docz commands as yarn scripts:

//package.json
"scripts": {
    "docz:dev": "docz dev",
    "docz:build": "docz build",
    "docz:serve": "docz build && docz serve",
    //...
}

Configure custom fonts

We can import a custom .css file that defines font-families. To do that, we create the file: src/gatsby-theme-docz/wrapper.js. This allow to shadow the default wrapper from the gatsby theme and use our own react component. For example, these two files would be enough to serve the fonts:

//src/gatsby-theme-docz/wrapper.js
import React from 'react'
import 'fonts/docs.css';
export default ({ children }) => (
    <div>
        {children}
    </div>
)

/* fonts/docs.css */
@font-face {
    font-family: 'Poppins-Regular';
    src: url(./Poppins-Regular.ttf);
}

Implement a custom Playground to give context to our components through Providers

In order to have a custom Playground component, we can shadow it the same way we shadowed the wrapper.js component before. So we create a file src/gatsby-theme-docz/components/Playground/index.js to override it. For example, to add ThemeProvider:

import React from 'react'
import './playground.css'
import { AppearanceProvider } from 'react-native-appearance';
import ThemeProvider from '@themeProvider';
import { Playground as OriginalPlayground } from 'gatsby-theme-docz/src/components/Playground/index'

export const Playground = props => {
    return (
        <AppearanceProvider>
            <ThemeProvider>
                <OriginalPlayground {...props}/>
            </ThemeProvider>
        </AppearanceProvider>
    )
}

In case we want the live preview div to display as a View in RNative would, we have to get a little hacky and add the file: src/gatsby-theme-docz/components/Playground/playground.css

[data-testid="live-preview"] {
    display: flex;
    flex-direction: column;
}

lletfrix/docz2expo.md