Skip to content

Commit

Permalink
Merge pull request #452 from GeekyAnts/docs/update-tnb-release
Browse files Browse the repository at this point in the history 
Docs/update tnb release
  • Loading branch information
@surajahmed
surajahmed authored Feb 8, 2024
2 parents 30bc9f1 + 147f611 commit 5712739
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 181 deletions.
1 change: 0 additions & 1 deletion docs/3.2.x/installation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 0 additions & 1 deletion docs/3.3.x/installation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 1 addition & 3 deletions docs/3.4.x/migration-guide-gluestack-ui.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
1 change: 0 additions & 1 deletion docs/next/installation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 5 additions & 3 deletions layouts/icons.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
251 changes: 82 additions & 169 deletions layouts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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 || [];
Expand All @@ -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>
Expand Down Expand Up @@ -339,8 +319,6 @@ function Layout({
overflow="hidden"
px="4"
py="5"
fontSize="sm"
fontWeight="medium"
borderWidth={1}
_light={{
bg: "#F1F1F1",
Expand All @@ -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}>
Expand Down
16 changes: 14 additions & 2 deletions src/components/GettingStartedHero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading

0 comments on commit 5712739

Please sign in to comment.