Next.js project with 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).

Next.js

is a React framework that provides simple page-based routing as well as server-side rendering. To use Next.js with NativeBase 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

,

,

,

,

Installation guide

Install dependencies

yarn

npx

Install dev dependencies.

yarn

npx

Re-export the custom Document component in the pages/_document.js file of your Next.js 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 using following command

Copy
mkdir pages; touch pages/_document.js

Update your pages/_document.js with the below content.

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

Update next.config.json with below code

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

module.exports = withNativebase({
  dependencies: [
    // your plugins go here.
  ],
});

Config NativeBase next-adapter

How to config your NativeBase next-adapter with plugins, dependencies, nextConfig

Run the Hello world example

Replace the code below in your pages/_app.js

Copy
import '../styles/globals.css';
import { NativeBaseProvider } from 'native-base';

function MyApp({ Component, pageProps }) {
  return (
    <NativeBaseProvider>
      <Component {...pageProps} />
    </NativeBaseProvider>
  );
}

export default MyApp;

and put this in your pages/index.js

Copy
import React from 'react';
import { Box } from 'native-base';

export default function App() {
  return <Box>Hello world</Box>;
}

NativeBase next-adapter intergration with Icons

Steps to integrate icons in Nextjs with native-base

Quick Nav

Built With

Installation guide

Run the Hello world example

Next.js project with NativeBase next-adapter | NativeBase | Universal Components for React and React Native