Merge pull request #452 from GeekyAnts/docs/update-tnb-release

Docs/update tnb release

Author: surajahmed

docs/3.2.x/installation.mdx

@@ -8,7 +8,6 @@ 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/).
 
 Refer the guides shown below to setup NativeBase in your React app.
-(IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using [gluestack-ui](https://ui.gluestack.io/) instead. [Know More](https://nativebase.io/blogs/road-ahead-with-gluestack-ui).)
 
 <Box>
   <Box mt="4" mb="8">

docs/3.3.x/installation.mdx

@@ -8,7 +8,6 @@ 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/).
 
 Refer the guides shown below to setup NativeBase in your React app.
-(IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using [gluestack-ui](https://ui.gluestack.io/) instead. [Know More](https://nativebase.io/blogs/road-ahead-with-gluestack-ui).)
 
 <Box>
   <Box mt="4" mb="8">

docs/3.4.x/migration-guide-gluestack-ui.md

@@ -4,6 +4,4 @@ title: Migrating to gluestack-ui
 ---
 
 `gluestack-ui` comes with major changes in philosophy as well as the API. With gluestack, we have re-imagined how we should code for React Native and the web. Therefore, you might encounter a few changes while migrating from `NativeBase` to `gluestack-ui`. Even though it might seem a bit of tedious work, we promise it will be worth it!
-Please refer to [this](https://geekyants.notion.site/NativeBase-to-gluestack-ui-Migration-Plan-WIP-6409006d9ecc4fb2a559cca6117a3e7c?pvs=4) guide while migrating from `NativeBase` to `gluestack-ui`.
-
-*Migration guide provided is a living document.*
+Please refer to [this](https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui) guide while migrating from `NativeBase` to `gluestack-ui`.

docs/next/installation.mdx

@@ -8,7 +8,6 @@ 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/).
 
 Refer the guides shown below to setup NativeBase in your React app.
-(IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using [gluestack-ui](https://ui.gluestack.io/) instead. [Know More](https://nativebase.io/blogs/road-ahead-with-gluestack-ui).)
 
 <Box>
   <Box mt="4" mb="8">

layouts/icons.tsx

@@ -1,19 +1,21 @@
+import { useToken } from "native-base";
 import React from "react";
 
-export function AlertIcon() {
+export function AlertIcon({...props}) {
+  const color = useToken('colors', 'yellow.600');
   return (
     <svg
       width={20}
       height={20}
       viewBox="0 0 20 20"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M4.42426 8.9675C6.85593 4.65583 8.07176 2.5 9.9976 2.5C11.9226 2.5 13.1393 4.65583 15.5709 8.9675L15.8743 9.505C17.8951 13.0883 18.9059 14.88 17.9926 16.19C17.0793 17.5 14.8193 17.5 10.3009 17.5H9.69427C5.17593 17.5 2.91593 17.5 2.0026 16.19C1.08926 14.88 2.1001 13.0883 4.12093 9.505L4.42426 8.9675ZM9.9976 6.04167C10.1634 6.04167 10.3223 6.10751 10.4395 6.22472C10.5568 6.34193 10.6226 6.50091 10.6226 6.66667V10.8333C10.6226 10.9991 10.5568 11.1581 10.4395 11.2753C10.3223 11.3925 10.1634 11.4583 9.9976 11.4583C9.83184 11.4583 9.67287 11.3925 9.55566 11.2753C9.43845 11.1581 9.3726 10.9991 9.3726 10.8333V6.66667C9.3726 6.50091 9.43845 6.34193 9.55566 6.22472C9.67287 6.10751 9.83184 6.04167 9.9976 6.04167ZM9.9976 14.1667C10.2186 14.1667 10.4306 14.0789 10.5869 13.9226C10.7431 13.7663 10.8309 13.5543 10.8309 13.3333C10.8309 13.1123 10.7431 12.9004 10.5869 12.7441C10.4306 12.5878 10.2186 12.5 9.9976 12.5C9.77658 12.5 9.56462 12.5878 9.40834 12.7441C9.25206 12.9004 9.16427 13.1123 9.16427 13.3333C9.16427 13.5543 9.25206 13.7663 9.40834 13.9226C9.56462 14.0789 9.77658 14.1667 9.9976 14.1667Z"
-        fill="#FED219"
+        fill={color}
       />
     </svg>
   );

layouts/index.tsx

@@ -2,7 +2,10 @@ import Head from "next/head";
 import React, { useEffect, useContext, useState } from "react";
 import {
   Box,
+  Divider,
   HStack,
+  Heading,
+  Icon,
   Link,
   Modal,
   Pressable,
@@ -27,6 +30,7 @@ import NativebaseIconLogo from "../src/new-components/NativebaseIconLogo";
 import Script from "next/script";
 import { isLatestVersionSlug } from "../src/utils";
 import { AlertIcon, RightArrow } from "./icons";
+import Svg, { Path } from "react-native-svg";
 
 function Layout({
   children: content,
@@ -169,7 +173,8 @@ function Layout({
       <Script
         async
         src="https://www.googletagmanager.com/gtag/js?id=G-DBP9QMTGR1"
-      ></Script>
+      >
+      </Script>
       <Script id="gTagScript">
         {`
           window.dataLayer = window.dataLayer || [];
@@ -190,90 +195,65 @@ function Layout({
         >
           <Modal.CloseButton />
           <Modal.Body p="9">
-            <HStack mb="4" alignItems="center" justifyContent="center">
-              <Text fontSize="md" fontWeight="bold" textAlign="center" mr="1">
+            <HStack mb="6" alignItems="center" justifyContent="flex">
+              <AlertIcon/>
+              <Heading fontSize='xl' textAlign="left" ml="1.5">
                 IMPORTANT MESSAGE
-              </Text>
-              <AlertIcon />
+              </Heading>
             </HStack>
-            <Text
-              fontSize="lg"
-              lineHeight={27}
-              textAlign="center"
-              color="muted.800"
-              _dark={{
-                color: "muted.200",
-              }}
-            >
-              If you are starting a new project with NativeBase, we recommend
-              using <Text fontWeight="bold">gluestack</Text> instead.
-            </Text>
-
-            <HStack justifyContent="center">
-              <a href="https://gluestack.io/">
-                <Pressable
-                  my="6"
-                  borderWidth={1}
-                  rounded="sm"
-                  px="3"
-                  py="2"
-                  _light={{
-                    borderColor: "muted.900",
-                  }}
-                  _dark={{
-                    borderColor: "muted.50",
-                  }}
-                  _hover={{
-                    bg: "primary.200",
-                    borderColor: "primary.200",
-                    _dark: {
-                      bg: "primary.700",
-                      borderColor: "primary.700",
-                    },
-                  }}
-                  _focus={{
-                    bg: "primary.300",
-                    borderColor: "primary.300",
-                    _dark: {
-                      bg: "primary.800",
-                      borderColor: "primary.800",
-                    },
-                  }}
-                >
+            {/* @ts-ignore*/}
+            <Box gap={5}>
+              <Box flexDirection='row'>
+                <Icon size={18} color='black'>
+                  <Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <Path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/>
+                    <Path d="m21 3-9 9"/>
+                    <Path d="M15 3h6v6"/>
+                  </Svg>
+                </Icon>
+                <Box w='92%' maxW='100%' ml="2">
+                  <Heading fontSize='md'>Upgrade to gluestack-ui</Heading>
                   <Text
-                    fontSize="md"
-                    fontWeight="medium"
-                    _light={{
-                      color: "muted.900",
-                    }}
+                    fontSize="sm"
+                    textAlign="left"
+                    color="muted.800"
                     _dark={{
-                      color: "muted.50",
+                      color: "muted.200",
                     }}
                   >
-                    Explore gluestack
+                    If you are starting a new project with NativeBase, we recommend
+                    using <Link href="https://gluestack.io/" fontWeight="bold">gluestack-ui</Link>
                   </Text>
-                </Pressable>
-              </a>
-            </HStack>
+                </Box>
+              </Box>
 
-            <HStack justifyContent="center">
-              <Link
-                href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui"
-                flexDir="row"
-                alignItems="center"
-                isUnderlined
-                _text={{
-                  color: "#52B3D0",
-                  fontSize: "md",
-                  fontWeight: "bold",
-                }}
-              >
-                Read Updated Blog
-                <Box ml="1">
-                  <RightArrow />
+              <Divider thickness={1}/>
+
+              <Box flexDirection='row'>
+                <Icon size={18} color='black'>
+                  <Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <Path d="m21 16-4 4-4-4"/>
+                    <Path d="M17 20V4"/>
+                    <Path d="m3 8 4-4 4 4"/>
+                    <Path d="M7 4v16"/>
+                  </Svg>
+                </Icon>
+                <Box w='93%' maxW='100%' ml="2">
+                  <Heading fontSize='md'>Migrate to gluestack-ui</Heading>
+                  <Text
+                    fontSize="sm"
+                    textAlign="left"
+                    color="muted.800"
+                    _dark={{
+                      color: "muted.200",
+                    }}
+                    >
+                    If you are working on a project with NativeBase, we recommend
+                    using <Link href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" fontWeight="bold">@gluestack-ui/themed-native-base</Link>
+                  </Text>
                 </Box>
-              </Link>
-            </HStack>
+              </Box>
+            </Box>
           </Modal.Body>
         </Modal.Content>
       </Modal>
@@ -339,8 +319,6 @@ function Layout({
                     overflow="hidden"
                     px="4"
                     py="5"
-                    fontSize="sm"
-                    fontWeight="medium"
                     borderWidth={1}
                     _light={{
                       bg: "#F1F1F1",
@@ -352,101 +330,36 @@ function Layout({
                       bg: "#171E2E",
                       borderColor: "muted.800",
                     }}
-                    width="100%"
-                    direction={{ md: "row" }}
                   >
-                    <AlertIcon />
-                    <Text ml="1">
-                      IMPORTANT MESSAGE — If you are starting a new project with
-                      NativeBase, we recommend using{" "}
-                      <a href="https://gluestack.io/">gluestack</a> instead.{" "}
-                    </Text>
-                    <HStack
-                      alignItems="center"
-                      mt={{ base: "4", md: 0 }}
-                      ml={{ md: "2" }}
+                    <Box
+                      // maxW='1056'
+                      fontSize="sm"
+                      fontWeight="medium"
+                      alignSelf='flex'
+                      flexDirection='row'
+                      alignItems={{ md: "center" }}
+                      justifyContent={{ md: "center" }}
+                      width="100%"
                     >
-                      <a href="https://gluestack.io/">
-                        <Pressable
-                          borderWidth={1}
-                          rounded="sm"
-                          px="3"
-                          py="2"
-                          _light={{
-                            borderColor: "muted.900",
-                          }}
-                          _dark={{
-                            borderColor: "muted.50",
-                          }}
-                          _hover={{
-                            bg: "primary.200",
-                            borderColor: "primary.200",
-
-                            _dark: {
-                              bg: "primary.700",
-                              borderColor: "primary.700",
-                            },
-                          }}
-                          _focus={{
-                            bg: "primary.300",
-                            borderColor: "primary.300",
-
-                            _dark: {
-                              bg: "primary.800",
-                              borderColor: "primary.800",
-                            },
-                          }}
-                          _hover={{
-                            bg: "primary.200",
-                            borderColor: "primary.200",
-
-                            _dark: {
-                              bg: "primary.700",
-                              borderColor: "primary.700",
-                            },
-                          }}
-                          _focus={{
-                            bg: "primary.300",
-                            borderColor: "primary.300",
-
-                            _dark: {
-                              bg: "primary.800",
-                              borderColor: "primary.800",
-                            },
-                          }}
-                          pointerEvents="none"
-                        >
-                          <Text
-                            fontSize="sm"
-                            fontWeight="medium"
-                            _light={{
-                              color: "muted.900",
-                            }}
-                            _dark={{
-                              color: "muted.50",
-                            }}
-                          >
-                            Explore gluestack
-                          </Text>
-                        </Pressable>
+                      <AlertIcon height={18} width={18}/>
+                      <Text ml="1">
+                      If you are starting a new project, we recommend using {" "}
+                      <a href="https://ui.gluestack.io/" target="_blank">
+                        <Text fontWeight="semibold" textDecorationLine="underline">
+                        gluestack-ui
+                        </Text>
+                      </a>
+                      {". "}
+                      For your existing projects, you can utilize{" "}
+                      <a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
+                        <Text fontWeight="semibold" textDecorationLine="underline">
+                          @gluestack-ui/themed-native-base
+                        </Text>
                       </a>
-                      <Text
-                        fontSize="sm"
-                        fontWeight="medium"
-                        _light={{
-                          color: "muted.900",
-                        }}
-                        _dark={{
-                          color: "muted.50",
-                        }}
-                        underline
-                        ml="4"
-                      >
-                        <a href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui">
-                          Know More
-                        </a>
+                      {" "}
+                      (beta).
                       </Text>
-                    </HStack>
+                    </Box>
                   </Stack>
                   {/* </a> */}
                   <Box flexDirection="row" flex={1}>

src/components/GettingStartedHero.tsx

@@ -30,14 +30,26 @@ export function GettingStartedHero() {
               NativeBase is a component library that enables devs to build
               universal design systems. It is built on top of React Native,
               allowing you to develop apps for Android, iOS and the Web.
+              <br/>
+              <br/>
               IMPORTANT MESSAGE — If you are starting a new project with
               NativeBase, we recommend using{" "}
               <a href="https://ui.gluestack.io/" target="_blank">
                 <Text fontWeight="semibold" textDecorationLine="underline">
                   gluestack-ui
                 </Text>
-              </a>{" "}
-              instead.{" "}
+              </a>
+              {" "}
+              instead. However, if you are already working on a NativeBase project, we recommend using{" "}
+              <a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
+                <Text fontWeight="semibold" textDecorationLine="underline">
+                  @gluestack-ui/themed-native-base
+                </Text>
+              </a>
+              {" "}
+              instead.
+              {" "}
+
               <a
                 href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui"
                 target="_blank"