first commit

Author: hannanhafeez

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,58 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# @generated: @expo/[email protected]
+/.expo/*
+# Expo Web
+/web-build/*
+# Expo Native
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+# Next.js
+/.next/*
+/out/
+# Next.js production
+/build/
+# Next.js dependencies
+/.pnp
+.pnp.js
+# @end @expo/next-adapter

README.md

@@ -0,0 +1,4 @@
+{
+  "name": "nextjs-with-native-base-typescript",
+  "displayName": "nextjs-with-native-base-typescript"
+}

app.json

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: ["@native-base/next-adapter/babel"],
+  plugins: [
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
+  ],
+};

babel.config.js

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next-env.d.ts

@@ -0,0 +1,46 @@
+const { withNativebase } = require("@native-base/next-adapter");
+const path = require("path");
+
+const nextConfig = {
+  // reactStrictMode: true,
+  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js', 'api.js', 'api.ts'],
+  images: {
+    loader: "custom",
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  },
+  env: {
+    nextImageExportOptimizer_imageFolderPath: "public/images",
+    nextImageExportOptimizer_exportFolderPath: "out",
+    nextImageExportOptimizer_quality: 90,
+    nextImageExportOptimizer_storePicturesInWEBP: true,
+    //nextImageExportOptimizer_generateAndUseBlurImages: true,
+  },
+  // swcMinify: true,
+}
+
+module.exports = withNativebase({
+  dependencies: ["@native-base/icons", "react-native-web-linear-gradient"],
+  nextConfig: {
+    webpack: (config, options) => {
+      config.module.rules.push({
+        test: /\.ttf$/,
+        loader: "url-loader", // or directly file-loader
+        include: path.resolve(__dirname, "node_modules/@native-base/icons"),
+      });
+      config.resolve.alias = {
+        ...(config.resolve.alias || {}),
+        "react-native$": "react-native-web",
+        "react-native-linear-gradient": "react-native-web-linear-gradient",
+      };
+      config.resolve.extensions = [
+        ".web.js",
+        ".web.ts",
+        ".web.tsx",
+        ...config.resolve.extensions,
+      ];
+      return config;
+    },
+    ...nextConfig
+  },
+});

next.config.js

@@ -0,0 +1,38 @@
+{
+  "name": "@native-base/nextjs-template-typescript",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "image-optimize": "next-image-export-optimizer"
+  },
+  "dependencies": {
+    "@native-base/icons": "^0.0.11",
+    "expo-font": "^10.0.3",
+    "native-base": "3.4.0",
+    "next": "12.0.4",
+    "next-image-export-optimizer": "^0.14.5",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-native": "^0.67.3",
+    "react-native-safe-area-context": "^4.1.2",
+    "react-native-svg": "^12.1.1",
+    "react-native-web": "^0.17.7",
+    "react-native-web-linear-gradient": "^1.1.2"
+  },
+  "devDependencies": {
+    "@native-base/next-adapter": "^1.1.9",
+    "@types/node": "16.11.11",
+    "@types/react": "17.0.37",
+    "@types/react-native": "^0.67.1",
+    "babel-preset-expo": "^8.5.1",
+    "eslint": "7",
+    "eslint-config-next": "12.0.4",
+    "next-compose-plugins": "^2.2.1",
+    "next-fonts": "^1.5.1",
+    "next-transpile-modules": "^9.0.0",
+    "typescript": "4.5.2"
+  }
+}

package.json

@@ -0,0 +1,4 @@
+{
+    "nextjs-logo.png": "QoWn6vnZcylZX5fcoyiLlEDsdsXHgh6goljRlehlJu4=",
+    "nextjs-logo.ebfdc42e.png": "nStUqqOKBuTpcrYJqBSBk7WOkZGiPAhAYYR14O8Kr4A="
+}

public/favicon.ico

@@ -0,0 +1,14 @@
+import React from "react";
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { NativeBaseProvider } from "native-base";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <NativeBaseProvider>
+      <Component {...pageProps} />
+    </NativeBaseProvider>
+  );
+}
+
+export default MyApp;

public/images/nativebase-logo.svg

@@ -0,0 +1,69 @@
+// export { default } from "@native-base/next-adapter/document";
+
+import React, { Children } from "react";
+import NextDocument, { Html, Head, Main, NextScript } from "next/document";
+import { AppRegistry } from "react-native-web";
+
+// Force Next-generated DOM elements to fill their parent's height
+const normalizeNextElements = `
+  html, body, #__next {
+    width: 100%;
+    /* To smooth any scrolling behavior */
+    -webkit-overflow-scrolling: touch;
+    margin: 0px;
+    padding: 0px;
+    /* Allows content to fill the viewport and go beyond the bottom */
+    min-height: 100%;
+  }
+  #__next {
+    flex-shrink: 0;
+    flex-basis: auto;
+    flex-direction: column;
+    flex-grow: 1;
+    display: flex;
+    flex: 1;
+  }
+  html {
+    scroll-behavior: smooth;
+    -webkit-text-size-adjust: 100%;
+    height: 100%;
+  }
+  body {
+    display: flex;
+    overflow-y: auto;
+    overscroll-behavior-y: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -ms-overflow-style: scrollbar;
+  }
+`;
+
+export async function getInitialProps({ renderPage }) {
+    AppRegistry.registerComponent("Main", () => Main);
+    const { getStyleElement } = AppRegistry.getApplication("Main");
+    const page = renderPage();
+    const styles = [
+        // eslint-disable-next-line react/jsx-key
+        <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
+        getStyleElement(),
+    ];
+    return { ...page, styles: Children.toArray(styles) };
+}
+
+class Document extends NextDocument {
+    render() {
+        return (
+            <Html>
+                <Head />
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+}
+
+Document.getInitialProps = getInitialProps;
+export default Document;

public/images/next-image-export-optimizer-hashes.json

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}