Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: docs installation page #457

Merged
merged 3 commits into from
Dec 16, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions docs/3.4.x/installation-old.mdx
Original file line number Diff line number Diff line change
@@ -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.

<Box>
<Box mt="4" mb="8">
<InstallationTiles />
</Box>
</Box>

<br />

### 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.

<AspectRatio ratio={1.7} w="100%" maxW="1056">
<Image
resizeMode="contain"
source={{ uri: "https://cdn.nativebase.io/NativeBaseSnippet.gif" }}
alt="aang transitioning to avatar state"
/>
</AspectRatio>
30 changes: 1 addition & 29 deletions docs/3.4.x/installation.mdx
Original file line number Diff line number Diff line change
@@ -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.

<Box>
<Box mt="4" mb="8">
<InstallationTiles />
</Box>
</Box>

<br />

### 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.

<AspectRatio ratio={1.7} w="100%" maxW="1056">
<Image
resizeMode="contain"
source={{ uri: "https://cdn.nativebase.io/NativeBaseSnippet.gif" }}
alt="aang transitioning to avatar state"
/>
</AspectRatio>
Refer to the gluestack-ui [installation](https://gluestack.io/ui/docs/home/getting-started/installation) page as NativeBase docs are not maintained anymore.
File renamed without changes.
256 changes: 124 additions & 132 deletions docs/3.4.x/sidebar.json
Original file line number Diff line number Diff line change
@@ -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",
Loading