GeekyAnts / GeekyAnts/NativeBase

Support for Nextjs 12.2 and React 18.2

Open
#5,249 18 comments 8 reactions 1 assignee Claimed by @Viraj-10 View on GitHub
bug PR Added v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

Not really a bug, having issues adding Native base to an existing nextjs 12.2 app, the cli, examples and documentation seem to only refer to next 12.0 and react 17

### CodeSandbox/Snack link

NA

### Steps to reproduce

1. install new create-next-app with typescript using yarn
2. follow instructions in documentation on adding to existing project
3. run yarn dev
4. See error below

### NativeBase Version

latest

### Platform

- [ ] Android
- [ ] CRA
- [ ] Expo
- [ ] iOS
- [X] Next

### Other Platform

_No response_

### Additional Information

Wondering if React18 is supported in nativebase as yet,

error:

```
warn - Invalid next.config.js options detected:
[
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "webpackDevMiddleware"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "configOrigin"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "target"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "analyticsId"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "webpack5"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "projectRoot"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "/amp/canonicalBase",
"schemaPath": "#/properties/amp/properties/canonicalBase/minLength",
"keyword": "minLength",
"params": {
"limit": 1
},
"message": "must NOT have fewer than 1 characters"
},
{
"instancePath": "/assetPrefix",
"schemaPath": "#/properties/assetPrefix/minLength",
"keyword": "minLength",
"params": {
"limit": 1
},
"message": "must NOT have fewer than 1 characters"
},
{
"instancePath": "/basePath",
"schemaPath": "#/properties/basePath/minLength",
"keyword": "minLength",
"params": {
"limit": 1
},
"message": "must NOT have fewer than 1 characters"
},
{
"instancePath": "/experimental/outputFileTracingRoot",
"schemaPath": "#/properties/experimental/properties/outputFileTracingRoot/minLength",
"keyword": "minLength",
"params": {
"limit": 1
},
"message": "must NOT have fewer than 1 characters"
},
{
"instancePath": "/generateEtags",
"schemaPath": "#/properties/generateEtags/isFunction",
"keyword": "isFunction",
"params": {},
"message": "must pass \"isFunction\" keyword validation"
},
{
"instancePath": "/i18n",
"schemaPath": "#/properties/i18n/type",
"keyword": "type",
"params": {
"type": "object"
},
"message": "must be object"
}
]
See more info here: https://nextjs.org/docs/messages/invalid-next-config

```
next.config.js

```

/** @type {import('next').NextConfig} */
const { withExpo } = require("@expo/next-adapter");
const withFonts = require("next-fonts");
const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")([
"react-native-web",
"react-native-svg",
"native-base",
]);

const nextConfig = {
reactStrictMode: true,
images: {
domains: [
"s3-eu-west-1.amazonaws.com",
"7834446d6472debd8aae-e02563a4b5a029234d332b60ea74b60c.ssl.cf3.rackcdn.com",
"picsum.photos",
],
},
};

module.exports = withPlugins(
[withTM, [withFonts, { projectRoot: __dirname }], [withExpo, { projectRoot: __dirname }]],
nextConfig
);
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.