Configuration of NativeBase next-adapter

Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).

config parameter is an object with 3 keys

Dependencies : List of dependencies which are transpiled using

next-transpile-modules

.

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

module.exports = withNativebase({
  dependencies: [
    '@expo/next-adapter',
    'react-native-vector-icons',
    'react-native-vector-icons-for-web',
  ],
});

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

Copy
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:

Copy
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',
        '@expo/vector-icons': 'react-native-vector-icons',
      };
      config.resolve.extensions = [
        '.web.js',
        '.web.ts',
        '.web.tsx',
        ...config.resolve.extensions,
      ];
      return config;
    },
  },
});

Phase

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

next.js provides

.

Copy
const { withNativebase } = require('@native-base/next-adapter');
const {
  PHASE_DEVELOPMENT_SERVER,
  PHASE_PRODUCTION_BUILD,
} = require('next/constants');
const sass = require('@zeit/next-sass');

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

Quick Nav

config parameter is an object with 3 keys

Phase

Configuration of NativeBase next-adapter | NativeBase | Universal Components for React and React Native