@native-base/next-adapter

Table of Contents

• About The Project
• Built With
• Usage
• Contributing

About the project

This project was designed to make integration of nativebase in next apps easier

Next.js is a React framework that provides simple page-based routing as well as server-side rendering. To use Next.js with native-base for web we recommend that you use a library called @native-base/next-adapter to handle the configuration and integration of the tools.

Built With

• next
• react
• react-dom
• typescript
• tsc
• react-native-web

Usage

• yarn add @native-base/next-adapter next-compose-plugins next-transpile-modules next-fonts  -D
  

• yarn add react-native-web native-base react-native react-native-svg react-native-safe-area-context
  

• Re-export the custom Document component in the pages/_document.js file of your NextJs project.

  • This will ensure react-native-web styling works.
  • Wraps all the css in style tag on server side (thus preventing css flicker issue)
  • Or you can create the file - mkdir pages; touch pages/_document.js

  pages/_document.js

  export { default } from '@native-base/next-adapter/document';
  

• Update next.config.json with below code

  Custom withNativebase function implements withPlugins function from next-compose-plugins.

  WithNativebase function takes in 2 parameters :

type withNativebaseParam = {
  config: ConfigType;
  phase?: Array;
}

type ConfigType = {
  dependencies?: Array<string>;
  plugins?: Array<function>;
  nextConfig?: Object;
};

1. Config parameter is an object with 3 keys:

• dependencies: List of dependencies which are transpiled using [next-transpile-modules](https://github.com/martpie/next-transpile-modules) .

const { withNativebase } = require("@native-base/next-adapter");

module.exports = withNativebase({
  dependencies: [
  ],
});

• plugins: It is an array containing all plugins and their configuration.

const { withNativebase } = require("@native-base/next-adapter");
const sass = require("@zeit/next-sass");

module.exports = withNativebase({
  plugins: [[sass]],  
});

• nextConfig: Configuration for the plugin. You can also overwrite specific configuration keys for a phase.

const { withNativebase } = require("@native-base/next-adapter");

module.exports = withNativebase({
  nextConfig: {
    projectRoot: __dirname,
    webpack: (config, options) => {
      config.resolve.alias = {
        ...(config.resolve.alias || {}),
        "react-native$": "react-native-web",
      };
      config.resolve.extensions = [
        ".web.js",
        ".web.ts",
        ".web.tsx",
        ...config.resolve.extensions,
      ];
      return config;
    },
  },
});

2. Phase

If the plugin should only be applied in specific phases, you can specify them here. You can use all phases next.js provides.

const withPlugins = require('next-compose-plugins');
const { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD } = require('next/constants');
const sass = require('@zeit/next-sass');

module.exports = withPlugins([
  [sass, {
    cssModules: true,
    cssLoaderOptions: {
      localIdentName: '[path]___[local]___[hash:base64:5]',
    },
  }, [PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD]],
]);

screen-recording-2022-01-25-at-15211-pm_5Y7ZUfga (1).mp4

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

• Fork the Project
• Create your Feature Branch (git checkout -b feature/AmazingFeature)
• Commit your Changes (git commit -m 'Add some AmazingFeature')
• Push to the Branch (git push origin feature/AmazingFeature)
• Open a Pull Request