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

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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 project with NativeBase next-adapter
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 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.
],
});
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 logo
MadeWithNativeBase