diff --git a/docs/3.4.x/installation-old.mdx b/docs/3.4.x/installation-old.mdx
new file mode 100644
index 000000000..4ddbc3583
--- /dev/null
+++ b/docs/3.4.x/installation-old.mdx
@@ -0,0 +1,34 @@
+---
+id: installation
+title: Installation
+---
+
+import { InstallationTiles } from "../src/components";
+
+**NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/).
+(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation/?utm_source=nativebase&utm_medium=docs+install&utm_campaign=installation) for better performance, new design).
+
+Refer the guides shown below to setup NativeBase in your React app.
+
+
+
+
+
+
+
+
+
+### NativeBase VS Code Extensions
+
+[NativeBase VS Code Extensions](https://marketplace.visualstudio.com/items?itemName=NativeBase.nativebase-v3-vscode-extension) are specifically designed to quicken your development process using **NativeBase 3.0**.
+NativeBase snippets are shorthand for commonly used NativeBase components.
+
+All snippets start with the prefix `nb-` and are followed by the name of the desired component.
+
+
+
+
diff --git a/docs/3.4.x/installation.mdx b/docs/3.4.x/installation.mdx
index 4ddbc3583..4dfc8fece 100644
--- a/docs/3.4.x/installation.mdx
+++ b/docs/3.4.x/installation.mdx
@@ -3,32 +3,4 @@ id: installation
title: Installation
---
-import { InstallationTiles } from "../src/components";
-
-**NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/).
-(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation/?utm_source=nativebase&utm_medium=docs+install&utm_campaign=installation) for better performance, new design).
-
-Refer the guides shown below to setup NativeBase in your React app.
-
-
-
-
-
-
-
-
-
-### NativeBase VS Code Extensions
-
-[NativeBase VS Code Extensions](https://marketplace.visualstudio.com/items?itemName=NativeBase.nativebase-v3-vscode-extension) are specifically designed to quicken your development process using **NativeBase 3.0**.
-NativeBase snippets are shorthand for commonly used NativeBase components.
-
-All snippets start with the prefix `nb-` and are followed by the name of the desired component.
-
-
-
-
+Refer to the gluestack-ui [installation](https://gluestack.io/ui/docs/home/getting-started/installation) page as NativeBase docs are not maintained anymore.
diff --git a/docs/3.4.x/migration-guide-gluestack-ui.md b/docs/3.4.x/migration-guide-gluestack-ui-old.md
similarity index 100%
rename from docs/3.4.x/migration-guide-gluestack-ui.md
rename to docs/3.4.x/migration-guide-gluestack-ui-old.md
diff --git a/docs/3.4.x/sidebar.json b/docs/3.4.x/sidebar.json
index 20fe59059..4716df085 100644
--- a/docs/3.4.x/sidebar.json
+++ b/docs/3.4.x/sidebar.json
@@ -55,6 +55,127 @@
}
]
},
+ {
+ "type": "heading",
+ "title": "Migration",
+ "pages": [
+ {
+ "id": "migration/v3",
+ "title": "Upgrading to v3"
+ },
+ {
+ "id": "migration/v3xtov32",
+ "title": "Upgrading to 3.2.0 from 3.x"
+ },
+ {
+ "id": "migration/v33xtov34x",
+ "title": "Upgrading to 3.4.0 from 3.3.x"
+ },
+ {
+ "type": "heading",
+ "title": "Components Migration",
+ "isCollapsed": true,
+ "pages": [
+ {
+ "id": "migration/action-sheet",
+ "title": "ActionSheet"
+ },
+ {
+ "id": "migration/badge",
+ "title": "Badge"
+ },
+ {
+ "id": "migration/button",
+ "title": "Button"
+ },
+ {
+ "id": "migration/card",
+ "title": "Card"
+ },
+ {
+ "id": "migration/checkbox",
+ "title": "Checkbox"
+ },
+ {
+ "id": "migration/date-picker",
+ "title": "DatePicker"
+ },
+ {
+ "id": "migration/deck-swiper",
+ "title": "DeckSwiper"
+ },
+ {
+ "id": "migration/drawer",
+ "title": "Drawer"
+ },
+ {
+ "id": "migration/fab",
+ "title": "FABs"
+ },
+ {
+ "id": "migration/footer-tab",
+ "title": "FooterTab"
+ },
+ {
+ "id": "migration/form",
+ "title": "Form"
+ },
+ {
+ "id": "migration/header",
+ "title": "Header"
+ },
+ {
+ "id": "migration/icon",
+ "title": "Icon"
+ },
+ {
+ "id": "migration/layout",
+ "title": "Layout"
+ },
+ {
+ "id": "migration/picker",
+ "title": "Picker"
+ },
+ {
+ "id": "migration/radio-button",
+ "title": "Radio Button"
+ },
+ {
+ "id": "migration/search-bar",
+ "title": "Searchbar"
+ },
+ {
+ "id": "migration/segment",
+ "title": "Segment"
+ },
+ {
+ "id": "migration/spinner",
+ "title": "Spinner"
+ },
+ {
+ "id": "migration/swipe-list",
+ "title": "SwipeList"
+ },
+ {
+ "id": "migration/tabs",
+ "title": "Tabs"
+ },
+ {
+ "id": "migration/thumbnail",
+ "title": "Thumbnail"
+ },
+ {
+ "id": "migration/toast",
+ "title": "Toast"
+ },
+ {
+ "id": "migration/typography",
+ "title": "Typography"
+ }
+ ]
+ }
+ ]
+ },
{
"type": "heading",
"title": "Resources",
@@ -65,8 +186,7 @@
},
{
"id": "solito",
- "title": "Creating a Universal App with NativeBase and Solito",
- "status": "new"
+ "title": "Creating a Universal App with NativeBase and Solito"
}
]
},
@@ -96,8 +216,7 @@
},
{
"id": "internal-pseudo-props",
- "title": "Internal Pseudo Props",
- "status": "new"
+ "title": "Internal Pseudo Props"
},
{
"id": "responsive",
@@ -307,8 +426,7 @@
},
{
"id": "toast",
- "title": "Toast",
- "status": "update"
+ "title": "Toast"
}
]
},
@@ -569,132 +687,6 @@
}
]
},
- {
- "type": "heading",
- "title": "Migration",
- "pages": [
- {
- "id": "migration/v3",
- "title": "Upgrading to v3"
- },
- {
- "id": "migration/v3xtov32",
- "title": "Upgrading to 3.2.0 from 3.x"
- },
- {
- "id": "migration/v33xtov34x",
- "title": "Upgrading to 3.4.0 from 3.3.x"
- },
- {
- "type": "heading",
- "title": "Components Migration",
- "isCollapsed": true,
- "pages": [
- {
- "id": "migration/action-sheet",
- "title": "ActionSheet"
- },
- {
- "id": "migration/badge",
- "title": "Badge"
- },
- {
- "id": "migration/button",
- "title": "Button"
- },
- {
- "id": "migration/card",
- "title": "Card"
- },
- {
- "id": "migration/checkbox",
- "title": "Checkbox"
- },
- {
- "id": "migration/date-picker",
- "title": "DatePicker"
- },
- {
- "id": "migration/deck-swiper",
- "title": "DeckSwiper"
- },
- {
- "id": "migration/drawer",
- "title": "Drawer"
- },
- {
- "id": "migration/fab",
- "title": "FABs"
- },
- {
- "id": "migration/footer-tab",
- "title": "FooterTab"
- },
- {
- "id": "migration/form",
- "title": "Form"
- },
- {
- "id": "migration/header",
- "title": "Header"
- },
- {
- "id": "migration/icon",
- "title": "Icon"
- },
- {
- "id": "migration/layout",
- "title": "Layout"
- },
- {
- "id": "migration/picker",
- "title": "Picker"
- },
- {
- "id": "migration/radio-button",
- "title": "Radio Button"
- },
- {
- "id": "migration/search-bar",
- "title": "Searchbar"
- },
- {
- "id": "migration/segment",
- "title": "Segment"
- },
- {
- "id": "migration/spinner",
- "title": "Spinner"
- },
- {
- "id": "migration/swipe-list",
- "title": "SwipeList"
- },
- {
- "id": "migration/tabs",
- "title": "Tabs"
- },
- {
- "id": "migration/thumbnail",
- "title": "Thumbnail"
- },
- {
- "id": "migration/toast",
- "title": "Toast"
- },
- {
- "id": "migration/typography",
- "title": "Typography"
- }
- ]
- },
- {
- "id": "migration-guide-gluestack-ui",
- "title": "Migrating to gluestack-ui",
- "status": "experimental"
- }
- ]
- },
{
"type": "heading",
"title": "More",
diff --git a/layouts/index.tsx b/layouts/index.tsx
index 32c88c0ed..b80069134 100644
--- a/layouts/index.tsx
+++ b/layouts/index.tsx
@@ -27,6 +27,7 @@ import MainContent from "../src/new-components/MainContent";
import { MobileSidebarVersionDropdown } from "../src/new-components/MobileSidebarVersionDropdown";
import { SocialMediaStagger } from "../src/new-components/SocialMediaStagger";
import NativebaseIconLogo from "../src/new-components/NativebaseIconLogo";
+import GluestackIconLogo from "../src/new-components/GluestackIconLogo";
import Script from "next/script";
import { isLatestVersionSlug } from "../src/utils";
import { AlertIcon, RightArrow } from "./icons";
@@ -379,7 +380,7 @@ function Layout({
{" "}
If you are starting a new project, please try{" "}
-
+
gluestack-ui
{" "}
for better performance and new design.
@@ -444,6 +445,39 @@ function Layout({
MadeWithNativeBase
+
+
+
+
+
+
+
+ gluestack-ui
+
+
);
diff --git a/package.json b/package.json
index a4bf8737c..0e45abd43 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
"private": true,
"scripts": {
"create-version": "node ./lib/scripts/build-version.js",
- "dev": "node ./build-init.js && next dev",
- "build": "node ./build-init.js && NODE_OPTIONS=--openssl-legacy-provider next build ",
+ "dev": "node ./build-init.js && NODE_OPTIONS=--openssl-legacy-provider next dev",
+ "build": "node ./build-init.js && NODE_OPTIONS=--openssl-legacy-provider next build",
"start": "next start",
"lint": "next lint",
"analyze": "cross-env ANALYZE=true next build",
diff --git a/public/img/gluestack-logo-dark.png b/public/img/gluestack-logo-dark.png
new file mode 100644
index 000000000..bcf7fe168
Binary files /dev/null and b/public/img/gluestack-logo-dark.png differ
diff --git a/public/img/gluestack-logo-light.png b/public/img/gluestack-logo-light.png
new file mode 100644
index 000000000..2edab03aa
Binary files /dev/null and b/public/img/gluestack-logo-light.png differ
diff --git a/src/components/GettingStartedHero.tsx b/src/components/GettingStartedHero.tsx
index 1f235a2a5..8f6659a02 100644
--- a/src/components/GettingStartedHero.tsx
+++ b/src/components/GettingStartedHero.tsx
@@ -65,7 +65,7 @@ export function GettingStartedHero() {
_dark={{ color: "tipBackgroundColorDark" }}
>
If you are starting a new project, please try{" "}
-
+
gluestack-ui
{" "}
for better performance and new design.
diff --git a/src/new-components/GluestackIconLogo.tsx b/src/new-components/GluestackIconLogo.tsx
new file mode 100644
index 000000000..415dc88e8
--- /dev/null
+++ b/src/new-components/GluestackIconLogo.tsx
@@ -0,0 +1,22 @@
+import Image from "next/image";
+import React from "react";
+import { useColorMode } from "native-base";
+
+export default function GluestackIconLogo(props: any) {
+ const { colorMode } = useColorMode();
+ return (
+
+ );
+}