diff --git a/README.md b/README.md index 497b27d0a..16575b2f5 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# [nativebase.io](https://alpha.nativebase.io/) +# [nativebase.io](https://nativebase.io/) -This repo contains the website configuration and documentation for [NativeBase website](https://alpha.nativebase.io/). +This repo contains the website configuration and documentation for [NativeBase website](https://nativebase.io/). ## Contents diff --git a/docs/actionSheet.md b/docs/actionSheet.md index f465f9623..fb2b9f8e7 100644 --- a/docs/actionSheet.md +++ b/docs/actionSheet.md @@ -12,7 +12,7 @@ An Action Sheet is a dialog that displays a set of options. It appears on top of NativeBase exports 3 modal-related components: - **Actionsheet**: Provides the context and state for all components. -- **Actionsheet.Content**: Wrapper for the **Actionsheet.Header and Actionsheet.Item** components. +- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components. - **Actionsheet.Item**: A button to wrap the options of the Actionsheet. ```jsx diff --git a/docs/aspectRatio.md b/docs/aspectRatio.md index 9bcb91863..036dfc3f8 100644 --- a/docs/aspectRatio.md +++ b/docs/aspectRatio.md @@ -45,7 +45,7 @@ function Component() { diff --git a/docs/breadCrumb.md b/docs/breadCrumb.md index ce903a92e..a0c567378 100644 --- a/docs/breadCrumb.md +++ b/docs/breadCrumb.md @@ -37,7 +37,7 @@ function BreadcrumbComponent () { Home (This is currently active) - + Docs @@ -90,7 +90,7 @@ function BreadcrumbComponent () { Home (This is currently active) - + Docs @@ -138,7 +138,7 @@ function BreadcrumbComponent () { Home (This is currently active) - + Docs @@ -186,7 +186,7 @@ function BreadcrumbComponent () { - + Docs diff --git a/docs/changelog.md b/docs/changelog.md index d731b2df4..3c65f2d9b 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -3,21 +3,19 @@ id: changelog title: Changelog --- -## Features - -- [Android] Shift accessibility focus on modal open -- Disabled style in button -- Drag indicator in ActionSheet - ## Fixes -- Radio and checkbox accessibility warnings on web -- Modal multiple clicks lead to screen freeze on web -- Select scrolling fix for long list -- Actionsheet flicker on swipe -- Add safearea bottom inset in ActionSheet -- Select option invisible on iOS (Safari) -- Platform props type definitions fixes in Basic components -- Button type fixes +- Version bump from 3.0.3 to 3.0.4 +- Add tokenised fontFamily support in Input #3796 +- Make drag indicator optional in actionsheet #3797 +- Export Toast TS props definition #3795 +- Set fontFamily to heading in Heading component #3788 +- Fix SSR not working #3786 +- Fix box with linear gradient warning #3777 +- Add color prop in Select's TS definition #3779 +- Remove additional wrapper from Checkbox group #3798 +- Add a prop to render FAB outside of portal #3829 +- Fix input padding(top/bottom) not working on android #3825 +- Fix custom fonts not working on android for some cases #3821 -For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.3). +For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.4). diff --git a/docs/install-cra.mdx b/docs/install-cra.mdx index f016c5a49..01c435dcd 100644 --- a/docs/install-cra.mdx +++ b/docs/install-cra.mdx @@ -10,8 +10,8 @@ import { TileLink } from '../src/components'; @@ -22,6 +22,7 @@ The easiest way to get started with NativeBase in create react app is using Nati ```bash npx create-react-app my-app --template nativebase +cd my-app/ yarn start ``` @@ -29,6 +30,7 @@ yarn start ```bash npx create-react-app my-app --template nativebase-typescript +cd my-app/ yarn start ``` @@ -36,7 +38,7 @@ yarn start -Create a new CRA project +Create a new CRA project If not exist ```bash npx create-react-app my-app diff --git a/docs/install-next.mdx b/docs/install-next.mdx index 0f6944aaf..06d2dccab 100644 --- a/docs/install-next.mdx +++ b/docs/install-next.mdx @@ -1,6 +1,6 @@ --- id: install-next -title: Install in NextJS project +title: Install in Next.js project --- import Tabs from '@theme/Tabs'; @@ -8,60 +8,83 @@ import TabItem from '@theme/TabItem'; import { TileLink } from '../src/components'; - + -### Create a new project using Expo NextJS template +### Create a new project using Next.js CLI with NativeBase template -```bash -npx create-react-native-app -t with-nextjs -``` - -[Refer official guide](https://docs.expo.io/guides/using-nextjs/) if you need additional configurations. - -### Install dependencies - - + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

+
+ ```bash -yarn add native-base react-native-svg styled-components styled-system react-native-safe-area-context + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base ``` - +
+Yey! you are all set, start editing src/pages/index.js now. - +

With Typescript

+
```bash -npm install native-base react-native-svg styled-components styled-system react-native-safe-area-context + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript ``` +
+Yey! you are all set, start editing src/pages/index.tsx now. + - - + - +

Choose your preferred setting and start your development swiftly 🚀

-### Create a new project using NextJS CLI with react native web template +

Plain Javascript

+
```bash -npx create-next-app --example with-react-native-web with-react-native-web-app + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base ``` -[Refer official guide](https://necolas.github.io/react-native-web/docs/installation/) if you need additional configurations. +
+ +Yey! you are all set, start editing src/pages/index.js now. + +

With Typescript

+
+ +```bash + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript +``` + +
+ +Yey! you are all set, start editing src/pages/index.tsx now. + + + + + + + ### Install dependencies @@ -74,35 +97,60 @@ npx create-next-app --example with-react-native-web with-react-native-web-app +
+ ```bash yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context ``` +
+ +
+ ```bash npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context ``` +
+ We'll need 2 more additional steps. -1. Install dependencies. +1. Install dev dependencies. -```bash - // Using npm - npm i next-compose-plugins next-transpile-modules --save-dev + + + - // Using yarn +```bash yarn add next-compose-plugins next-transpile-modules -D ``` -2. Replace next.config.js with the below content. + + + + +```bash + npm i next-compose-plugins next-transpile-modules --save-dev +``` + + + + + +2. Update your next.config.js with the below content. ```js const withPlugins = require('next-compose-plugins'); @@ -127,45 +175,63 @@ const withTM = require('next-transpile-modules')([ '@react-stately/radio', ]); -module.exports = withPlugins([withTM], { - webpack: (config) => { - config.resolve.alias = { - ...(config.resolve.alias || {}), - // Transform all direct `react-native` imports to `react-native-web` - 'react-native$': 'react-native-web', - }; - config.resolve.extensions = [ - '.web.js', - '.web.ts', - '.web.tsx', - ...config.resolve.extensions, - ]; - return config; - }, -}); +module.exports = withPlugins( + [ + withTM, + // your plugins go here. + ], + { + webpack: (config) => { + config.resolve.alias = { + ...(config.resolve.alias || {}), + // Transform all direct `react-native` imports to `react-native-web` + 'react-native$': 'react-native-web', + }; + config.resolve.extensions = [ + '.web.js', + '.web.ts', + '.web.tsx', + ...config.resolve.extensions, + ]; + return config; + }, + } +); ``` - - - - ### Run the Hello world example -Put the below code in your App.js +Replace the below code in your pages/\_app.js ```jsx -import React from 'react'; -import { NativeBaseProvider, Box } from 'native-base'; +import '../styles/globals.css'; +import { NativeBaseProvider } from 'native-base'; -export default function App() { +function MyApp({ Component, pageProps }) { return ( - Hello world + ); } + +export default MyApp; ``` +and put this in your pages/index.js + +```jsx +import React from 'react'; +import { Box } from 'native-base'; + +export default function App() { + return Hello world; +} +``` + + + +
diff --git a/docs/install-rn.mdx b/docs/install-rn.mdx index ca4746850..576daca24 100644 --- a/docs/install-rn.mdx +++ b/docs/install-rn.mdx @@ -1,6 +1,6 @@ --- id: install-rn -title: Install in React Native CLI initiated project +title: Install in React Native project --- import Tabs from '@theme/Tabs'; diff --git a/docs/installation.mdx b/docs/installation.mdx index 22ba268ad..5b8e02daa 100644 --- a/docs/installation.mdx +++ b/docs/installation.mdx @@ -14,3 +14,17 @@ Refer the guides shown below to setup NativeBase in your React app. + +
+ +### NativeBase VS Code Extensions + +NativeBase VS Code Extensions 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. + +aang transitioning to avatar state diff --git a/docs/migration/Actionsheet.md b/docs/migration/Actionsheet.md index c62e54555..9836c69d3 100644 --- a/docs/migration/Actionsheet.md +++ b/docs/migration/Actionsheet.md @@ -8,8 +8,8 @@ We have sliced [`Actionsheet`](actionSheet.md) into multiple smaller component w Migrating Checkbox components can broadly described in these points: - **options** (prop) → `Actionsheet.Item` (component). -- Pros like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. -- **title** (prop) → `Actionsheet.Header` (component). +- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. ## Code Comparison diff --git a/docs/utility-first.mdx b/docs/utility-first.mdx index e60b42a35..ebd5645c6 100644 --- a/docs/utility-first.mdx +++ b/docs/utility-first.mdx @@ -14,6 +14,8 @@ To understand utility props, let's take an example.
+## With React Native + Let's try the traditional way of building the above card in React Native.
@@ -99,6 +101,8 @@ const styles = StyleSheet.create({
+## With NativeBase + Now let's try to build the same card using NativeBase. With NativeBase, you can apply styles directly in the layout using shorthands. diff --git a/docusaurus.config.js b/docusaurus.config.js index be7650659..9171dcce7 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -1,7 +1,7 @@ module.exports = { themes: ['@docusaurus/theme-live-codeblock'], title: 'NativeBase', - tagline: 'A complete component library for React Native Ecosystem', + tagline: 'Mobile-first, accessible components for React Native & Web', url: 'https://docs.nativebase.io', baseUrl: '/', clientModules: [require.resolve('./snackPlayerInitializer.js')], @@ -19,10 +19,35 @@ module.exports = { onBrokenLinks: 'ignore', onBrokenMarkdownLinks: 'ignore', favicon: 'img/favicon.svg', - organizationName: 'nativebase', - projectName: 'website', // Usually your repo name. + organizationName: 'Geekyants', + projectName: 'nativebase-docs', // Usually your repo name. plugins: ['docusaurus-tailwindcss-loader'], themeConfig: { + image: 'https://nativebase.io/img/nativebase-og.png', + metadatas: [ + { name: 'twitter:card', content: 'summary_large_image' }, + { property: 'og:site_name', content: 'NativeBase' }, + { + name: 'twitter:image:alt', + content: + 'NativeBase 3.0 enables you to build a consistent design system across android, iOS & web. It is powered by React Native ARIA and Styled System. Rich, highly themeable and responsive.', + }, + { name: 'twitter:site', content: '@NativeBaseIO' }, + { + property: 'og:title', + content: + 'NativeBase: Mobile-first, accessible components for React Native & Web', + }, + { + property: 'og:description', + content: + 'NativeBase 3.0 enables you to build a consistent design system across android, iOS & web. It is powered by React Native ARIA and Styled System. Rich, highly themeable and responsive.', + }, + { + property: 'og:url', + content: 'https://docs.nativebase.io', + }, + ], // hideableSidebar: true, // respectPrefersColorScheme: true, gtag: { @@ -183,7 +208,7 @@ module.exports = { docs: { sidebarPath: require.resolve('./sidebars.js'), // Please change this to your repo. - editUrl: 'https://github.com/nativebase/website/tree/main', + editUrl: 'https://github.com/Geekyants/nativebase-docs/tree/main', remarkPlugins: [ require('./remark-snackplayer'), require('./nb-plugins/component-snackplayer'), @@ -194,7 +219,7 @@ module.exports = { blog: { showReadingTime: true, // Please change this to your repo. - editUrl: 'https://github.com/nativebase/website/tree/main', + editUrl: 'https://github.com/Geekyants/nativebase-docs/tree/main', }, theme: { customCss: [require.resolve('./src/css/custom.css')], diff --git a/nb-plugins/component-snackplayer/index.js b/nb-plugins/component-snackplayer/index.js index b3689b0be..8343f8ab8 100644 --- a/nb-plugins/component-snackplayer/index.js +++ b/nb-plugins/component-snackplayer/index.js @@ -18,7 +18,7 @@ const processNode = (node, parent) => { return new Promise(async (resolve, reject) => { try { const params = parseParams(node.meta); - const NBversion = '3.0.0'; + const NBversion = '3.0.4'; // Gather necessary Params let name = params.name ? decodeURIComponent(params.name) : 'Example'; const description = params.description diff --git a/package.json b/package.json index d3ca72e4b..8196e0c58 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "docs-v-2", - "version": "0.0.0", + "version": "3.0.4", "private": true, "scripts": { "docusaurus": "docusaurus", @@ -12,7 +12,8 @@ "serve": "docusaurus serve", "clear": "docusaurus clear", "postinstall": "patch-package", - "install-plugins": "cd nb-plugins && yarn && cd .. && cd remark-snackplayer && yarn" + "install-plugins": "cd nb-plugins && yarn && cd .. && cd remark-snackplayer && yarn", + "create-version": "docusaurus docs:version" }, "dependencies": { "@babel/core": "^7.14.0", @@ -34,7 +35,7 @@ "clsx": "^1.1.1", "dedent": "^0.7.0", "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader", - "native-base": "^3.0.0-next.40", + "native-base": "^3.0.4", "object.fromentries": "^2.0.3", "patch-package": "^6.4.7", "postcss": "^7.0.34", diff --git a/remark-snackplayer/index.js b/remark-snackplayer/index.js index a1fc0a4b9..4273b391c 100644 --- a/remark-snackplayer/index.js +++ b/remark-snackplayer/index.js @@ -32,7 +32,7 @@ const processNode = (node, parent) => { try { const params = parseParams(node.meta); const simplifedMeta = simplifyMeta(node.meta); - const NBversion = '3.0.0'; + const NBversion = '3.0.4'; // Gather necessary Params let name = simplifedMeta.name ? decodeURIComponent(simplifedMeta.name) diff --git a/src/components/Home/Accessibility/icons.jsx b/src/components/Home/Accessibility/icons.jsx deleted file mode 100644 index b887474af..000000000 --- a/src/components/Home/Accessibility/icons.jsx +++ /dev/null @@ -1,353 +0,0 @@ -import * as React from 'react'; -export const SVGs = { - ScreenReaders: ( - - - - - - - ), - ContrastRatio: ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), - KeyboardInteractions: ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), - Logo: ( - - - - - - - - - - - - - - - ), - ReactNativeAriaLogo: ( - - - - ), - ReactNativeAriaSmall: ( - - - - - - - - - ), -}; diff --git a/src/components/Home/Accessibility/index.jsx b/src/components/Home/Accessibility/index.jsx deleted file mode 100644 index eae466d7d..000000000 --- a/src/components/Home/Accessibility/index.jsx +++ /dev/null @@ -1,119 +0,0 @@ -import React from 'react'; -import useThemeContext from '@theme/hooks/useThemeContext'; -import { SVGs } from './icons.jsx'; -const accessibilities = [ - { - svg: SVGs['KeyboardInteractions'], - heading: 'Keyboard Interactions', - subHeading: - 'NativeBase primitives provide basic keyboard support for your apps so that users can navigate it without a mouse.', - }, - { - svg: SVGs['ScreenReaders'], - heading: 'Screen Readers', - subHeading: - 'Screen readers facilitate text-to-speech conversion and automatically detect important content to be conveyed to people with visual disabilities.', - }, - { - svg: SVGs['ContrastRatio'], - heading: 'Contrast Ratio', - subHeading: - 'NativeBase provides a contrasting colour based on the theme by default. You can also customise the contrast ratio using the useAccessibleColors hook.', - }, -]; -export function Accessibility() { - const { isDarkTheme } = useThemeContext(); - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-100'; - return ( -
-
-
-
-
{SVGs.Logo}
-
-

- - Out of the box Accessibility - -

-

- Powered by - - - {SVGs.ReactNativeAriaSmall}{' '} - - - - React Native ARIA - -

-

- Powered by{' '} - - React Native ARIA - - , which provides React hooks that enable you to build accessible - design systems in no time. -

-

- - Learn More - -

-
- -
- {SVGs.ReactNativeAriaLogo} -
-
- - {/* grid */} -
- {accessibilities.map((accessibilitiy, idx) => { - return ( -
-
{accessibilitiy.svg}
-
- {accessibilitiy.heading} -
-
-
- {accessibilitiy.subHeading} -
-
-
- ); - })} -
-
-
-
- ); -} diff --git a/src/components/Home/CodeComponent.jsx b/src/components/Home/CodeComponent.jsx deleted file mode 100644 index 9a8de99a9..000000000 --- a/src/components/Home/CodeComponent.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import Highlight, { defaultProps } from 'prism-react-renderer'; - -import palenight from 'prism-react-renderer/themes/palenight'; - -export function CodeComponent({ code, classStyle }) { - return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-          {tokens.map((line, i) => {
-            const lineProps = getLineProps({ line, key: i });
-            return (
-              

-                

-                  {/* {i + 1} */}
-                

-                

-                  {line.map((token, key) => (
-                    
-                  ))}
-                

-              

-            );
-          })}
-
- )} - - ); -} diff --git a/src/components/Home/Community/icons.jsx b/src/components/Home/Community/icons.jsx deleted file mode 100644 index 0222fda50..000000000 --- a/src/components/Home/Community/icons.jsx +++ /dev/null @@ -1,143 +0,0 @@ -import * as React from 'react'; -export const SVGs = { - Logo: ( - - - - - - ), - Discord: ( - - - - - - - - - - - ), - Facebook: ( - - - - ), - Github: ( - - - - - - - - - ), - Stackoverflow: ( - - - - - ), - Twitter: ( - - - - ), -}; diff --git a/src/components/Home/Community/index.jsx b/src/components/Home/Community/index.jsx deleted file mode 100644 index 8a2cbe089..000000000 --- a/src/components/Home/Community/index.jsx +++ /dev/null @@ -1,204 +0,0 @@ -import React from 'react'; -import useThemeContext from '@theme/hooks/useThemeContext'; -import { SVGs } from './icons'; -const experts = { - sanket: 'https://avatars.githubusercontent.com/u/1733433?v=4', - atul: 'https://avatars.githubusercontent.com/u/1733436?v=4', -}; -const articles = [ - { - name: - 'Notifications on React Native using Firebase Cloud Messaging with Notifee.', - link: - 'https://blog.geekyants.com/notifications-on-react-native-using-firebase-cloud-messaging-with-notifee-b9a1bd47177f', - src: 'https://miro.medium.com/max/4800/1*hFL8YOVEMRVznTHcgUNstA.jpeg', - }, - { - name: 'React Hooks vs Class Component', - link: - 'https://blog.geekyants.com/react-hooks-vs-class-component-f13ec94505f8', - src: 'https://miro.medium.com/max/2000/1*Q7reyHNWLUXi3LcOs-bjjw.jpeg', - }, - { - name: 'React & React Native Virtual Meetup #16', - link: - 'https://blog.geekyants.com/react-react-native-virtual-meetup-16-c0030f48a8f1', - src: 'https://miro.medium.com/max/3000/1*GLDQpQCYMUs3DPa7-6F5fQ.png', - }, -]; -const socialsHandles = [ - { - name: 'Github', - svg: SVGs['Github'], - color: '#333333', - }, - { - name: 'Stackoverflow', - svg: SVGs['Stackoverflow'], - color: '#F48024', - }, - { - name: 'Discord', - svg: SVGs['Discord'], - color: '#5865F2', - }, - { - name: 'Twitter', - svg: SVGs['Twitter'], - color: '#1DA1F2', - }, - { - name: 'Facebook', - svg: SVGs['Facebook'], - color: '#4267B2', - }, -]; -export function Community() { - const { isDarkTheme } = useThemeContext(); - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-400'; - return ( -
-
-
-
-
- - {SVGs.Logo} - -
-
-

- Our{' '} - - Community - -

-

- We have a lively community built on our shared love for React & - React Native. Join us! -

-
- {socialsHandles.map((handle, idx) => { - return ( -
-

{handle.svg}

-

- {handle.name} -

-
- ); - })} -
-
-
- -
-
-
-
-
-
- sanket -
-
- atul -
-
-
-
-

- Join our Experts on -

- -
-
-
- - {/* Articles list */} -
-
- {articles.map(({ name, link, src }, idx) => { - return ( -
- // - ); - })} -
-
- -
-
-
- ); -} diff --git a/src/components/Home/ComponentLibrary/icons.jsx b/src/components/Home/ComponentLibrary/icons.jsx deleted file mode 100644 index 1f29aef14..000000000 --- a/src/components/Home/ComponentLibrary/icons.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -export const SVGs = { - Logo: ( - - - - - - - - - ), -}; diff --git a/src/components/Home/ComponentLibrary/index.jsx b/src/components/Home/ComponentLibrary/index.jsx deleted file mode 100644 index badbebf85..000000000 --- a/src/components/Home/ComponentLibrary/index.jsx +++ /dev/null @@ -1,223 +0,0 @@ -import React, { useState } from 'react'; -import { CodeComponent } from '../CodeComponent'; -import useThemeContext from '@theme/hooks/useThemeContext'; -import { SVGs } from './icons'; - -export function ComponentLibrary() { - // const { isDarkTheme } = useThemeContext(); - // TODO: change this - const foldBg = ''; - // const foldBg = !isDarkTheme ? 'bg-gray-100' : ''; - const { isDarkTheme } = useThemeContext(); - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-100'; - const [currentTheme, setCurrentTheme] = useState('forms'); - const exampleCode = - currentTheme === 'forms' - ? ` - - - - What's your event called? - - - - When is your Event? - - - Day - Night - - - - - - I agree to Terms and conditions - - - - -`.trim() - : currentTheme === 'interaction' - ? ` - - {plans.map((plan, ind) => { - return ( - - ); - })} - -`.trim() - : ` - - - { - users.map((user,ind)=>{ - - {user.initials} - - }) - } - - - -`.trim(); - return ( -
-
- ); -} diff --git a/src/components/Home/Reviews.jsx b/src/components/Home/Reviews.jsx deleted file mode 100644 index 3c00a43ba..000000000 --- a/src/components/Home/Reviews.jsx +++ /dev/null @@ -1,183 +0,0 @@ -import React from 'react'; -import useThemeContext from '@theme/hooks/useThemeContext'; - -const SVGs = { - Email: ( - - - - ), - Twitter: ( - - - - - - - ), - microphone: ( - - - - - - - ), -}; - -const reviews = [ - { - name: 'Lisa Miller', - handle: '@LisaMillerCool', - content: `If you are planning to develop an app using react - native, it's a no-brainer to go with Expo. It's like a - package of goodies. I don't even understand why it's so - awesome. Good job @expo team. You've made our lives - simpler.`, - src: - 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', - }, - { - name: 'Lisa Miller', - handle: '@LisaMillerCool', - content: `As a career-long web developer, getting push notifications - working in @reactnative via @expo feels like black magic. - Loving it.`, - src: - 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', - }, - { - name: 'Lisa Miller', - handle: '@LisaMillerCool', - content: `The speed at which React Native Web via @expo has evolved in - the past 6 months is absolutely wild. My head is spinning.`, - src: - 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', - }, - { - name: 'Lisa Miller', - handle: '@LisaMillerCool', - content: `Expo recently made it possible to target web, so you can - write a single UI for native and web. I’m continually - impressed. Otherwise next.js by @zeithq is incredible. Both - of these projects have amazing docs, DX, and fast release - cycles.`, - src: - 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', - }, - { - name: 'Lisa Miller', - handle: '@LisaMillerCool', - content: `It’s difficult to make a tool that is powerful, easy to use, - and stays out of the way. @expo has figured it out and it’s - one of the most pleasurable dev experiences I’ve had in my - career.`, - src: - 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', - }, - { - name: 'Lisa Miller', - handle: '@LisaMillerCool', - content: `I love how @expo allows me to build my standalone apps remotely on their much more powerful servers! Saves time and allows me to continue to use my computer while I wait for the build! - `, - src: - 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', - }, -]; - -export function Reviews() { - const { isDarkTheme } = useThemeContext(); - const subHeadingColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-400'; - const reviewColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-100'; - const borderColor = !isDarkTheme ? 'border-gray-200' : 'border-gray-700'; - - return ( -
-
-
-
-

See What Others Are Saying

-

- Here's what other React devs have to say about NativeBase. -

-
-
- {reviews.map((review, idx) => { - return ( -
-

- - - - {review.name} - - {review.handle} - - {SVGs['Twitter']} -

-

- {review.content} -

-
- ); - })} -
-
-
-
-
-
- ); -} diff --git a/src/components/Home/Sponsors/icons.jsx b/src/components/Home/Sponsors/icons.jsx deleted file mode 100644 index 78b837579..000000000 --- a/src/components/Home/Sponsors/icons.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -export const SVGs = { - Logo: ( - - - - - - - - - - - - - - - - - - ), -}; diff --git a/src/components/Home/Sponsors/index.jsx b/src/components/Home/Sponsors/index.jsx deleted file mode 100644 index ea5487712..000000000 --- a/src/components/Home/Sponsors/index.jsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; -import useThemeContext from '@theme/hooks/useThemeContext'; -import { SVGs } from './icons'; -import axios from 'axios'; -export function Sponsors() { - const [sponsors, setSponsors] = React.useState([]); - React.useEffect(() => { - axios - .post('https://api.opencollective.com/graphql/v2', { - query: `query account($slug: String) { - collective(slug: $slug) { - id, - contributors(roles: BACKER, limit: 100){ - nodes{ - id - name - collectiveSlug - totalAmountDonated - image - } - } - } - }`, - variables: { - slug: 'nativebase', - }, - }) - .then((res) => { - if (res && res.data && res.data.data) - setSponsors(res.data.data.collective.contributors.nodes); - }) - .catch((err) => { - console.log('err', err); - }); - }, []); - - const { isDarkTheme } = useThemeContext(); - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-400'; - return ( -
-
-
-
-
-

- {SVGs.Logo} -

-
-
-

- - Our Sponsors - -

-

- We are very grateful to those who believe in what we do. Here's - to all our wonderful sponsors! -

-

- - Become a sponsor - -

-
- {sponsors.map((sponsor) => ( -
- {sponsor.login} -
- ))} -
-
-
-
-
-
- ); -} diff --git a/src/components/Home/Stats/icons.jsx b/src/components/Home/Stats/icons.jsx deleted file mode 100644 index 800af47f4..000000000 --- a/src/components/Home/Stats/icons.jsx +++ /dev/null @@ -1,260 +0,0 @@ -import * as React from 'react'; -export const SVGs = { - Logo: ( - - - - ), - Github: ( - - - - - ), - Contributions: ( - - - - - - - - - - - - - - - - - - - ), - Dependents: ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), - Downloads: ( - - - - ), -}; diff --git a/src/components/Home/Stats/index.jsx b/src/components/Home/Stats/index.jsx deleted file mode 100644 index 1d6c61aba..000000000 --- a/src/components/Home/Stats/index.jsx +++ /dev/null @@ -1,151 +0,0 @@ -import React from 'react'; -import useThemeContext from '@theme/hooks/useThemeContext'; -import { SVGs } from './icons'; - -export function Stats() { - const [starCount, setStarCount] = React.useState('15k+'); - const [downloadsCount, setDowloadsCount] = React.useState('32K+'); - const [contributionsCount, setContributionsCount] = React.useState('200+'); - const [dependentsCount, setDependentsCount] = React.useState(); - - const getTotalContributors = async () => { - let totalContributors = 0; - for (let page = 1; page < 5; page++) { - const res = await fetch( - `https://api.github.com/repos/Geekyants/nativebase/contributors?per_page=100&page=${page}&anon=true` - ); - const resJson = await res.json(); - if (!resJson.length) break; - totalContributors = totalContributors + resJson.length; - if (resJson.length < 100) { - break; - } - } - if (totalContributors > 0) setContributionsCount(totalContributors); - }; - - React.useEffect(() => { - fetch('https://api.github.com/repos/GeekyAnts/NativeBase') - .then((response) => response.json()) - .then((data) => { - if (data.stargazers_count > 0) - setStarCount(formatData(data.stargazers_count)); - }); - const today = new Date(); - const date = - today.getFullYear() + - '-' + - (today.getMonth() + 1) + - '-' + - today.getDate(); - - fetch( - `https://api.npmjs.org/downloads/point/2016-04-01:${date}/native-base` - ) - .then((response) => response.json()) - .then((data) => { - setDependentsCount(formatData(data.downloads)); - }); - - fetch('https://api.npmjs.org/downloads/point/last-week/native-base') - .then((response) => response.json()) - .then((data) => { - setDowloadsCount(formatData(data.downloads)); - }); - getTotalContributors(); - }, []); - const formatData = (n) => { - if (n < 1e3) return n; - if (n >= 1e3 && n < 1e6) return +(n / 1e3).toFixed(1) + 'K'; - if (n >= 1e6 && n < 1e9) return +(n / 1e6).toFixed(1) + 'M'; - if (n >= 1e9 && n < 1e12) return +(n / 1e9).toFixed(1) + 'B'; - if (n >= 1e12) return +(n / 1e12).toFixed(1) + 'T'; - }; - - const stats = [ - { - name: 'Downloads', - value: downloadsCount, - svg: SVGs['Downloads'], - }, - { - name: 'GithubStars', - value: starCount, - svg: SVGs['Github'], - }, - { - name: 'Contributors', - value: contributionsCount, - svg: SVGs['Contributions'], - }, - { - name: 'Dependents', - value: '50K+', - svg: SVGs['Dependents'], - }, - ]; - - const { isDarkTheme } = useThemeContext(); - const foldBg = ''; - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-400'; - const statsColor = !isDarkTheme ? 'text-gray-500' : 'text-gray-400'; - const ringColor = !isDarkTheme ? 'ring-white' : 'ring-secondary-800'; - - return ( -
-
- ); -} diff --git a/src/components/Home/Themeable.jsx b/src/components/Home/Themeable.jsx deleted file mode 100644 index 66dc61400..000000000 --- a/src/components/Home/Themeable.jsx +++ /dev/null @@ -1,528 +0,0 @@ -import React, { useState } from 'react'; -import { CodeComponent } from './CodeComponent'; -import useThemeContext from '@theme/hooks/useThemeContext'; - -function ColorTheme() { - return ( -
-
Rose
-
-
-
-
-
Rose 50
-
#fff1f2
-
-
-
-
-
-
Rose 100
-
#ffe4e6
-
-
-
-
-
-
Rose 200
-
#fecdd3
-
-
-
-
-
-
Rose 300
-
#fda4af
-
-
-
-
-
-
Rose 400
-
#fb7185
-
-
-
-
-
-
Rose 500
-
#f43f5e
-
-
-
-
-
-
Rose 600
-
#ee1d48
-
-
-
-
-
-
Rose 700
-
#be123c
-
-
-
-
-
-
Rose 800
-
#9f1239
-
-
-
-
-
-
Rose 900
-
#881337
-
-
-
-
Pink
-
-
-
-
-
Pink 50
-
#fdf2f8
-
-
-
-
-
-
Pink 100
-
#fce7f3
-
-
-
-
-
-
Pink 200
-
#fbcfe8
-
-
-
-
-
-
Pink 300
-
#f9a8d4
-
-
-
-
-
-
Pink 400
-
#f472b6
-
-
-
-
-
-
Pink 500
-
#ec4899
-
-
-
-
- ); -} -function Typography() { - return ( -
-
(XS) The quick brown fox
-
(SM) The quick brown fox
-
(LG) The quick brown fox
-
(XL) The quick brown fox
-
- (2XL) The quick brown fox -
-
- (3XL) The quick brown fox -
-
- (4XL) The quick brown fox -
-
- ); -} -function Sizing() { - return ( -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValuePixelsRepresentation
1 - 4px -
-
2 - 8px -
-
3 - 12px -
-
4 - 16px -
-
5 - 20px -
-
6 - 24px -
-
7 - 28px -
-
8 - 32px -
-
9 - 36px -
-
10 - 40px -
-
12 - 48px -
-
16 - 64px -
-
-
-
- ); -} - -const exampleCode = ` - - NativeBase Card -
- -
- - - -`.trim(); - -const SVGs = { - Logo: ( - - - - - - - ), -}; - -export function Themeable() { - // const { isDarkTheme } = useThemeContext(); - // TODO: change this - const foldBg = ''; - const { isDarkTheme } = useThemeContext(); - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-900' : 'text-gray-100'; - const [currentTheme, setCurrentTheme] = useState('color'); - return ( -
-
- ); -} diff --git a/src/components/Home/Themeable/ColorTheme.jsx b/src/components/Home/Themeable/ColorTheme.jsx deleted file mode 100644 index e35e15b44..000000000 --- a/src/components/Home/Themeable/ColorTheme.jsx +++ /dev/null @@ -1,173 +0,0 @@ -import React from 'react'; -export default function ColorTheme() { - return ( -
-
Rose
-
-
-
-
-
Rose 50
-
#fff1f2
-
-
-
-
-
-
Rose 100
-
#ffe4e6
-
-
-
-
-
-
Rose 200
-
#fecdd3
-
-
-
-
-
-
Rose 300
-
#fda4af
-
-
-
-
-
-
Rose 400
-
#fb7185
-
-
-
-
-
-
Rose 500
-
#f43f5e
-
-
-
-
-
-
Rose 600
-
#ee1d48
-
-
-
-
-
-
Rose 700
-
#be123c
-
-
-
-
-
-
Rose 800
-
#9f1239
-
-
-
-
-
-
Rose 900
-
#881337
-
-
-
-
Pink
-
-
-
-
-
Pink 50
-
#fdf2f8
-
-
-
-
-
-
Pink 100
-
#fce7f3
-
-
-
-
-
-
Pink 200
-
#fbcfe8
-
-
-
-
-
-
Pink 300
-
#f9a8d4
-
-
-
-
-
-
Pink 400
-
#f472b6
-
-
-
-
-
-
Pink 500
-
#ec4899
-
-
-
-
- ); -} diff --git a/src/components/Home/Themeable/SizingTheme.jsx b/src/components/Home/Themeable/SizingTheme.jsx deleted file mode 100644 index 706e8c71f..000000000 --- a/src/components/Home/Themeable/SizingTheme.jsx +++ /dev/null @@ -1,152 +0,0 @@ -import React from 'react'; -export default function SizingTheme() { - return ( -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValuePixelsRepresentation
1 - 4px -
-
2 - 8px -
-
3 - 12px -
-
4 - 16px -
-
5 - 20px -
-
6 - 24px -
-
7 - 28px -
-
8 - 32px -
-
9 - 36px -
-
10 - 40px -
-
12 - 48px -
-
16 - 64px -
-
-
-
- ); -} diff --git a/src/components/Home/Themeable/TypographyTheme.jsx b/src/components/Home/Themeable/TypographyTheme.jsx deleted file mode 100644 index 7060f9550..000000000 --- a/src/components/Home/Themeable/TypographyTheme.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -export default function TypographyTheme() { - return ( -
-
(XS) The quick brown fox
-
(SM) The quick brown fox
-
(LG) The quick brown fox
-
(XL) The quick brown fox
-
- (2XL) The quick brown fox -
-
- (3XL) The quick brown fox -
-
- (4XL) The quick brown fox -
-
- ); -} diff --git a/src/components/Home/Themeable/icons.jsx b/src/components/Home/Themeable/icons.jsx deleted file mode 100644 index 337c423f0..000000000 --- a/src/components/Home/Themeable/icons.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -export const SVGs = { - Logo: ( - - - - - - - ), -}; diff --git a/src/components/Home/Themeable/index.jsx b/src/components/Home/Themeable/index.jsx deleted file mode 100644 index 756b929e7..000000000 --- a/src/components/Home/Themeable/index.jsx +++ /dev/null @@ -1,157 +0,0 @@ -import React, { useState } from 'react'; -import { CodeComponent } from '../CodeComponent'; -import useThemeContext from '@theme/hooks/useThemeContext'; -import { SVGs } from './icons'; -import ColorTheme from './ColorTheme'; -import TypographyTheme from './TypographyTheme'; -import SizingTheme from './SizingTheme'; - -const exampleCode = ` - - NativeBase Card -
- -
- - - -`.trim(); - -export function Themeable() { - const foldBg = ''; - const { isDarkTheme } = useThemeContext(); - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-900' : 'text-gray-100'; - const [currentTheme, setCurrentTheme] = useState('color'); - return ( -
-
- ); -} diff --git a/src/components/Home/Universal/icons.jsx b/src/components/Home/Universal/icons.jsx deleted file mode 100644 index 6991f1711..000000000 --- a/src/components/Home/Universal/icons.jsx +++ /dev/null @@ -1,101 +0,0 @@ -import * as React from 'react'; -export const SVGs = { - Logo: ( - - - - ), - Android: ( - - - - ), - iOS: ( - - - - ), - Web: ( - - - - - - - - - - - - ), -}; diff --git a/src/components/Home/Universal/index.jsx b/src/components/Home/Universal/index.jsx deleted file mode 100644 index 61622fe15..000000000 --- a/src/components/Home/Universal/index.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import React from 'react'; -import useThemeContext from '@theme/hooks/useThemeContext'; -import { SVGs } from './icons'; - -const themes = [ - { - svg: SVGs['Android'], - heading: 'Android', - subHeading: - 'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print', - }, - { - svg: SVGs['iOS'], - heading: 'iOS', - subHeading: - 'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print', - }, - { - svg: SVGs['Web'], - heading: 'Web', - subHeading: - 'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print', - }, -]; - -export function Universal() { - const foldBg = ''; - const { isDarkTheme } = useThemeContext(); - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-400'; - const ringColor = !isDarkTheme ? 'ring-white' : 'ring-secondary-800'; - - return ( -
-
- ); -} diff --git a/src/components/Home/Utility/icons.jsx b/src/components/Home/Utility/icons.jsx deleted file mode 100644 index ad0ae17c6..000000000 --- a/src/components/Home/Utility/icons.jsx +++ /dev/null @@ -1,109 +0,0 @@ -import React from 'react'; -export const SVGs = { - Logo: ( - - - - - - - - - - - - - - ), - StyledLogo: ( - - - - - - - - - - - - ), -}; diff --git a/src/components/Home/Utility/index.jsx b/src/components/Home/Utility/index.jsx deleted file mode 100644 index d79c0d36c..000000000 --- a/src/components/Home/Utility/index.jsx +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react'; -import { CodeComponent } from '../CodeComponent'; -import useThemeContext from '@theme/hooks/useThemeContext'; -import { SVGs } from './icons'; - -const exampleCode = ` - - fontSize={4} - fontWeight='bold' - p={3} - mb={[4,5]} - color='white' - bg='primary'> - Hello - -`.trim(); - -export function Utility() { - const foldBg = ''; - const { isDarkTheme } = useThemeContext(); - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-400'; - return ( -
-
- ); -} diff --git a/src/components/Home/UtilityProps.jsx b/src/components/Home/UtilityProps.jsx deleted file mode 100644 index cd46efa15..000000000 --- a/src/components/Home/UtilityProps.jsx +++ /dev/null @@ -1,262 +0,0 @@ -import React from 'react'; -import { useState } from 'react'; -import { CodeComponent } from './CodeComponent'; -import useThemeContext from '@theme/hooks/useThemeContext'; - -const SVGs = { - Desktop: ( - - - - - - - - - - - - - - - - - - - - - - - - - - Clownfish - - - - - Clownfish or anemonefish are fishes from the{' '} - - - subfamily Amphiprioninae in the family{' '} - - - Pomacentridae.{' '} - - - - - SHARE - - - - - LEARN MORE - - - - - ), -}; - -const exampleCode = ` - NativeBase Card - - Clownfish - - Bright orange with three distinctive white bars, clown anemonefish are - among the most recognizable at all reef-dwellers. - - - - - - - -`.trim(); - -export function UtilityProps() { - // const { isDarkTheme } = useThemeContext(); - // TODO: change this - const foldBg = ''; - - const { isDarkTheme } = useThemeContext(); - const themeBg = !isDarkTheme ? 'bg-gray-100' : ''; - // const foldBg = !isDarkTheme ? 'bg-gray-100' : ''; - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-900' : 'text-gray-200'; - const [currentTheme, setCurrentTheme] = useState('mobile'); - return ( -
-
- ); -} diff --git a/src/components/Home/WatchTalk/icons.jsx b/src/components/Home/WatchTalk/icons.jsx deleted file mode 100644 index bc8da4d0c..000000000 --- a/src/components/Home/WatchTalk/icons.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -export const SVGs = { - microphone: ( - - - - ), -}; diff --git a/src/components/Home/WatchTalk/index.jsx b/src/components/Home/WatchTalk/index.jsx deleted file mode 100644 index 4b7b89240..000000000 --- a/src/components/Home/WatchTalk/index.jsx +++ /dev/null @@ -1,126 +0,0 @@ -import React from 'react'; -import useThemeContext from '@theme/hooks/useThemeContext'; -import { SVGs } from './icons'; -export function WatchTalk() { - const { isDarkTheme } = useThemeContext(); - const headingColor = !isDarkTheme ? 'text-gray-800' : 'text-gray-200'; - const subHeadingColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-400'; - const inviteUsColor = !isDarkTheme ? 'text-gray-600' : 'text-gray-100'; - - return ( -
-
-
-
-
- {SVGs['microphone']} -
-
-

- - Talks and Articles - -

-

- Check out Sanket Sahu's talk on building an accessible component - library for native and web at React Day Bangalore. -

- -
-

- Invite us to speak at your next event{' '} -

-

- We love sharing knowledge and meeting other passionate devs. - Invite a NativeBase creator to speak at your next event, we - promise to keep things interesting! -

- - Send Invite - -
-
-
-
-
-
- //
- //
- ); -} diff --git a/src/components/Home/Web.jsx b/src/components/Home/Web.jsx deleted file mode 100644 index 1f0b8d964..000000000 --- a/src/components/Home/Web.jsx +++ /dev/null @@ -1,139 +0,0 @@ -import React from 'react'; -import useThemeContext from '@theme/hooks/useThemeContext'; - -export function Web() { - const { isDarkTheme } = useThemeContext(); - const foldBg = !isDarkTheme ? 'bg-green-50' : 'bg-green-200'; - - return ( -
-
- ); -} diff --git a/src/components/Home/index.js b/src/components/Home/index.js deleted file mode 100644 index f023b9e9f..000000000 --- a/src/components/Home/index.js +++ /dev/null @@ -1,25 +0,0 @@ -export { Accessibility } from './Accessibility'; -export { Community } from './Community'; -export { Creators } from './Creators'; -export { Cta } from './Cta'; -export { Features } from './Features'; -export { FeaturesBlocks } from './FeaturesBlock'; -export { FeaturesWorld } from './FeaturesWorld'; -export { Hero } from './Hero'; -export { Kitchensink } from './Kitchensink'; -export { More } from './More'; -export { News } from './News'; -export { Responsive } from './Responsive'; -export { Sponsors } from './Sponsors'; -export { Stats } from './Stats'; -export { Themeable } from './Themeable'; -export { UtilityProps } from './UtilityProps'; -export { Reviews } from './Reviews'; -export { Universal } from './Universal'; -export { DarkMode } from './DarkMode'; -export { ComponentLibrary } from './ComponentLibrary'; -export { Utility } from './Utility'; -export { NewsLetter } from './Newsletter'; -export { WatchTalk } from './WatchTalk'; -export { Web } from './Web'; -export { PolicyAcceptDialog } from './PolicyAcceptDialog'; diff --git a/src/components/InstallationTiles/index.js b/src/components/InstallationTiles/index.js index e2d82c5c6..1fc4f0053 100644 --- a/src/components/InstallationTiles/index.js +++ b/src/components/InstallationTiles/index.js @@ -24,9 +24,9 @@ export default function InstallationTiles() { }} />
- - - - - - - - - - - -
-
-

Cookie Policy

-

- GeekyAnts Software Pvt. Ltd. having registered office at No. 18, 2nd - Cross Road, N.S Palya, 2nd Stage BTM Layout Bengaluru – 560076, - Karnataka, India ( hereinafter referred to as “We” or “Us”) - understands that your privacy is important to you and are committed - to being transparent about the technology it uses. This cookie - policy explains how and why cookies and other technologies ( - hereinafter referred to as “Cookies and Other tracking Technology”) - may be stored on and accessed from your device when you use or visit - any website or an app that posts a link to this Policy( hereinafter - referred to as “Sites”). This cookie policy must be read with our - Privacy Policy. -

-

- - By continuing to browse or use our Sites (“ - https://nativebase.io”), you - agree that we can store, and access Cookies and Other Tracking - Technologies as described in this Cookie Policy. - -

-
    -
  • - What are Cookies and Other Tracking Technologies? A cookie is a - small text file that can be stored on and accessed from your - device when you visit one of our Sites, to the extent you agree. - The other tracking technologies work similarly to cookies and - place small data files on your devices or monitor your website - activity to enable us to collect information about how you use our - Sites. This allows our Sites to recognize your device from those - of other users of the Sites. The information provided below about - cookies also applies to these other tracking technologies. -
    • -
  • - How do our sites use Cookies and Other Tracking Technologies?We - use Cookies and Other Tracking Technologies to identify you and - your interests, to remember your preferences, and to track your - use of our Sites. We also use Cookies and Other Tracking - Technologies to control access to certain content on our Sites, - protect the Sites, and to process any requests that you make of - us.To administer our Sites and for research purposes, We may also - have contracted with third-party service providers to track and - analyze statistical usage and volume information from our Site - users. These third-party service providers may use persistent - Cookies to help us to improve the user experience, manage our site - content, and analyze how users navigate and utilize the Sites. -
    • -
  • - First and Third-party Cookies“First-party cookies” are cookies - that belong to us and that we place on your device. “Third-party - Cookies” are cookies that another party place on your device - through our Site. We may contract with third-party service - providers to send emails to users who have provided us with their - contact information. To help measure and improve the effectiveness - of our email communications, and/or to determine whether messages - have been opened and links clicked on, the third-party service - providers may place Cookies on the devices of these users. -
    • -
-

- - For more information on how these companies collect and use the - information on our behalf, please refer to their privacy policies - as indicated below. - -

-

- Persistent Cookies: We use persistent Cookies to - improve your experience of using the Sites. This includes recording - your acceptance of our Cookie Policy to remove the cookie message - which first appears when you use the Sites. - Session Cookies: Session Cookies are temporary and - deleted from your machine when your web browser closes. We use - session cookies to help us track internet usage as described above. -

-

- You may refuse to accept browser Cookies by activating the - appropriate setting on your browser. However, if you select this - setting you may be unable to access certain parts of the Sites. - Unless you have adjusted your browser setting so that it will refuse - cookies, our system will issue Cookies when you direct your browser - to our Sites. If you continue browsing the website, you will accept - cookie use. -

-

- The data collected by the Sites and/or through Cookies that may be - placed on your computer will not be kept for longer than is - necessary to fulfill the purposes mentioned above. In any event, - such information will not be kept for longer than one year. -

-

- Our Cookies are used for the following purposes: -

-
    -
  • - Strictly Necessary/Technical:These Cookies are - necessary to allow us to operate our Sites so you may access them - as you have requested. These cookies, for example, let us - recognize that you have created an account and have logged into - that account to access Site content. They also include Cookies - that enable us to remember your previous actions within the same - browsing session and secure our Sites. -
    • -
  • - Analytical/Performance:These Cookies are used by - us or third-party service providers to analyze how the Sites are - used and how they are performing. For example, these cookies track - what pages are most frequently visited, and from what locations - our visitors come from. If you subscribe to a newsletter or - otherwise register with the Sites, these Cookies may be correlated - to you. These Cookies include, for example, Google Analytics - cookies. -
    • -
  • - Functionality:These cookies let us operate the - Sites in accordance with the choices you make. These cookies - permit us to "remember" you in-between visits. For instance, we - will recognize your user name and remember how you customize the - Sites and services, for example by adjusting text size, fonts, - languages and other parts of web pages that are alterable, and - provide you with the same customizations during future visits. -
    • -
  • - Third-Party Advertising:These cookies collect - information about your activities on these and other sites to - provide you targeted advertising. We may also allow our - third-party service providers to use Cookies on the Sites for the - same purposes identified above, including collecting information - about your online activities over time and across different - websites. The third-party service providers that generate these - cookies, such as Adobe, Google, LinkedIn, and Facebook, have their - own privacy policies and may use their cookies to target - advertising to you on other websites, based on your visit to our - Sites. -
    • -
-

- - How do I refuse or withdraw my consent to the use of Cookies? - -

-

- If you do not want cookies to be dropped on your device, you can - adjust the settings of your Internet browser to reject the setting - of all or some cookies and to alert you when a cookie is placed on - your device. Please note that if you use your browser settings to - block all cookies (including strictly necessary Cookies) you may not - be able to access or use all or parts or functionalities of our - Sites. -

-

- If you want to remove previously-stored cookies, you can manually - delete the cookies at any time. However, this will not prevent the - sites from placing further cookies on your device unless and until - you adjust your Internet browser setting as described above. For - more information on this please write to us at{' '} - legal@geekyants.com or send - us a post to: -

-

- Apoorva Sahu (Director) -
- GeekyAnts Software Pvt. Ltd. -
- No. 18, 2nd Cross Road, -
- N.S Palya, 2nd Stage BTM Layout -
- Bangalore – 560076, Karnataka, India -

-
- -
- - ); -} - -export default Home; diff --git a/src/pages/eula.js b/src/pages/eula.js deleted file mode 100644 index 4fa304d32..000000000 --- a/src/pages/eula.js +++ /dev/null @@ -1,609 +0,0 @@ -import Head from '@docusaurus/Head'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import React from 'react'; -import styles from './styles.module.css'; -import { PolicyAcceptDialog } from './../components/Home'; -function Home() { - const context = useDocusaurusContext(); - const { siteConfig = {} } = context; - return ( - - - - - - - - - - - - -
-
-

End User License Agreement

-

- IMPORTANT. READ CAREFULLY: -

-

- This End User License Agreement is deemed to have been executed in - Bangalore, India, between GeekyAnts Software Private Limited and the - End User, upon using the NativeBase: -

-

- Whereas GeekyAnts Software Private Limited (Company) also referred - to as ‘Company’,’Us’ ‘We’ and ‘Our’, is the proposition, planner, - designer, and developer of the GeekyAnts Software, having its office - at No. 18, 2nd Cross Road, N S Palya, 2nd Stage BTM Layout Bengaluru - – 560076, Karnataka, India, and is thereby, the owner and proprietor - of the said Software. -

-

- And Whereas Person/Form/Association of Persons/Company may use the - GeekyAnts Software for developing their respective products, other - than developing similar product by using its methods etc., and such - Person/Form/Association of Persons/Company is/are hereunder called - and referred to as the ‘End User’, ‘Customer’ or ‘You’. -

-

- This Agreement shall come into effect upon the commencement of use - by End User either on payment of prescribed user fee, or upon - commencement of use without fee. -

-

- 1. DEFINITIONS -

-
    -
  • - ‘Effective date’ means the date on which the Software is first - made available to You. -
    • -
  • - ‘NativeBase’ and ‘Software’ means the product called NativeBase - and other web applications, owned and managed by GeekyAnts - Software Private Limited. -
    • -
  • - ‘Paid version’ means the use of licensed GeekyAnts Software on - payment of prescribed Fee, with specified access to its features. -
    • -
  • - ‘Trial version’ means use of GeekyAnts Software without payment of - fees. -
    • -
  • - ‘Updates’ means any modified versions and/or additions to the - GeekyAnts Software. -
    • -
  • - ‘Site’ means the website for GeekyAnts Software Private Limited ( - https://nativebase.io/). -
    • -
  • - ‘Service’ means creating projects by accessing{' '} - https://nativebase.io/. -
    • -
  • - ‘You’ means the final and/or end user/consumer of GeekyAnts - Software or his/her/its legally authorized representative/s. -
    • -
-

- 2. TERMS OF USE OF NativeBase. -

-
    -
  • -

    - These Terms of Use of NativeBase (hereinafter referred to as - ‘Terms’) constitute a legally binding agreement made between You - and GeekyAnts Software Private Limited, having its registered - office at No.18, 2nd Cross Road, N.S Palya, 2nd Stage BTM Layout - Bengaluru – 560076, Karnataka, India (hereinafter referred to as - ‘We’, ‘Us’, or ‘Company’) concerning your access to and use of - the GeekyAnts Software (hereinafter referred to as ‘Software’). -

    -
    • -
  • -

    - You agree by accessing the Software that You have read, - understood and agree to be bound by all the Terms of Use of this - End User Agreement. -

    -
    • -
  • -

    - If You do not agree to these Terms, then You shall be prohibited - from accessing/using/ browsing the Software. We recommend that - you print a copy of these Terms of Use for future reference. -

    -
    • -
  • -

    - We reserve the right to alter/change these End User Terms at our - own discretion. The updated version of GeekyAnts Software End - User Terms will be made available on the NativeBase website. The - updated version shall stand in effect from the very moment that - it becomes accessible to End User. The continued use of the Site - by You shall be regarded as Your consent to use the updated - version of the GeekyAnts Software End User Terms. -

    -
    • -
  • -

    - In order to demonstrate changes as per the requirements of our - users, product, legal and business, we reserve the right to - update or change the Site whenever we deem it necessary. There - is a possibility that the Site might contain certain kind of - information pertaining to the Services which might not be - entirely accurate. We reserve the right to remove such - inaccuracies, defects and make up for the omissions. We reserve - the right to change/update the information at any time without - any prior notice to that effect. -

    -
    • -
  • -

    - Additional policies which also apply to Your use of the Software - include: -

    - -

    - In case of conflict between the privacy policy and/or cookie - policy and/or EULA, the EULA shall supersede. -

    -
    • -
-

- 3. LICENSE -

-
    -
  • - The GeekyAnts Software is licensed and not sold, and We reserve - all rights of the Software. The license remains valid only for the - period for which payment is made. -
    • -
  • - There are two basic versions of the Software which are available - for use, namely a trial version and a paid version. You may use - the Software free of cost via the trial version and it will - continue to be made available to you via the paid version. The - amount required to be paid in order to access the Paid version may - undergo revision/ improvement/ upgrades from time to time. You may - choose to discontinue the use of the Software from the following - month in case the revised amount is not agreeable to You. These - Terms of Use and any policies or operating rules posted by us on - the Site or in respect to the use of the Software constitute the - entire agreement and understanding between You and Us. -
    • -
  • - The Company is and remains the owner of any intellectual property - rights with respect to the Software. -
    • -
  • - Your license is valid for a month from the date of purchase. (For - instance, if You purchase the license on 24/07/2019, it shall be - valid till 24/08/2019). You will have to renew this license, to - continue using the Software, unless You have opted for auto - renewal. -
    • -
  • - If You fail to renew Your license, Your access shall fall back to - the free-version of the Software, or be cancelled, whichever - applicable. -
    • -
-

- 4. ACCEPTABLE USE -

-

- You may not access or use the Software for any purpose other than - what the Software is intended for and its use is permitted by us to - you on payment of the prescribed Fee or without payment of Fee as - Trial version. As an End User of this Software, You agree not to: -

-
    -
  • - Rent, lease, lend, sell, redistribute, sublicense, commercially - exploit either the Paid version or the Trial version. -
    • -
  • - Assign the paid version or the trial version to any third party. -
    • -
  • - Use the paid or trial version for any unlawful or illegal activity - or to facilitate any unlawful or illegal activity. -
    • -
  • - Delete or alter any disclaimers, warnings, copyrights or other - proprietary notices accompanying the Site. -
    • -
  • - Copy, adapt, translate, decompile, reverse engineer, disassemble, - attempt to derive the source code, modify or create derivative - works of the Software or any part thereof, except to the extent - permitted by the applicable law. -
    • -
  • - Copy, store, host, send, use, publish or distribute any material - which consists of any spyware, computer virus, trojan horse or any - other malicious Software. -
    • -
  • Engage in unauthorized framing of or linkage of the Site.
    • -
  • - Use any information obtained from the Software in order to harass, - abuse, or harm another person. -
    • -
  • - Use the Software or our content as part of any effort to compete - with us or to create a revenue- generating endeavor or commercial - enterprise. -
    • -
  • - Attempt to impersonate another user or person, or use the username - of another user. -
    • -
-

- 5. FEE PAYABLE BY USER for NativeBase: -

-
    -
  • - The End User shall pay the Fee for use of the Software, as - indicated in the following{' '} - - link - - . Fees are mentioned exclusive of any taxes, levies, duties, or - similar governmental assessments of any nature, including, - value-added, sales, use or withholding taxes, which can be - accessed by any jurisdiction (collectively, ‘Taxes’). Customer - will be responsible for paying all Taxes associated with its - purchases, except for those taxes based on our net income. Should - any payment for the Services be subject to withholding tax by any - government, Customer will reimburse us for such withholding tax. -
    • -
  • - GeekyAnts Software Private Limited may accept the payment for - licensing of the Software via its payment collection agent and/or - Software distributor/ re-distributor located in different - jurisdictions. Even if you are purchasing a license for use of the - Software via one of the above, these Terms will still be - applicable to you, unless specifically excluded. -
    • -
  • - On successful receipt of payment by Us, We will communicate the - same and permit You to use the Software with full access to its - features, till Your permit expires, as per the Terms of this - Agreement. -
    • -
  • - On receipt of the Fee amount, a receipt to that effect will be - generated, which is subject to further confirmation by us, through - an email communication from Us, which will be received by You - within 24 hours, from the time of transfer of fee, and immediately - thereafter You will be able to get full access to the Software. -
    • -
  • - If for any reason, the payment made by You is not credited in the - account of the Company or is refunded back to you, then You are - not permitted to use the Software. -
    • -
  • - The End Users are hereby warned and prohibited from making any - attempt to pay the Fee through fraudulent or unlawful means. If We - comes to know about the same, then We reserve the right to cancel - the permission/access granted to You to use the Software and also - inform the concerned and/or jurisdictional Authorities to - intervene and take necessary action against You. -
    • -
-

- 6. USE OF DATA -

-
    -
  • - We receive your metadata which is sent with every request and it - includes your system’s operating system details, browser details - and IP address, for the sole purpose of generating usage - statistics, analytics and crash reports in order to orchestrate a - better experience for You while You use the Software. We collect - your name, Email ID and may use this information for internal - purposes like analytics, sending emails and support. We will not - sell your information to any third party organization. -
    • -
  • - We may send You emails regarding updates, promotions, license and - any other relevant information. You have the option of opting out - of promotional and update emails. To do so please write to us at - legal@geekyants.com. -
    • -
  • - It is up to You to share your app state with Us while reporting an - issue. -
    • -
  • - We use Google Analytics for tracking sessions of users which - include pages and actions inside the pages. We use Google Adsense - for advertisement and promotion of the Software. We use email - service providers like MailChimp for email distribution and - tracking. We use various Server Providers for hosting and managing - of the Software. -
    • -
  • - NativeBase can your basic information like Name, Profile Picture, - your review of our website, on its website and other promotional - publication materials under the clients section. -
    • -
-

- 7. DISCLAIMER/ LIMITATION OF LIABILITY -

-
    -
  • -

    - You agree that the use of the Software by You will be solely at - Your own risk, except as expressly set out in these Terms. All - warranties, terms, conditions and undertakings, express or - implied ( including by statute, custom, usage, a course of - dealing or common law) in connection with the Software and - respective services and Your use thereof, including the implied - warranties of satisfactory quality, accuracy and - non-infringement are excluded to the fullest extent permitted by - the applicable law. -

    -
    • -
  • -

    - We are not responsible or liable for any failure to perform or - delay in performing our obligations under these Terms to the - extent that the failure or delay is caused by circumstances - beyond our reasonable control (including but not limited to - Labour disputes, Act of God, War or Terrorist activity, - Malicious damage, Accidents or Compliance with any applicable - law or government order). We will endeavour to minimise the - effects of any of these events and to perform the obligations - that aren’t affected diligently. -

    -
    • -
  • -

    Our responsibility for loss or damage suffered by You:

    -
      -
    • - We will be responsible for any loss or damage that You suffer - which arises out of Our failure in complying with these Terms, - provided that it is a foreseeable result of Our breach of - these Terms. Provided further, that we would not be - responsible for any loss(es) or damage(s) that was/were not - foreseeable at the time You started using the Site/Services. -
      • -
    • - Notwithstanding anything contrary to the clauses contained in - the Disclaimer/Limitation of Liability section, our liability - to You for any cause whatsoever and regardless of the form of - the action, will at all times be limited to a total aggregate - amount equal to the greater of (a) the sum of INR 1000 or (b) - the amount paid, if any, by You to us for the Services/Site - during the six (6) month period prior to any cause of action - arising. -
      • -
    • - We will not be liable to You for any loss or damage, whether - in contract, tort (including negligence), breach of statutory - duty, or otherwise, even if foreseeable, arising under or in - connection with the use of, or inability to use, our - Site/Services or with the use of or reliance on any content - displayed on our Site. -
      • -
    • - In particular, we will not be liable for: -
        -
      • loss of profits, sales, business, or revenue;
        • -
      • business interruption;
        • -
      • loss of anticipated savings;
        • -
      • - loss of business opportunity, goodwill or reputation; - and/or -
        • -
      • any indirect or consequential loss or damage.
        • -
      -
      • -
    -
    • -
-

- 8. INDEMNITY -

-

- You agree to hold harmless and indemnify GeekyAnts Software Private - Limited and its holdings, subsidiaries, affiliates, officers, - agents, and employees from and against any claim, suit or action - arising from or in any way related to Your misuse of the Software or - violation of this Agreement on Your part, including any liability or - expense arising from all claims, losses, damages, suits, judgments, - litigation costs and attorneys' fees, of every kind and nature. -

-

- 9. TERMINATION -

-
    -
  • - These Terms of Use shall remain in full force and effect while You - use the Software as applicable. You may terminate Your use or - participation at any time, for any reason by discontinuing Your - use of the Software. -
    • -
  • - Without limiting any other provision to these Terms, we reserve - the right, at our sole discretion and without liability, to - terminate access to the Software to any person for any reason, - including, but not limited to breach of any representation, - warranty or covenant contained in these Terms or of any applicable - law or regulation. -
    • -
  • - In the event where We terminate your account unreasonably and - prior to the completion of services, we will refund the amount - received from You for the said services for the unutilized period - back to You, but You will not have any additional claim against us - towards compensation or damages whatsoever. If we issue a refund, - we are under no obligation to do the same in the future. -
    • -
  • - If We terminate or suspend Your account before the stipulated - period on account of non-compliance with the Terms, You are - prohibited from using and/or accessing this Software and You shall - not receive a refund of any amount, if paid by You. -
    • -
  • - In addition to terminating or suspending Your account, we reserve - the right to take appropriate legal action, including, but not - limited to civil, criminal and injunctive redress. -
    • -
-

- 10. GENERAL -

-
    -
  • -

    - This agreement embodies the entire understanding between the - parties with respect to the subject matter of this agreement. By - downloading NativeBase, You consent to receive electronic - communications and agree that all agreements, notices, - disclosures, and other communications we provide to You - electronically, via email or through Our Site, which shall - satisfy any and all legal requirement/s shall be in writing. -

    -
    • -
  • -

    - Our failure to exercise or enforce any right or provision of - these Terms shall not operate as a waiver of such right or - provision. -

    -
    • -
  • -

    - We may assign all of our rights and obligations to others at any - time. -

    -
    • -
  • -

    - If any provision or part of a provision of these Terms is - unlawful, void or unenforceable, that provision or part of the - provision is deemed severable from these Terms and does not - affect the validity and enforceability of the remaining - provisions. -

    -
    • -
  • -

    - There is no joint venture, partnership, employment or agency - relationship created between You and Us as a result of these - Terms or use of the Site or Services. -

    -
    • -
  • -

    - You acknowledge that the configurations or the arrangements of - NativeBase or Data which we have installed is subject to - Copyright, and in the absence of our written permission, shall - not construe that You have been granted a license or permission - to copy the configuration or arrangement onto any system. -

    -
    • -
  • -

    - We reserve the right to refuse granting any permissions to You - if You are not aligned with our business operating principles - and policies. -

    -
    • -
  • -

    - We shall not be responsible or liable for any loss, damage, - delay or failure to act which is beyond our control. -

    -
    • -
  • -

    - These Terms shall be governed and construed in accordance with - the Laws of India, and any dispute relating to these Terms will - be subjected to the exclusive jurisdiction of the courts of - Bengaluru, Karnataka, India. -

    -
    • -
  • -

    - A person who is not a party to this End User License Agreement - cannot enforce any of the Terms of the same of whatsoever - nature. -

    -

    - Notwithstanding anything contained in this End User License - Agreement or any law of End User State/Country, You and the - Company emphatically agree that each may bring claims against - each other only in its individual capacity, and not through any - purported class or representative action -

    -
    • -
-

- 11. CONTACT -

-

- For any questions, comments, or clarifications about this policy, - email us at legal@geekyants.com or by post to: -

-

- Apoorva Sahu, Director -
- GeekyAnts Software Private Limited, -
- No. 18, 2nd Cross Road, -
- N S Palya, 2nd Stage BTM Layout -
- Bangalore – 560076, Karnataka, India. -

-
- -
- - ); -} - -export default Home; diff --git a/src/pages/index_del.js b/src/pages/index_del.js deleted file mode 100644 index faf1f0f21..000000000 --- a/src/pages/index_del.js +++ /dev/null @@ -1,110 +0,0 @@ -import Head from '@docusaurus/Head'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import Layout from '@theme/Layout'; -import React from 'react'; -import { - Accessibility, - Community, - Creators, - ComponentLibrary, - Cta, - Hero, - Utility, - Reviews, - Universal, - More, - Responsive, - DarkMode, - Sponsors, - Stats, - Themeable, - NewsLetter, - UtilityProps, - WatchTalk, - Web, - PolicyAcceptDialog, -} from './../components/Home'; -import styles from './styles.module.css'; -function Home() { - const context = useDocusaurusContext(); - const { siteConfig = {} } = context; - return ( - - - - - - - - - - - - - - -
- -
-
- - - - - - - - - - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - - - - - {/* */} - - - - - -
-
- {/* Cookie Policy Fold */} - -
- - ); -} -export default Home; diff --git a/src/pages/privacy-policy.js b/src/pages/privacy-policy.js deleted file mode 100644 index 2df31aa5e..000000000 --- a/src/pages/privacy-policy.js +++ /dev/null @@ -1,453 +0,0 @@ -import Head from '@docusaurus/Head'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import React from 'react'; -import styles from './styles.module.css'; -import { PolicyAcceptDialog } from './../components/Home'; - -function Home() { - const context = useDocusaurusContext(); - const { siteConfig = {} } = context; - - return ( - - - - - - - - - - - - -
-
-

Privacy Policy

-

- This privacy policy has been compiled to better serve those who are - concerned with how their ‘Personal Information’ or 'Personally - Identifiable Information' (PII) is being used online. -

-

- Personal Information, as per the General Data Protection Regulation - (GDPR) means and includes all the information relating to an - identified or identifiable natural person. -

-

- PII, as described in US privacy law and information security, is - information that can be used on its own or with other information to - identify, contact, or locate a single person, or to identify an - individual in context. -

-

- Please read our privacy policy carefully to get a clear - understanding of how we collect, use, protect or otherwise handle - your Personal Information or Personally Identifiable Information in - accordance with our website. -

-

- This privacy policy shall be applicable for the users of{' '} - https://nativebase.io. -

-

- - What personal information do we collect from the people that visit - our blog, website or app? - -

-

- When ordering or registering on our site, as appropriate, you may be - asked to enter your name, email address, mailing address, phone - number, credit card information or other details to help you with - your experience. -

-

- When using the web app, we collect your system's operating system - details, browser details and IP address, for the sole purpose of - generating usage statistics, analytics and crash reports in order to - orchestrate a better experience for You while You use the Software. - We collect your name, Email ID and may use this information for - internal purposes like analytics, sending emails and support. -

-

- It is upto you to share your app state while reporting an issue. -

-

- When do we collect information? -

-

- We collect information from you when you register on our site, when - you use the NativeBase website or app, place an order, subscribe to - a newsletter, respond to a survey, fill out a form, use live chat, - open a support ticket or enter information on our site or use the - app. -

-

- How do we use your information? -

-

- We may use the information we collect from you when you register, - make a purchase, sign up for our newsletter, respond to a survey or - marketing communication, surf the website, or use certain other site - features in the following ways: -

-
    -
  • - To personalize your experience and to allow us to deliver the type - of content and product offerings in which you are most interested. -
    • -
  • - To improve our website and app in order to better serve you. -
    • -
  • - To allow us to better service you in responding to your customer - service requests. -
    • -
  • - To administer a contest, promotion, survey or other site feature. -
    • -
  • To quickly process your transactions.
    • -
  • To ask for ratings and reviews of services or products.
    • -
  • - To follow up with them after correspondence (live chat, email or - phone inquiries). -
    • -
-

- How do we protect your information? -

-

- Our website is scanned on a regular basis for security holes and - known vulnerabilities in order to make your visit to our site as - safe as possible. -

-

We use regular Malware Scanning.

-

- Your personal information is contained behind secured networks and - is only accessible by a limited number of persons who have special - access rights to such systems, and are required to keep the - information confidential. In addition, all sensitive/credit - information you supply is encrypted via Secure Socket Layer (SSL) - technology. -

-

- We implement a variety of security measures when a user places an - order enters, submits, or accesses their information to maintain the - safety of your personal information. -

-

- All transactions are processed through a gateway provider and are - not stored or processed on our servers. -

-

- Do we use 'cookies'? -

-

- Yes. Cookies are small files that a site or its service provider - transfers to your computer's hard drive through your Web browser (if - you allow) that enables the site's or service provider's systems to - recognize your browser and capture and remember certain information. - For instance, we use cookies to help us remember and process the - items in your shopping cart. They are also used to help us - understand your preferences based on previous or current site - activity, which enables us to provide you with improved services. We - also use cookies to help us compile aggregate data about site - traffic and site interaction so that we can offer better site - experiences and tools in the future. -

-

- We use cookies to: -

-
    -
  • Help remember and process the items in the shopping cart.
    • -
  • Understand and save user's preferences for future visits.
    • -
  • Keep track of advertisements.
    • -
  • - Compile aggregate data about site traffic and site interactions in - order to offer better site experiences and tools in the future. We - may also use trusted third-party services that track this - information on our behalf. -
    • -
-

- If users disable cookies in their browsers -

-

- If you turn cookies off, it will turn off some of the features of - the site. -

-

- For more information, please refer to our cookie policy{' '} - - https://nativebase.io/cookie-policy - - . -

-

- Data Retention -

-

- We will hold your information for as long as necessary to fulfill - the purposes set forth in this Policy or as long as we are legally - required or permitted to do so. Information may persist in copies - made for backup and business continuity purposes for additional - time. -

-

- Your Choices and Rights -

-

You have,

-
    -
  • the right to be informed;
    • -
  • the right of access;
    • -
  • the right to rectification;
    • -
  • the right to erasure;
    • -
  • the right to restrict processing;
    • -
  • the right to data portability;
    • -
  • the right to object; and,
    • -
  • - the right not to be subject to automated decision-making including - profiling. -
    • -
-

- You have the right to complain to us if you think there is an issue - in how we are handling your data via email to - legal@geekyants.com or - reach out to relevant government authority. -

-

- Access To Your Personal Data -

-

- Upon request we will provide you with information about whether we - hold, or process on behalf of a third party, any of your personal - data. You may access, correct, or request deletion of your personal - data by logging into your account, contacting us at{' '} - legal@geekyants.com . We - will respond to you within 1 month of your request. -

-

- Deleting your account -

-

- You may choose to close your account at any time. You can request - that we close it for you by writing to us at{' '} - legal@geekyants.com . -

-

- Third-party disclosure -

-

- We do not sell, trade, or otherwise transfer to outside parties your - Personally Identifiable Information unless we provide users with - advance notice. This does not include website hosting partners and - other parties who assist us in operating our website, marketing, - advertising, conducting our business, or serving our users, so long - as those parties agree to keep this information confidential. We may - also release information when it's release is appropriate to comply - with the law, enforce our site policies, or protect ours or others' - rights, property or safety. -

-

- Third-party links -

-

- Occasionally, at our discretion, we may include or offer third-party - products or services on our website. These third-party sites have - separate and independent privacy policies. We therefore have no - responsibility or liability for the content and activities of these - linked sites. Nonetheless, we seek to protect the integrity of our - site and welcome any feedback about these sites. -

-

- Google -

-

- Google's advertising requirements can be summed up by{' '} - - Google's Advertising Principles - - . They are put in place to provide a positive experience for users. -

-

We use Google AdSense Advertising on our website.

-

- Google, as a third-party vendor, uses cookies to serve ads on our - site. Google's use of the DART cookie enables it to serve ads to our - users based on previous visits to our site and other sites on the - Internet. Users may opt-out of the use of the DART cookie by - visiting the Google Ad and Content Network privacy policy. -

-

- We have implemented the following -

-
    -
  • Remarketing with Google AdSense
    • -
  • Google Display Network Impression Reporting
    • -
  • Demographics and Interests Reporting
    • -
  • DoubleClick Platform Integration
    • -
-

- We, along with third-party vendors such as Google use first-party - cookies (such as the Google Analytics cookies) and third-party - cookies (such as the DoubleClick cookie) or other third-party - identifiers together to compile data regarding user interactions - with ad impressions and other ad service functions as they relate to - our website. -

-

- Opting out -

-

- Users can set preferences for how Google advertises to you using the - Google Ad Settings page. Alternatively, you can opt out by visiting - the Network Advertising Initiative Opt Out page or by using the - Google Analytics Opt Out Browser add on. -

-

- California Online Privacy Protection Act -

-

- CalOPPA is the first state law in the USA to require commercial - websites and online services to post a privacy policy. The law's - reach stretches well beyond California to require any person or - company in the United States (and conceivably the world) that - operates websites collecting Personally Identifiable Information - from California consumers to post a conspicuous privacy policy on - its website stating exactly the information being collected and - those individuals or companies with whom it is being shared. To see - more at:{' '} - - Click here - -

-

- According to CalOPPA, we agree to the following -

-

Users can visit our site anonymously.

-

- Once this privacy policy is created, we will add a link to it on our - home page or as a minimum, on the first significant page after - entering our website. -

-

- Our Privacy Policy link includes the word 'Privacy' and can easily - be found on the page specified above. -

-

You will be notified of any Privacy Policy changes:

-
    -
  • On our Privacy Policy Page
    • -
-

Can change your personal information:

-
    -
  • By logging in to your account
    • -
-

- How does our site handle Do Not Track signals? -

-

- We honor Do Not Track signals and Do Not Track, plant cookies, or - use advertising when a Do Not Track (DNT) browser mechanism is in - place. -

-

- - Does our site allow third-party behavioral tracking? - -

-

- It's also important to note that we allow third-party behavioral - tracking -

-

- COPPA (Children’s Online Privacy Protection Act) -

-

- When it comes to the collection of personal information from - children under the age of 13 years old, the Children's Online - Privacy Protection Act (COPPA) puts parents in control. The Federal - Trade Commission, United States' consumer protection agency, - enforces the COPPA Rule, which spells out what operators of websites - and online services must do to protect children's privacy and safety - online. -

-

- We do not specifically market to children under the age of 13 years - old. -

-

- Fair Information Practices -

-

- The Fair Information Practices Principles form the backbone of - privacy law in the United States and the concepts they include have - played a significant role in the development of data protection laws - around the globe. Understanding the Fair Information Practice - Principles and how they should be implemented is critical to comply - with the various privacy laws that protect personal information. -

-

- - In order to be in line with Fair Information Practices we will - take the following responsive action, should a data breach occur - -

-

We will notify you via email

-
    -
  • Within 7 business days
    • -
-

- We also agree to the Individual Redress Principle which requires - that individuals have the right to legally pursue enforceable rights - against data collectors and processors who fail to adhere to the - law. This principle requires not only that individuals have - enforceable rights against data users, but also that individuals - have recourse to courts or government agencies to investigate and/or - prosecute non-compliance by data processors. -

-

- Contacting Us -

-

- If there are any questions regarding this privacy policy, you may - email us at{' '} - legal@geekyants.com or send - us a post to: -

-

- Apoorva Sahu (Director) -
- GeekyAnts Software Pvt. Ltd. -
- No. 18, 2nd Cross Road, -
- N.S Palya, 2nd Stage BTM Layout -
- Bangalore – 560076, Karnataka, India -

-
- -
- - ); -} - -export default Home; diff --git a/src/theme/Footer.js b/src/theme/Footer.js index 8c7934c8a..68efb7ca4 100644 --- a/src/theme/Footer.js +++ b/src/theme/Footer.js @@ -22,11 +22,11 @@ const communities = [ const docs = [ { name: 'Introduction', - url: 'https://alpha-docs.nativebase.io/', + url: 'https://docs.nativebase.io/', }, { name: 'Examples', - url: 'https://alpha-docs.nativebase.io/todo-example', + url: 'https://docs.nativebase.io/todo-example', }, ]; const more = [ @@ -40,11 +40,11 @@ const more = [ }, { name: 'Privacy Policy', - url: 'https://alpha.nativebase.io/privacy-policy', + url: 'https://nativebase.io/privacy-policy', }, { name: 'Cookie Policy', - url: 'https://alpha.nativebase.io/cookie-policy', + url: 'https://nativebase.io/cookie-policy', }, ]; export default function Footer() { diff --git a/static/img/NativeBaseSnippet.gif b/static/img/NativeBaseSnippet.gif new file mode 100644 index 000000000..4a5c98570 Binary files /dev/null and b/static/img/NativeBaseSnippet.gif differ diff --git a/versioned_docs/version-3.0.4/FAB.md b/versioned_docs/version-3.0.4/FAB.md new file mode 100644 index 000000000..b2da69276 --- /dev/null +++ b/versioned_docs/version-3.0.4/FAB.md @@ -0,0 +1,44 @@ +--- +id: FAB +title: FAB +--- + +import { ComponentTheme } from '../../src/components'; + +A floating action button is a circular icon button that hovers over content to promote a primary action in the application. + +## Import + +```jsx +import { Fab } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=composites,Fab,Basic.tsx + +``` + +### Placement + +```ComponentSnackPlayer path=composites,Fab,Placement.tsx + +``` + +### Custom Position + +```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx + +``` + +## Styling + + + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.0.4/Kbd.md b/versioned_docs/version-3.0.4/Kbd.md new file mode 100644 index 000000000..2d76d3459 --- /dev/null +++ b/versioned_docs/version-3.0.4/Kbd.md @@ -0,0 +1,54 @@ +--- +id: Kbd +title: KBD +--- + +The keyboard key component exists to show which key or combination of keys performs a given action. + +## Implements + +- [`Box`](box.md) + +## Examples + +### Basic + +```SnackPlayer name=KBD%20Example +import React from 'react'; +import { VStack, HStack, Kbd, Text, NativeBaseProvider, Center } from 'native-base'; + +function KbdComponent () { + return ( + + + shift + + + C + + + shift + then + H + + + alt + or + option + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +`Kbd` implements **[Box](box.md)**, so all the Box Props can be passed to it. diff --git a/versioned_docs/version-3.0.4/VStack.md b/versioned_docs/version-3.0.4/VStack.md new file mode 100644 index 000000000..837efa53c --- /dev/null +++ b/versioned_docs/version-3.0.4/VStack.md @@ -0,0 +1,24 @@ +--- +id: VStack +title: VStack / Column +--- + +`VStack` aligns items vertically.`Column` is also an alias for `VStack`. + +## Import + +```jsx +import { VStack } from 'native-base'; +``` + +## Usage + +```ComponentSnackPlayer path=primitives,VStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,VStack.tsx + +``` diff --git a/versioned_docs/version-3.0.4/ZStack.md b/versioned_docs/version-3.0.4/ZStack.md new file mode 100644 index 000000000..9f6969a7c --- /dev/null +++ b/versioned_docs/version-3.0.4/ZStack.md @@ -0,0 +1,23 @@ +`ZStack` aligns items absolutely in the z-axis. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,ZStack,example.tsx + +``` + +### Items Centered + +You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children. + +```ComponentSnackPlayer path=primitives,ZStack,CenterStack.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,ZStack,index.tsx + +``` diff --git a/versioned_docs/version-3.0.4/accessibility.md b/versioned_docs/version-3.0.4/accessibility.md new file mode 100644 index 000000000..a59a76697 --- /dev/null +++ b/versioned_docs/version-3.0.4/accessibility.md @@ -0,0 +1,24 @@ +--- +id: accessibility +title: Accessibility +--- + +NativeBase comes with the latest accessibility standards out of the box including aria and role attributes, focus management, and keyboard navigation. + +## Accessible Roles + +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. + +## Accessible Labels + +When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://www.notion.so/Accessibility-83852d7c4b094e69a3e4f1047994bd1c) does this for you out of the box. + +## Keyboard Navigation + +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). + +## Focus Management + +Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. + +In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/versioned_docs/version-3.0.4/accordion.md b/versioned_docs/version-3.0.4/accordion.md new file mode 100755 index 000000000..b3544f71a --- /dev/null +++ b/versioned_docs/version-3.0.4/accordion.md @@ -0,0 +1,419 @@ +--- +id: accordion +title: Accordion +--- + +## Implements + +- [`Collapse`](collapse.md), [`Box`](box.md) + +## Import + +```jsx +import { Accordion } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=Basic +import React from 'react'; +import { ScrollView } from 'react-native'; +import { Accordion, NativeBaseProvider, Center, Box } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 2 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 3 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ + + +
+ + ); +} + +``` + +### Multiple + +```SnackPlayer name=Multilple +import React from 'react'; +import { Accordion, Box, NativeBaseProvider, Center } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 2 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 3 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +### Default Index + +```SnackPlayer name=DefaultIndex +import React from 'react'; +import { ScrollView } from 'react-native'; +import { Accordion, Box, NativeBaseProvider, Center } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 2 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 3 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ + + +
+ + ); +} + +``` + +### Toggle + +```SnackPlayer name=Toggle +import React from 'react'; +import { Accordion, Box, NativeBaseProvider, Center } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 2 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 3 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +### Expanded Style + +```SnackPlayer name=Style +import React from 'react'; +import { Accordion, Box, NativeBaseProvider, Center } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Click me to see a different style + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + I'm Disabled 😢 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +### Accessing Internal State + +```SnackPlayer name=InternalState +import React from 'react'; +import { Accordion, Box, NativeBaseProvider, Center, Icon } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + {({ isExpanded }: any) => ( + <> + + {isExpanded ? 'Fire' : 'Snow'} + {isExpanded ? ( + + ) : ( + + )} + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. + + + )} + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +### Accordion + +| Name | Type | Description | Default | +| ------------- | ---------------- | -------------------------------------------------------------------------------------------------------- | ------- | +| allowMultiple | boolean | If true, multiple accordion items can be expanded at once. | - | +| allowToggle | boolean | If true, any expanded accordion item can be collapsed again. | - | +| index | Number[], number | The index(es) of the expanded accordion item. | - | +| defaultIndex | Number[], number | The initial index(es) of the expanded accordion item. Must be an array for allowMultiple={true} to work. | - | +| onChange | function | The callback invoked when accordion items are expanded or collapsed. | - | + +**Accordion** uses **[Collapse](collapse.md)** to provide height animation. + +### AccordionItem + +| Name | Type | Description | Default | +| ---------- | ------- | ----------------------------------------------- | ------- | +| id | string | A unique id for the accordion item. | - | +| isDisabled | boolean | If true, the accordion header will be disabled. | - | + +### Accordion.Summary + +**Accrodion.Summary** renders a button and composes **[Box](box.md)**. All the **Box** props can be passed to **Accrodion.Summary** and you can style it by passing pseudo style props like `_expanded`, `_disabled`, `_hover`, etc. + +### Accordion.Details + +**AccordionDetails** composes **[Collapse](collapse.md)** to provide height animation. + +### Accordion.Icon + +**AccordionIcon** renders an Icon and composes **[Icon](icon.md)**. + +## Accessibility + +WIP (Work in progress) diff --git a/versioned_docs/version-3.0.4/actionSheet.md b/versioned_docs/version-3.0.4/actionSheet.md new file mode 100644 index 000000000..c3c21288d --- /dev/null +++ b/versioned_docs/version-3.0.4/actionSheet.md @@ -0,0 +1,78 @@ +--- +id: actionSheet +title: ActionSheet +--- + +import { ComponentTheme } from '../../src/components'; + +An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content. + +## Import + +NativeBase exports 3 modal-related components: + +- **Actionsheet**: Provides the context and state for all components. +- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components. +- **Actionsheet.Item**: A button to wrap the options of the Actionsheet. + +```jsx +import { Actionsheet } from 'native-base'; +``` + +## Examples + +### Usage + +```ComponentSnackPlayer path=composites,Actionsheet,Usage.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Actionsheet,Composition.tsx + +``` + +### DisableOverlay + +```ComponentSnackPlayer path=composites,Actionsheet,DisableOverlay.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=composites,Actionsheet,Icon.tsx + +``` + +## Props + +### Actionsheet + +```ComponentPropTable path=composites,Actionsheet,Actionsheet.tsx + +``` + +### Actionsheet.Content + +```ComponentPropTable path=composites,Actionsheet,ActionsheetContent.tsx + +``` + +### Actionsheet.Item + +ActionsheetItem implements [Button](button.md#props) + +## Styling + + + +## Accessibility + +- ActionSheet has `aria-modal` set to true. +- ActionSheet has `role` set to `dialog`. +- When the ActionSheet opens, focus is trapped within it. +- Pressing Esc closes the ActionSheet. +- When the ActionSheet opens, focus is automatically set to the first enabled element. +- Clicking on the overlay closes the ActionSheet. +- Scrolling is blocked on the elements behind the ActionSheet. diff --git a/versioned_docs/version-3.0.4/alert.md b/versioned_docs/version-3.0.4/alert.md new file mode 100644 index 000000000..a56754e77 --- /dev/null +++ b/versioned_docs/version-3.0.4/alert.md @@ -0,0 +1,87 @@ +--- +id: alert +title: Alert +--- + +import { ComponentTheme } from '../../src/components'; + +`Alerts` are used to communicate a state that affects a system, feature or page. + +## Import + +NativeBase exports 5 Alert related components: + +- `Alert`: The wrapper for alert components. +- `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. +- `Alert.Title`: The title of the alert to be announced by screen readers. +- `Alert.Description`: The description of the alert to be announced by screen readers. + +```jsx +import { Alert } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Alert,usage.tsx + +``` + +### Status + +```ComponentSnackPlayer path=composites,Alert,status.tsx + +``` + +### Variant + +```ComponentSnackPlayer path=composites,Alert,variant.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Alert,composition.tsx + +``` + +### Action + +```ComponentSnackPlayer path=composites,Alert,action.tsx + +``` + +## Props + +### Alert + +```ComponentPropTable path=composites,Alert,Alert.tsx + +``` + +### Alert.Icon + +```ComponentPropTable path=composites,Alert,AlertIcon.tsx + +``` + +### Alert.Title + +```ComponentPropTable path=composites,Alert,AlertTitle.tsx + +``` + +### Alert.Description + +```ComponentPropTable path=composites,Alert,AlertDescription.tsx + +``` + +## Styling + + + +## Accessibility + +Alert has `role` set to `alert`. diff --git a/versioned_docs/version-3.0.4/alertDialog.md b/versioned_docs/version-3.0.4/alertDialog.md new file mode 100644 index 000000000..5e9d0d3d8 --- /dev/null +++ b/versioned_docs/version-3.0.4/alertDialog.md @@ -0,0 +1,157 @@ +--- +id: alertDialog +title: AlertDialog +--- + +import { ComponentTheme } from '../../src/components'; + +`AlertDialog` component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes [`Modal`](modal.md) so you can use all its props. + +## Import + +- `AlertDialog`: provides context and state for the dialog. +- `AlertDialog.Header`: contains the title announced by screen readers. +- `AlertDialog.Body`: contains the description announced by screen readers. +- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog.Content`: The wrapper for the alert dialog's content. +- `AlertDialog.CloseButton`: The button that closes the dialog. + +```jsx +import { AlertDialog } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=AlertDialog%20Basic +import React from "react"; +import { + AlertDialog, + Button, + Center, + NativeBaseProvider, +} from "native-base"; + +function AlertDialogComponent() { + const [isOpen, setIsOpen] = React.useState(false); + const onClose = () => setIsOpen(false); + const cancelRef = React.useRef(); + return ( +
+ + + + Delete Customer + + + Are you sure? You can't undo this action afterwards. + + + + + + + + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Transition + +```SnackPlayer name=AlertDialog%20Transition +import React from "react"; +import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base"; + +function AlertDialogComponent() { + const [isOpen, setIsOpen] = React.useState(false); + const onClose = () => setIsOpen(false); + const cancelRef = React.useRef(); + return ( +
+ + + + Discard Changes? + + Are you sure you want to discard all of your notes? 44 words will be + deleted. + + + + + + + + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Styling + + + +## Props + +AlertDialog and its components compose the **[Modal](modal.md)** component, so all the [`Modal props`](modal.md#props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`. + +| Name | Type | Description | Default | +| ------------------- | --------- | -------------------------------------------------------------- | ------- | +| leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | - | + +## Accessibility + +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) + +### Keyboard Interactions + +| Name | Description | +| ----------- | --------------------------------------------------------- | +| Space | Opens/closes the dialog. | +| Enter | Opens/closes the dialog. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | diff --git a/versioned_docs/version-3.0.4/appBar.md b/versioned_docs/version-3.0.4/appBar.md new file mode 100644 index 000000000..583007a50 --- /dev/null +++ b/versioned_docs/version-3.0.4/appBar.md @@ -0,0 +1,89 @@ +--- +id: appBar +title: AppBar +--- + +`AppBar` component can be used to create app headers. + +## Examples + +### Usage + +```SnackPlayer name=AppBar%20Usage +import React from "react"; +import { + AppBar, + IconButton, + Icon, + Text, + VStack, + NativeBaseProvider +} from "native-base"; + +function AppBarComponent() { + return ( + + + + } + /> + + + + + + Title + + + Subtitle + + + + + + } + /> + } + /> + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Props + +`AppBar` implements **[Box](box.md)**, so all the Box Props can be passed to it. + +### AppBar Props + +| Name | Type | Description | Default | +| --------------- | ------ | ---------------------------------------------------------------------- | ------- | +| statusBarHeight | number | Defaults to SafeAreaView on iOS and Statusbar.height on android. | - | +| space | number | Space between AppBar.Left, AppBar.Content and AppBar.Right components. | 2 | + +### AppBar.Left + +Implements [`HStack`](hStack.md), all the props of HStack can be passed. + +### AppBar.Content + +Implements [`HStack`](hStack.md), all the props of HStack can be passed. + +### AppBar.Right + +Implements [`HStack`](hStack.md), all the props of HStack can be passed. diff --git a/versioned_docs/version-3.0.4/appDrawer.md b/versioned_docs/version-3.0.4/appDrawer.md new file mode 100644 index 000000000..21e0defe9 --- /dev/null +++ b/versioned_docs/version-3.0.4/appDrawer.md @@ -0,0 +1,57 @@ +--- +id: appDrawer +title: App drawer +--- + +Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it. + +```SnackPlayer name=AppDrawer +import React from "react"; +import { IconButton, SimpleGrid, Icon, NativeBaseProvider } from "native-base"; +import {MaterialIcons} from '@expo/vector-icons'; + +function AppDrawer(){ + const icons = [ + "bolt", + "build", + "cloud", + "delivery-dining", + "favorite", + "music-note", + "invert-colors-on", + "navigation", + "settings", + "sports-esports", + "shield", + "photo-camera", + "network-wifi", + "nightlight-round", + "flight", + "extension", + "duo", + "album", + "access-alarm", + "forum", + ]; + + return + {icons.map((icon) => ( + } + /> + ))} + +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/aspectRatio.md b/versioned_docs/version-3.0.4/aspectRatio.md new file mode 100644 index 000000000..036dfc3f8 --- /dev/null +++ b/versioned_docs/version-3.0.4/aspectRatio.md @@ -0,0 +1,74 @@ +--- +id: aspectRatio +title: AspectRatio +--- + +## Implements + +- [`Box`](box.md) + +## Example + +### Basic + +```SnackPlayer name=AspectRatio%20Example +import React from "react"; +import { AspectRatio, Box, NativeBaseProvider, Center } from "native-base"; +function Component() { + return ( + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Embed Image + +```SnackPlayer name=AspectRatio%20ExampleEmbedImage +import React from "react"; +import { AspectRatio, Image, NativeBaseProvider, Center } from "native-base"; +function Component() { + return ( + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## Props + +`AspectRatio` implements **[Box](box.md)**, so all the Box props can be passed to it. + +| Name | Type | Description | Default | +| ----- | ------ | ---------------------------------------------- | ------- | +| ratio | number | The aspect ratio(width/height) of the content. | `4/3` | diff --git a/versioned_docs/version-3.0.4/avatar.md b/versioned_docs/version-3.0.4/avatar.md new file mode 100644 index 000000000..dff7875cc --- /dev/null +++ b/versioned_docs/version-3.0.4/avatar.md @@ -0,0 +1,76 @@ +--- +id: avatar +title: Avatar +--- + +import { ComponentTheme } from '../../src/components'; + +`Avatar` component is used to represent a user and it can display a profile picture, initials or a fallback icon. + +## Import + +NativeBase exports 3 avatar-related components: + +- `Avatar`: An image that represents the user. +- `Avatar.Badge`: A wrapper that displays its content on the bottom right corner of the avatar. +- `Avatar.Group`: A wrapper to stack multiple avatars together. + +```jsx +import { Avatar } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Avatar,usage.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Avatar,size.tsx + +``` + +### Fallbacks + +```ComponentSnackPlayer path=composites,Avatar,Fallback.tsx + +``` + +### Avatar Badge + +```ComponentSnackPlayer path=composites,Avatar,AvatarBadge.tsx + +``` + +### Avatar Group + +```ComponentSnackPlayer path=composites,Avatar,AvatarGroup.tsx + +``` + +## Props + +### Avatar + +```ComponentPropTable path=composites,Avatar,Avatar.tsx + +``` + +### Avatar.Group + +```ComponentPropTable path=composites,Avatar,Group.tsx + +``` + +### Avatar.Badge + +```ComponentPropTable path=composites,Avatar,Badge.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/badge.md b/versioned_docs/version-3.0.4/badge.md new file mode 100644 index 000000000..607a80451 --- /dev/null +++ b/versioned_docs/version-3.0.4/badge.md @@ -0,0 +1,50 @@ +--- +id: badge +title: Badge +--- + +import { ComponentTheme } from '../../src/components'; + +`Badges` are used to highlight an item's status for quick recognition. + +## Import + +```jsx +import { Badge } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Badge,usage.tsx + +``` + +### Color Scheme + +```ComponentSnackPlayer path=composites,Badge,color.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,Badge,variants.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Badge,composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Badge,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/box.md b/versioned_docs/version-3.0.4/box.md new file mode 100644 index 000000000..5c884c1ef --- /dev/null +++ b/versioned_docs/version-3.0.4/box.md @@ -0,0 +1,138 @@ +--- +id: box +title: Box +--- + +This is a generic component for low level layout needs. It is similar to a [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) in HTML. + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Box,basic.tsx + +``` + +
+ +### Composition + +```ComponentSnackPlayer path=primitives,Box,composition.tsx + +``` + +
+ +### With Linear gradient + +If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```SnackPlayer name=LinearGradient +import React from "react" +import { Box, Center, NativeBaseProvider } from "native-base" + +export const Example = () => { + return ( + + This is a Box with Linear Gradient + + ) +} + +const config = { + dependencies: { + 'linear-gradient': require('expo-linear-gradient').LinearGradient + } +} + +export default () => { + return ( + +
+ +
+ + ) +} +``` + +
+ +If you're not using Expo, you can install [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) and configure in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```jsx +import React from 'react'; +import { Box, NativeBaseProvider } from 'native-base'; + +const Example = () => { + return ( + + This is a Box with Linear Gradient + + ); +}; + +const config = { + dependencies: { + 'linear-gradient': require('react-native-linear-gradient').default, + }, +}; + +export default () => { + return ( + + + + ); +}; +``` + +
+ +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Box,WithRef.tsx + +``` + +
+
+ +:::tip Common use cases for Box component are: + +- Create responsive layouts with ease. +- Provide a shorthand to pass styles via props (`bg` instead of `backgroundColor`). + +::: + +## Props + +```ComponentPropTable path=primitives,Box,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.4/breadCrumb.md b/versioned_docs/version-3.0.4/breadCrumb.md new file mode 100644 index 000000000..a0c567378 --- /dev/null +++ b/versioned_docs/version-3.0.4/breadCrumb.md @@ -0,0 +1,249 @@ +--- +id: breadcrumb +title: Breadcrumb +--- + +## Implements + +- [`Link`](link.md), [`Flex`](flex.md). + +## Import + +```jsx +import { Breadcrumb } from 'nativebase'; +``` + +## Examples + +### Basic + +Add `isCurrentPage` prop to the `Breadcrumb.Item` that matches the current path. + +```SnackPlayer name=Breadcrumb%20Basic +import React from 'react'; +import { + Breadcrumb, + Box, + Heading, + NativeBaseProvider, + Center +} from 'native-base'; +function BreadcrumbComponent () { + return ( + + Default Breadcrumb + + + Home (This is currently active) + + + + Docs + + + + + Github + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Icon Separators + +Change the `separator` used in the breadcrumb by passing a string, like `'-'` or any Component. + +```SnackPlayer name=Breadcrumb%20Component%20Separator +import React from 'react'; +import { + Breadcrumb, + Box, + Heading, + NativeBaseProvider, + Center, + Icon +} from 'native-base'; +function BreadcrumbComponent () { + return ( + + Breadcrumb with Custom Separator + } + > + + Home (This is currently active) + + + + Docs + + + + + Github + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Text Separators + +```SnackPlayer name=Breadcrumb%20String%20Separator +import React from 'react'; +import { + Breadcrumb, + Box, + Heading, + Icon, + NativeBaseProvider, + Center +} from 'native-base'; +function BreadcrumbComponent () { + return ( + + Breadcrumb with String Separator + + + Home (This is currently active) + + + + Docs + + + + + Github + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Composition + +Breadcrumb composes Box so you can pass all Box props to change the style of the breadcrumbs. Let's say we need to increase the fontSize and change color of the breadcrumbs. + +```SnackPlayer name=Breadcrumb%20Composition +import React from 'react'; +import { NativeBaseProvider, Breadcrumb, Box, Heading, Icon, Center, HStack, Text } from 'native-base'; +function BreadcrumbComponent () { + return ( + + Breadcrumb Composition + + + + + + Home + + + + + + + + Docs + + + + + + + + + Github (This is currently active) + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +### Breadcrumb + +| Name | Type | Description | Default | +| --------- | ----------------------------------------------------- | ------------------------------------------------- | ------- | +| separator | JSX.Element, string | The visual separator between the breadcrumb item. | - | +| spacing | [`MarginProps`](https://styled-system.com/api/#space) | The space between each stack item. | - | + +### Breadcrumb.Item + +| Name | Type | Description | Default | +| ------------- | ------- | -------------------------------------------------------------- | ------- | +| isCurrentPage | boolean | If true, it indicates that the breadcrumb link is active page. | - | + +### Breadcrumb.Link + +`Breadcrumb.Link` composes the [`Link`](link.md) component so you can use all Link props. + +## Accessibility + +[Breadcrumbs ARIA Spec](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html) + +- The Breadcrumbs are rendered in a nav to denote that it is a navigation landmark. +- The Breadcrumb nav has aria-label set to breadcrumb. +- The BreadcrumbItem with isCurrentPage prop adds the aria-current=page to the BreadcrumbLink. + The separator has role set to presentation to denote that its for presentation purposes. diff --git a/versioned_docs/version-3.0.4/breakpoints.md b/versioned_docs/version-3.0.4/breakpoints.md new file mode 100644 index 000000000..78b04fa8a --- /dev/null +++ b/versioned_docs/version-3.0.4/breakpoints.md @@ -0,0 +1,37 @@ +--- +id: breakpoint +title: Breakpoints +--- + +Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. + +NativeBase provides these default breakpoints and you can update with using extendTheme. + +```tsx +breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. + +```jsx +import React from 'react'; +import { Box, useBreakpointValue } from 'native-base'; +export default () => { + const color = useBreakpointValue({ + base: 'red.200', + sm: 'blue.200', + md: 'blue.200', + }); + return ( + + This is a box + + ); +}; +``` diff --git a/versioned_docs/version-3.0.4/buildingAppBar.md b/versioned_docs/version-3.0.4/buildingAppBar.md new file mode 100644 index 000000000..f41f1b24f --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingAppBar.md @@ -0,0 +1,48 @@ +--- +id: buildingAppBar +title: AppBar +--- + +The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. + +## Example + +We can easily create it using basic layout components from NativeBase. + +```SnackPlayer name=App%20Bar +import React from "react"; +import { VStack, HStack, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box, StatusBar } from "native-base"; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppBar(){ + return ( + <> + + + + + + + } color="white" />} /> + Home + + + } size='sm' color="white" />} /> + } + color="white" size='sm' />} /> + } size='sm' color="white" />} /> + + + + + ) +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/buildingDrawerNavigation.md b/versioned_docs/version-3.0.4/buildingDrawerNavigation.md new file mode 100644 index 000000000..25f51fff3 --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingDrawerNavigation.md @@ -0,0 +1,174 @@ +--- +id: buildingDrawerNavigation +title: Drawer Navigation +--- + +Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens. + +## Example + +Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. + +```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@5.1.0,@react-navigation/drawer,@react-navigation/native@5.0.8,react-native-vector-icons,react-native-gesture-handler@1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@3.0.0,react-native-reanimated@2.1.0 +import * as React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { + createDrawerNavigator, + DrawerContentScrollView, +} from '@react-navigation/drawer'; +import { + MaterialCommunityIcons +} from '@expo/vector-icons'; +import { + NativeBaseProvider, + Button, + Box, + HamburgerIcon, + Pressable, + Heading, + VStack, + Text, + Center, + HStack, + Divider, + Icon +} from 'native-base'; +const Drawer = createDrawerNavigator(); +function Component(props) { + return ( + + props.navigation.toggleDrawer()} position="absolute" ml={2} zIndex={1}> + + +
+ {props.route.name} +
+ + ); +} + +const getIcon = (screenName) => { + switch (screenName) { + case 'Inbox': + return "email" + case 'Outbox': + return 'send' + case 'Favorites': + return 'heart' + case 'Archive': + return 'archive' + case 'Trash': + return 'trash-can' + case 'Spam': + return 'alert-circle' + default: + return undefined + } +} + +function CustomDrawerContent(props) { + return ( + + + + Mail + john_doe@gmail.com + + } space={4}> + + {props.state.routeNames.map((name, index) => ( + { + props.navigation.navigate(name); + }} + > + + } /> + + {name} + + + + ))} + + + Labels + + + + } /> + + Family + + + + + + } /> + + Friends + + + + + + } /> + + Work + + + + + + + + + ); +} +function MyDrawer() { + return ( + + } + > + + + + + + + + + ); +} +export default function App() { + return ( + + + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/buildingFooterTabs.md b/versioned_docs/version-3.0.4/buildingFooterTabs.md new file mode 100644 index 000000000..d7b994e03 --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingFooterTabs.md @@ -0,0 +1,115 @@ +--- +id: buildingFooterTabs +title: Footer +--- + +With NativeBase v3 we have removed FooterTab components because as it's very simple to create it using HStack component. Here is an example of how we can make Footer in our Apps. + +## Example + +```SnackPlayer name=Footer dependencies=react-native-linear-gradient +import React from 'react'; + +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + HStack, + Center, + Pressable, +} from 'native-base'; +import { MaterialCommunityIcons , MaterialIcons} from '@expo/vector-icons'; + +export default function App() { + const [selected, setSelected] = React.useState(1); + return ( + + +
+
+ + setSelected(0)} + > +
+ } + color="white" + size="xs" + /> + + Favorites +
+ + setSelected(1)} + > +
+ } + color="white" + size="xs" + /> + + Music +
+ + setSelected(2)} + > +
+ } + color="white" + size="xs" + /> + + Places +
+ + setSelected(3)} + > +
+ } + color="white" + size="xs" + /> + News +
+ + + + + ); +} + +``` diff --git a/versioned_docs/version-3.0.4/buildingSearchBar.md b/versioned_docs/version-3.0.4/buildingSearchBar.md new file mode 100644 index 000000000..00feacf40 --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingSearchBar.md @@ -0,0 +1,72 @@ +--- +id: buildingSearchBar +title: SearchBar +--- + +Search-bar are one of the most commonly seen variation of input. Here are design to make life easier. + +## Example + +Here are some examples to show how easily and quickly we can create so many types of search-bars. + + + +```SnackPlayer name=Search%20Bar +import React from "react"; +import { VStack, Input, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box } from "native-base"; +import { Ionicons, MaterialIcons } from '@expo/vector-icons'; +import { FontAwesome5 } from '@expo/vector-icons'; + + +function SearchBar(){ + return ( + + + Cupertino + } />} + /> + + + + Material + } />} + InputRightElement={} />} + /> + + + ) +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.0.4/buildingSwipeList.md b/versioned_docs/version-3.0.4/buildingSwipeList.md new file mode 100644 index 000000000..a5648058a --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingSwipeList.md @@ -0,0 +1,144 @@ +--- +id: buildingSwipeList +title: Swipe List +--- + +SwipeListView is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened. + +## Example + +Here is an example to show how easily and quickly we can use [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NativeBase. + +```SnackPlayer name=SwipeList dependencies=react-native-swipe-list-view + +import React, { useState } from 'react'; +import { + Dimensions, + TouchableOpacity, + View, +} from 'react-native'; + +import {NativeBaseProvider,Box, Text,Pressable,Heading,IconButton,Icon, HStack, Avatar } from 'native-base'; +import { SwipeListView } from 'react-native-swipe-list-view'; +import { MaterialIcons,Ionicons } from '@expo/vector-icons'; + +export default function App() { + const [mode, setMode] = useState('Basic'); + + return ( + + + Swipe list Example + + + + ); +} + + +function Basic() { + const [listData, setListData] = useState( + Array(20) + .fill('') + .map((_, i) => ({ key: `${i}`, text: `item #${i}` })) + ); + + const closeRow = (rowMap, rowKey) => { + if (rowMap[rowKey]) { + rowMap[rowKey].closeRow(); + } + }; + + const deleteRow = (rowMap, rowKey) => { + closeRow(rowMap, rowKey); + const newData = [...listData]; + const prevIndex = listData.findIndex(item => item.key === rowKey); + newData.splice(prevIndex, 1); + setListData(newData); + }; + + const onRowDidOpen = rowKey => { + console.log('This row opened', rowKey); + }; + + const renderItem = ({item, index}) => ( + + console.log('You touched me')} + alignItems= 'center' + bg="white" + borderBottomColor= 'trueGray.200' + borderBottomWidth= {1} + justifyContent= 'center' + height= {50} + underlayColor={'#AAA'} + _pressed={{ + bg:'trueGray.200' + }} + py={8} + > + + + + + {index} + + + {item.text} + + + + + + ); + + const renderHiddenItem = (data, rowMap) => ( + + closeRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5 + }} + > + } color='white'/> + + deleteRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5 + }} + > + } color="white" /> + + + ); + + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/buildingTabView.md b/versioned_docs/version-3.0.4/buildingTabView.md new file mode 100644 index 000000000..953882d01 --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingTabView.md @@ -0,0 +1,101 @@ +--- +id: buildingTabView +title: Tab View +--- + +A cross-platform Tab View component for React Native + +## Example + +Here is an example to show how easily and quickly we can use [react-native-tab-view](https://www.npmjs.com/package/react-native-tab-view) in NB. + +```SnackPlayer name=TabView dependencies=react-native-linear-gradient,react-native-tab-view,react-native-pager-view@5.0.12 + +import * as React from 'react'; +import { View, StyleSheet, Dimensions, StatusBar,TouchableOpacity,Animated, Pressable} from 'react-native'; +import { TabView, SceneMap } from 'react-native-tab-view'; +import {NativeBaseProvider,Box, Text} from 'native-base'; +import Constants from 'expo-constants'; + +const FirstRoute = () => ( + +); + +const SecondRoute = () => ( + +); + +const ThirdRoute = () => ( + +); + +const initialLayout = { width: Dimensions.get('window').width }; + +const renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute, + third: ThirdRoute, +}); + +export default function TabViewExample() { + + + + + const [index, setIndex] = React.useState(0); + const [routes] = React.useState([ + { key: 'first', title: 'First' }, + { key: 'second', title: 'Second' }, + { key: 'third', title: 'Third' }, + ]); + + const renderTabBar = (props) => { + const inputRange = props.navigationState.routes.map((x, i) => i); + return ( + + {props.navigationState.routes.map((route, i) => { + const opacity = props.position.interpolate({ + inputRange, + outputRange: inputRange.map((inputIndex) => + inputIndex === i ? 1 : 0.5 + ), + }); + + return ( + + { + console.log(i); + setIndex(i);}}> + {route.title} + + + + ); + })} + + ); + }; + + return ( + + + + ); +} + + +``` diff --git a/versioned_docs/version-3.0.4/builldingCard.md b/versioned_docs/version-3.0.4/builldingCard.md new file mode 100644 index 000000000..0bf3d9b8f --- /dev/null +++ b/versioned_docs/version-3.0.4/builldingCard.md @@ -0,0 +1,57 @@ +--- +id: buildingCard +title: Card +--- + +A card is a flexible and extensible content container. It comes in caries shapes and sizes and here we'll make few of them. + +## Most Commonly used design + +This card design widely used where the Header consist of Avatar, accompanied by the Title and Sub-title. + +Followed by the image which flows till the very edge. + +And lastly a description. + +```SnackPlayer name=Card +import React from "react"; +import { VStack, HStack, Avatar, Image, Text, NativeBaseProvider, +AspectRatio, Center, Box, Stack, Heading } from "native-base"; + +function CardComponent(){ + return( + + image base + + NEWS + + + June 22, 2021 + + The Stunning Dawki River in Meghalaya is So Clear That Boats Appear + Floating in Air + + + With lush green meadows, rivers clear as crystal, pine-covered + hills, gorgeous waterfalls, lakes and majestic forests, the + mesmerizing. Meghalaya is truly a Nature lover’s paradise… + + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.0.4/button.mdx b/versioned_docs/version-3.0.4/button.mdx new file mode 100644 index 000000000..c138b3d29 --- /dev/null +++ b/versioned_docs/version-3.0.4/button.mdx @@ -0,0 +1,84 @@ +--- +id: button +title: Button +--- + +import { ComponentTheme } from '../../src/components'; + +The `Button` component is used to trigger an action or event. + +## Import + +```jsx +import { Button, ButtonGroup } from 'native-base'; +``` + +- **Button** : The button component with support for custom icons, spinners, etc. +- **ButtonGroup** : Used to group buttons whose actions are related, with an option to flush them together. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Button,basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Button,sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=primitives,Button,variants.tsx + +``` + +### Loading + +```ComponentSnackPlayer path=primitives,Button,loading.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=primitives,Button,icons.tsx + +``` + +### ButtonGroup + +```ComponentSnackPlayer path=primitives,Button,ButtonGroup.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Button,WithRef.tsx + +``` + +## Props + +### Button + +```ComponentPropTable path=primitives,Button,Button.tsx + +``` + +### ButtonGroup + +```ComponentPropTable path=primitives,Button,ButtonGroup.tsx + +``` + +## Styling + + + +## Accessibility + +- Button has `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- When Button has focus, Space or Enter activates it. diff --git a/versioned_docs/version-3.0.4/cascader.md b/versioned_docs/version-3.0.4/cascader.md new file mode 100644 index 000000000..a18591ea6 --- /dev/null +++ b/versioned_docs/version-3.0.4/cascader.md @@ -0,0 +1,6 @@ +--- +id: cascader +title: Cascader +--- + +## Coming Soon diff --git a/versioned_docs/version-3.0.4/center.md b/versioned_docs/version-3.0.4/center.md new file mode 100644 index 000000000..af1b45de7 --- /dev/null +++ b/versioned_docs/version-3.0.4/center.md @@ -0,0 +1,48 @@ +--- +id: center +title: Center +--- + +`Center` is a layout component that centers its child within itself. + +## **Import** + +```jsx +import { Center, Square, Circle } from 'native-base'; +``` + +- **Center:** Centers its child, pass `width` and `height` +- **Square:** `Center` but we need to pass `size` (width and height) +- **Circle:** `Center` with round `borderRadius`, pass `size` (width and height) + +## Examples + +### Basic + +Put any child element inside it, give it any width or/and height. It'll ensure the child is centered. + +```ComponentSnackPlayer path=composites,Center,Basic.tsx + +``` + +### Icon frames + +Center can be used to nicely position icons in the center and add frames around them. + +```ComponentSnackPlayer path=composites,Center,WithIcons.tsx + +``` + +### Square and Circle + +Square and Circle automatically centers their children. + +```ComponentSnackPlayer path=composites,Center,SquareCircle.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Center,Center.tsx + +``` diff --git a/versioned_docs/version-3.0.4/changelog.md b/versioned_docs/version-3.0.4/changelog.md new file mode 100644 index 000000000..3c65f2d9b --- /dev/null +++ b/versioned_docs/version-3.0.4/changelog.md @@ -0,0 +1,21 @@ +--- +id: changelog +title: Changelog +--- + +## Fixes + +- Version bump from 3.0.3 to 3.0.4 +- Add tokenised fontFamily support in Input #3796 +- Make drag indicator optional in actionsheet #3797 +- Export Toast TS props definition #3795 +- Set fontFamily to heading in Heading component #3788 +- Fix SSR not working #3786 +- Fix box with linear gradient warning #3777 +- Add color prop in Select's TS definition #3779 +- Remove additional wrapper from Checkbox group #3798 +- Add a prop to render FAB outside of portal #3829 +- Fix input padding(top/bottom) not working on android #3825 +- Fix custom fonts not working on android for some cases #3821 + +For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.4). diff --git a/versioned_docs/version-3.0.4/checkBox.md b/versioned_docs/version-3.0.4/checkBox.md new file mode 100644 index 000000000..81a7c5e6c --- /dev/null +++ b/versioned_docs/version-3.0.4/checkBox.md @@ -0,0 +1,104 @@ +--- +id: checkBox +title: CheckBox +--- + +import { ComponentTheme } from '../../src/components'; + +The `Checkbox` component is used in forms when a user needs to select multiple values from several options. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Checkbox,basic.tsx + +``` + +### Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,controlledCheckbox.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Checkbox,uncontrolledCheckbox.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Checkbox,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Checkbox,invalid.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Checkbox,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Checkbox,customIcon.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Checkbox,size.tsx + +``` + +### Checkbox Group + +```ComponentSnackPlayer path=primitives,Checkbox,checkboxGroup.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,FormControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Checkbox,withRef.tsx + +``` + +## Props + +### Checkbox + +```ComponentPropTable path=primitives,Checkbox,Checkbox.tsx + +``` + +### Checkbox.Group + +```ComponentPropTable path=primitives,Checkbox,CheckboxGroup.tsx + +``` + +## Styling + + + +## Accessibility + +Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). + +### Keyboard Interactions + +| Key | Description | +| ------- | ----------------------------- | +| `Space` | Checks/unchecks the checkbox. | diff --git a/versioned_docs/version-3.0.4/circularProgress.md b/versioned_docs/version-3.0.4/circularProgress.md new file mode 100644 index 000000000..961e5b1a0 --- /dev/null +++ b/versioned_docs/version-3.0.4/circularProgress.md @@ -0,0 +1,297 @@ +--- +id: circularProgress +title: CircularProgress +--- + +Circular Progress is used to indicate the progress for determinate and indeterminate processes. + +## Import + +```jsx +import { CircularProgress } from 'native-base'; +``` + +## Examples + +### Usage + +```SnackPlayer name=CircularProgress%20Usage +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Default CircularProgress + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Sizes + +You can add a size prop to the CircularProgress to add a custom size or choose from defined sizes. + +```SnackPlayer name=CircularProgress%20Sizes +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Changing the size + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Thickness + +You can add the thickness prop to update the thickness of the progress ring. + +```SnackPlayer name=CircularProgress%20Thickness +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Changing the thickness + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Color + +You can add the color prop to apply any color that the theme contains. + +```SnackPlayer name=CircularProgress%20Color +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Changing the color + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress TrackColor + +You can add the trackColor prop to apply any color that the theme contains to the CircularProgress track. + +```SnackPlayer name=CircularProgress%20TrackColor +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Changing the Track Color + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Min and Max + +You can add min and max props to manage what is the start and end value of your CircularProgress. + +```SnackPlayer name=CircularProgress%20min%20max +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Min and Max + + 550% + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Label + +```SnackPlayer name=CircularProgress%20Label +import React from 'react'; +import { + CircularProgress, + Heading, + NativeBaseProvider, + Center, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Adding label + + 45% + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Indeterminate Progress + +Setting the progress to indeterminate means that the value can't be determined upfront. Pass the isIndeterminate prop to activate this state. + +```SnackPlayer name=CircularProgress%20Indeterminate Progress +import React from 'react'; +import { + CircularProgress, + Center, + Heading, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Indeterminate Progress + + 50% + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| --------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------- | ------- | +| size | `4xl`,`3xl`,`2xl`, `xl`,`lg`, `md`, `sm`, `xs`, number | The size of circular progress. | `lg` | +| max | number | Maximum value defining 100% progress made (must be higher than 'min') | - | +| min | number | Minimum value defining 'no progress' (must be lower than 'max') | - | +| value | number | Current progress (must be between min/max) | - | +| isIndeterminate | boolean | Puts the component into indeterminate state. When passed, the 'value' prop is ignored | - | +| thickness | number, string | The thickness of the progress indicator | - | +| trackColor | string | The color name of the progress track. Use a color key from the theme object | - | +| color | string | The color of the progress indicator. Use a color key from the theme object | - | +| \_text | [TextProps](text.md#props) | Text styling for Label Text. | - | + +## Accessibility + +- On web and mobile, Progress has `role` set to `progressbar` to denote that it is a progress bar. +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. diff --git a/versioned_docs/version-3.0.4/closeButton.md b/versioned_docs/version-3.0.4/closeButton.md new file mode 100644 index 000000000..eaea3b4cb --- /dev/null +++ b/versioned_docs/version-3.0.4/closeButton.md @@ -0,0 +1,69 @@ +--- +id: closeButton +title: CloseButton +--- + +`CloseButton` is essentially an IconButton with a close icon. It is used to handle the close functionality in feedback and overlay components like [`Alerts`](alert.md), [`Toasts`](toast.md), `Drawers` and [`Modals`](modal.md). + +## Import + +```jsx +import { CloseButton } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=CloseButton%20Example +import React from 'react'; +import { CloseButton, NativeBaseProvider, Center } from 'native-base'; +function CloseButtonComponent () { + return ; +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Sizes + +```SnackPlayer name=CloseButton%20Example(Sizes) +import React from 'react'; +import { CloseButton, Stack, NativeBaseProvider, Center } from 'native-base'; +function CloseButtonComponent () { + return ( + + + + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| ---------- | ---------------- | ----------------------------------------- | ------- | +| aria-label | string | An accessible label for the close button. | - | +| isDisabled | boolean | If true, the button will be disabled. | - | +| color | string | The color of the close icon. | - | +| size | `lg`, `md`, `sm` | The size of the close button. | `md` | diff --git a/versioned_docs/version-3.0.4/code.md b/versioned_docs/version-3.0.4/code.md new file mode 100644 index 000000000..661db1b6a --- /dev/null +++ b/versioned_docs/version-3.0.4/code.md @@ -0,0 +1,68 @@ +--- +id: code +title: Code +--- + +`Code` is a component used to display inline code. It is composed from the Box component with a mono font family (_Courier_ on ios) for displaying code. + +## Import + +```jsx +import { Code } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=Code%20Basic +import React from 'react'; +import { Code, NativeBaseProvider, Center } from 'native-base'; +function CodeComponent () { + return Hello World!; +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Colors + +```SnackPlayer name=Code%20Example(Colors) +import React from 'react'; +import { Code, Stack, NativeBaseProvider, Center } from 'native-base'; +function CodeComponent () { + return ( + + let direction = "row"; + console.log('Hey there!'); + yarn add native-base + React Native + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +`Code` implements **[Box](box.md)**, so all the Box Props can be passed to it. + +| Name | Type | Description | Default | +| ----------- | --------- | ----------------------------------------------------------------------------------------------------------------- | ------- | +| children | ReactNode | The content of the code. | - | +| colorScheme | string | The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red"). | - | diff --git a/versioned_docs/version-3.0.4/collapse.md b/versioned_docs/version-3.0.4/collapse.md new file mode 100644 index 000000000..c8825c3ad --- /dev/null +++ b/versioned_docs/version-3.0.4/collapse.md @@ -0,0 +1,158 @@ +--- +id: collapse +title: Collapse +--- + +`Collapse` is used to create regions of content that can expand or collapse with a simple animation. + +## Implements + +- [`Box`](box.md) +- [`LayoutAnimation`](https://reactnative.dev/docs/layoutanimation) from [`React Native`](https://reactnative.dev) + +## Import + +```jsx +import { Collapse } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=Collapse%20Usage +import React from 'react'; +import { NativeBaseProvider, Collapse, Text, Stack, Heading, Button, Center } from 'native-base'; +function CollapseComponent() { + const [show, setShow] = React.useState(false); + const handleToggle = () => setShow(!show); + return ( + + Default Collapse + + Candy canes macaroon croissant carrot cake soufflé toffee topping + pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread + biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet + roll I love. Pastry pastry powder pie lemon drops chocolate topping + dessert. + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Animation Duration + +```SnackPlayer name=Collapse%20Animation Duration +import React from 'react'; +import { Collapse, Stack, Text, Heading, Button, NativeBaseProvider, Center } from 'native-base'; + +function CollapseComponent () { + const [show, setShow] = React.useState(false); + const handleToggle = () => setShow(!show); + return ( + + Collapse with duration + + Candy canes macaroon croissant carrot cake soufflé toffee topping + pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread + biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet + roll I love. Pastry pastry powder pie lemon drops chocolate topping + dessert. + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### With Callbacks(onAnimationStart & onAnimationEnd) + +```SnackPlayer name=Collapse%20onAnimationStart & onAnimationEnd +import React from 'react'; +import { Collapse, Stack, Heading, Button, Text, NativeBaseProvider, Center } from 'native-base'; +function CollapseComponent () { + const [show, setShow] = React.useState(false); + const handleToggle = () => setShow(!show); + const [text, setText] = React.useState( + 'This text would change when the collapse animation start' + ); + const handleText = () => + setText( + show + ? 'Collapse is open' + : 'This text would change when the collapse animation start' + ); + const [color, setColor] = React.useState('emerald'); + const handleColorToggle = () => + setColor(color === 'emerald' ? 'indigo' : 'emerald'); + return ( + + Collapse with callbacks + {text} + + Candy canes macaroon croissant carrot cake soufflé toffee topping + pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread + biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet + roll I love. Pastry pastry powder pie lemon drops chocolate topping + dessert. + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| ---------------- | -------- | ------------------------------------------------------------------------------- | ------- | +| isOpen | boolean | If true, the content will be visible. | - | +| duration | number | The animation duration(in ms) as it expands. | - | +| startingHeight | number | The height you want the content in it's collapsed state. Set to 0 by default. | - | +| endingHeight | number | The height you want the content in it's expanded state. Set to auto by default. | - | +| onAnimationStart | function | The function to be called when the collapse animation starts. | - | +| onAnimationEnd | function | The function to be called when the collapse animation starts. | - | + +## Accessibility +Collapse currently just provides a way to hide/show component. + +Make sure you follow the [disclosure accessibility spec](https://www.w3.org/TR/wai-aria-practices/examples/disclosure/disclosure-img-long-description.html) while implementing a collapse. \ No newline at end of file diff --git a/versioned_docs/version-3.0.4/colorMode.md b/versioned_docs/version-3.0.4/colorMode.md new file mode 100644 index 000000000..170412cbf --- /dev/null +++ b/versioned_docs/version-3.0.4/colorMode.md @@ -0,0 +1,152 @@ +--- +id: color-mode +title: Color mode (Dark Mode) +--- + +When you use the `NativebaseProvider` at the root of your app, you can automatically use color mode in your apps. + +By default, most components are dark mode compatible. To handle color mode manually in your application, use the `useColorMode` or `useColorModeValue` hooks. + +## useColorMode + +`useColorMode` is a React hook that gives you access to the current color mode, and a function to toggle the color mode. + +Calling toggleColorMode anywhere in your app tree toggles the color mode. + +## useColorModeValue + +`useColorModeValue` is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode. + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + NativeBaseProvider +} from 'native-base'; + +function ColorModeExample () { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + <> + I'm a Heading + + + + + + + ); +} + +const LocalWrapper = ({ children }) => { + const bg = useColorModeValue('gray.200', 'gray.800') + return ( +
+ {children} +
+ ); +}; + +export default function () { + return ( + + + + + + ); +} +``` + +## Default color mode + +You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config` + +```jsx +import { NativeBaseProvider, extendTheme, Text } from 'native-base'; + +// Define the config +const config = { + useSystemColorMode: false, + initialColorMode: 'dark', +}; + +// extend the theme +const customTheme = extendTheme({ config }); +function App() { + return ( + // pass itto NativeBaseProvider + + // Your component + + ); +} +``` + +## Persisting the color mode + +You can persist the color mode in you app by defining you color mode manager of type `StorageManager` and passing it to the NativeBaseProvider. This will retain the color mode even when the app is refreshed. + +```jsx +import React from 'react'; +import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +// Define the colorModeManager, +// here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/) +const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@color-mode', value); + } catch (e) { + console.log(e); + } + }, +}; +export default function () { + return ( + // pass it to NativeBaseProvider + + // Your components + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/container.md b/versioned_docs/version-3.0.4/container.md new file mode 100644 index 000000000..5b34afdc3 --- /dev/null +++ b/versioned_docs/version-3.0.4/container.md @@ -0,0 +1,57 @@ +--- +id: container +title: Container +--- + +The `Container` is used to constrain a content's width to the current breakpoint, while keeping it fluid. + +## Implements + +- [`Box`](box.md) + +## Usage + +To include content, wrap it in the Container component. + +## Example + +```SnackPlayer name=Container%20Example +import React from 'react'; +import { Container, Text, Heading, NativeBaseProvider, Center } from 'native-base'; +function ContainerComponent() { + return ( + + + A component library for the + + React Ecosystem + + + + NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications. + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +**Container** implements **[Box](box.md)**, so all the Box Props can be passed to it. + +### Container + +| Name | Type | Description | Default | +| ------------- | ------- | --------------------------------------------------------- | ------- | +| centerContent | boolean | It'll center child elements based on their content width. | true | diff --git a/versioned_docs/version-3.0.4/customizingComponents.md b/versioned_docs/version-3.0.4/customizingComponents.md new file mode 100644 index 000000000..5bb08a180 --- /dev/null +++ b/versioned_docs/version-3.0.4/customizingComponents.md @@ -0,0 +1,160 @@ +--- +id: customizingComponents +title: Customising Components +--- + +Theme customisation is at the heart of NativeBase. Using NativeBase's `extendTheme` function, we can customise components. + +Components can be customised by overriding baseStyle/defaultProps or adding a new variant. + +Let's customise a Button component to include rounded borders and red colorScheme. + +## Basic + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; + +export default function () { + const theme = extendTheme({ + components: { + Button: { + // Can simply pass default props to change default behaviour of components. + baseStyle: { + rounded: 'md', + }, + defaultProps: { + colorScheme: 'red', + }, + }, + Heading: { + // Can pass also function, giving you access theming tools + baseStyle: ({ colorMode }) => { + return { + color: colorMode === 'dark' ? 'red.300' : 'blue.300', + fontWeight: 'normal', + }; + }, + }, + }, + }); + return ( + {/* components */} + ); +} +``` + +As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components. + +### Difference between baseStyle and defaultProps? + +#### Base Style + +- As the name suggests, it's used to define the base style of a component. +- Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L5) + +#### Default Props + +- Default props can be used to initialize props of a component. +- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L201) + +```jsx + + + + + + ); +} + +``` + +
+ +NativeBase ships with default styles for each components. [You can find it here](https://github.com/GeekyAnts/NativeBase/tree/v3-pre-beta/src/theme/components) diff --git a/versioned_docs/version-3.0.4/customizingFonts.md b/versioned_docs/version-3.0.4/customizingFonts.md new file mode 100644 index 000000000..1e2d89ffb --- /dev/null +++ b/versioned_docs/version-3.0.4/customizingFonts.md @@ -0,0 +1,87 @@ +--- +id: customizingFonts +title: Customising Fonts +--- + +Follow 3 simple steps to add a custom font family. + +### Loading fonts in Expo or React Native init project. + +[Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/) + +[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) + +### Extend NativeBase theme object. + +We extend the theme object and override `fontConfig` and `fonts` properties which define the mappings. + +This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. + +```jsx +import { NativeBaseProvider, extendTheme } from 'native-base'; + +const theme = extendTheme({ + fontConfig: { + Roboto: { + 100: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 200: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 300: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 400: { + normal: 'Roboto-Regular', + italic: 'Roboto-Italic', + }, + 500: { + normal: 'Roboto-Medium', + }, + 600: { + normal: 'Roboto-Medium', + italic: 'Roboto-MediumItalic', + }, + // Add more variants + // 700: { + // normal: 'Roboto-Bold', + // }, + // 800: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + // 900: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + }, + }, + + // Make sure values below matches any of the keys in `fontConfig` + fonts: { + heading: 'Roboto', + body: 'Roboto', + mono: 'Roboto', + }, +}); + +export default function App() { + return ( + + + + ); +} +``` + +### Using fonts + +Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. + +```jsx + +``` diff --git a/versioned_docs/version-3.0.4/customizingTheme.md b/versioned_docs/version-3.0.4/customizingTheme.md new file mode 100644 index 000000000..1aca05753 --- /dev/null +++ b/versioned_docs/version-3.0.4/customizingTheme.md @@ -0,0 +1,108 @@ +--- +id: customizingTheme +title: Customising Theme +--- + +import { NativeBaseProvider, Box } from 'native-base'; + +Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like + +```tsx +// theme +{ + colors: {...}, + fontSizes: {...}, + fonts: {...}, + . + . + . + config: {...}, +} +``` + +It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` + +In the above example, the following changes have been made: + +- Added a new color named **primary**. +- Updated one of the shade of **amber** color. +- Updated the initial color mode to **dark**. Default is **light**. +- Finally passed the new **theme** object to the **NativeBaseProvider**. + +### Using the new tokens in components + +```jsx live +function App() { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/darkMode.md b/versioned_docs/version-3.0.4/darkMode.md new file mode 100644 index 000000000..1f58b9c59 --- /dev/null +++ b/versioned_docs/version-3.0.4/darkMode.md @@ -0,0 +1,89 @@ +--- +id: darkMode +title: Making components dark mode compatible +--- + +By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: + +1. By updating component's theme +2. By using useColorModeValue + +## 1. By updating component's theme + +In this approach we use NativeBase's `extendTheme` function to customise the components and the use themeTools to make the component dark mode compatible. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { NativeBaseProvider, themeTools } from 'native-base'; +import { extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + components: { + Heading: { + baseStyle: (props: any) => { + return { + color: themeTools.mode('red.300', 'blue.300')(props), + }; + }, + }, + }, + }); + return ( + + + + ); +} +``` + +In the above example, the Heading component's color property will now respond to change in color, namely in light mode it will be red (red.300) colored and in dark mode it will blue (blue.300) colored. + +## 2. By using useColorModeValue + +In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { useColorModeValue, Button } from 'native-base'; + +export default function () { + const colorScheme = useColorModeValue('teal', 'amber'); + const variant = useColorModeValue('solid', 'outline'); + + return ( + + ); +} +``` + +In the above example, you'll get a **solid teal Button** in **light** mode whereas an **outline amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. + +## 3. By using \_ligth and \_dark props + +In this approach we pass the required props inside \_light and \_dark based on the requirement. + +```tsx +import React from 'react'; +import { Button } from 'native-base'; + +export default function () { + return ( + + ); +} +``` + +In the above example, you'll get a **teal Button** in **light** mode whereas an **amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. diff --git a/versioned_docs/version-3.0.4/datePicker.md b/versioned_docs/version-3.0.4/datePicker.md new file mode 100644 index 000000000..2d6c48701 --- /dev/null +++ b/versioned_docs/version-3.0.4/datePicker.md @@ -0,0 +1,6 @@ +--- +id: date-picker +title: DatePicker +--- + +## Coming Soon diff --git a/versioned_docs/version-3.0.4/default-theme.md b/versioned_docs/version-3.0.4/default-theme.md new file mode 100644 index 000000000..6126f0909 --- /dev/null +++ b/versioned_docs/version-3.0.4/default-theme.md @@ -0,0 +1,212 @@ +--- +id: default-theme +title: Default Theme +--- + +import { ColorsBlock, FontBlocks, SpaceBlocks } from "/src/components/index"; + +The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more. + +Theming in NativeBase is based on the **[Styled System Theme Specification](https://system-ui.com/theme/)** + +## Colors + +You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props. + +We recommend adding a palette that ranges from `50` to `900`. Tools like **[Smart Swatch](https://smart-swatch.netlify.app/)**, **[Palx](https://palx.jxnblk.com/)** are available to generate these palettes. + + + +## Typography + +To manage Typography options, the theme object supports the following keys: + +- `fonts` (font families) +- `fontSizes` +- `fontWeights` +- `lineHeights` +- `letterSpacings` + +```jsx +const typography = { + letterSpacings: { + xxs: -1.5, + xs: -0.5, + sm: 0, + md: 0.1, + lg: 0.15, + xl: 0.25, + '2xl': 0.4, + '3xl': 0.5, + '4xl': 1.25, + '5xl': 1.5, + }, + lineHeights: { + none: 1, + shorter: 1.25, + short: 1.375, + base: 1.5, + tall: 1.625, + taller: '2', + 3: '12px', + 4: '16px', + 5: '20px', + 6: '24px', + 7: '28px', + 8: '32px', + 9: '36px', + 10: '40px', + }, + fontWeights: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + }, + fonts: { + heading: '', + body: '', + mono: '', + }, + fontSizes: { + xxs: 10, + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 20, + '2xl': 24, + '3xl': 30, + '4xl': 36, + '5xl': 48, + '6xl': 60, + '7xl': 72, + '8xl': 96, + '9xl': 128, + }, +}; +``` + + + +## Size + +The `size` key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the `padding`, `margin`, and `top`, `left`, `right`, `bottom` props. + + + +## Shadows + +The `shadow` key allows you to customize the global box shadow for your project. + +```jsx +export default { + 0: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.18, + shadowRadius: 1.0, + elevation: 1, + }, + 1: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.2, + shadowRadius: 1.41, + elevation: 2, + }, + 2: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.22, + shadowRadius: 2.22, + elevation: 3, + }, + 3: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.23, + shadowRadius: 2.62, + elevation: 4, + }, + 4: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + 5: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + }, + 6: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.29, + shadowRadius: 4.65, + elevation: 7, + }, + 7: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + }, + 8: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.32, + shadowRadius: 5.46, + elevation: 9, + }, + 9: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 5, + }, + shadowOpacity: 0.34, + shadowRadius: 6.27, + elevation: 10, + }, +}; +``` + +Still confused? You can always explore [here](https://github.com/GeekyAnts/nativebase-v3/tree/development/src/theme/base). diff --git a/versioned_docs/version-3.0.4/design-tokens.md b/versioned_docs/version-3.0.4/design-tokens.md new file mode 100644 index 000000000..8198af8e3 --- /dev/null +++ b/versioned_docs/version-3.0.4/design-tokens.md @@ -0,0 +1,69 @@ +--- +id: design-tokens +title: Design tokens +--- + +Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms. + +Let's take an example by defining a space and color design tokens. + +```jsx title="colors" +const colors = { + primary: { + 50: '#ecfeff', + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63', + }, +}; +``` + +```jsx title="spacing" +export const spacing = { + px: 1, + 1: 4, + 2: 8, + 3: 12, + 4: 16, + 5: 20, + 6: 24, + 7: 28, + 8: 32, + 9: 36, + 10: 40, + 12: 48, + 16: 64, + 20: 80, + 24: 96, + 32: 128, + 40: 160, + 48: 192, + 56: 224, + 64: 256, + 72: 288, + 80: 320, + 96: 384, +}; +``` + +We can use the above tokens in our code instead of using absolute values. + +```jsx title="using the above tokens in Box component" + +``` + +The above Box will be translated to + +```jsx title="actual applied styles" + +``` + +With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. + +Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme)**. diff --git a/versioned_docs/version-3.0.4/divider.md b/versioned_docs/version-3.0.4/divider.md new file mode 100644 index 000000000..70f897268 --- /dev/null +++ b/versioned_docs/version-3.0.4/divider.md @@ -0,0 +1,56 @@ +--- +id: divider +title: Divider +--- + +import { ComponentTheme } from '../../src/components'; + +`Divider` is used to visually separate content in a list or group. + +## **Import** + +```jsx +import { Divider } from 'native-base'; +``` + +## Examples + +### Basic + +The Divider displays a thin horizontal or vertical line. + +```ComponentSnackPlayer path=composites,Divider,Basic.tsx + +``` + +### Divider Orientation + +Pass the `orientation` prop and set it to either `horizontal` or `vertical`. + +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. + +```ComponentSnackPlayer path=composites,Divider,Orientation.tsx + +``` + +### Composition + +You can use `bg` or `backgroundColor` to change the divider's color and `width` and `height` to change its width and height respectively. + +```ComponentSnackPlayer path=composites,Divider,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Divider,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Divider has role set to `separator` and `aria-orientation` to either `horizontal` or `vertical`. diff --git a/versioned_docs/version-3.0.4/faq.md b/versioned_docs/version-3.0.4/faq.md new file mode 100644 index 000000000..d366df99c --- /dev/null +++ b/versioned_docs/version-3.0.4/faq.md @@ -0,0 +1,6 @@ +--- +id: faq +title: FAQ's +--- + +NativeBase FAQ's Coming Soon. diff --git a/versioned_docs/version-3.0.4/flatList.md b/versioned_docs/version-3.0.4/flatList.md new file mode 100644 index 000000000..ae9f1392e --- /dev/null +++ b/versioned_docs/version-3.0.4/flatList.md @@ -0,0 +1,18 @@ +--- +id: flatList +title: FlatList +--- + +A component for rendering performant scrollable lists. + +## Example + +```ComponentSnackPlayer path=basic,FlatList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,FlatList,FlatList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.4/flex.md b/versioned_docs/version-3.0.4/flex.md new file mode 100644 index 000000000..1667dabac --- /dev/null +++ b/versioned_docs/version-3.0.4/flex.md @@ -0,0 +1,44 @@ +--- +id: flex +title: Flex +--- + +`Flex` is a [`Box`](box.md) with `display: flex` and comes with helpful style shorthand. + +## Import + +```jsx +import { Flex, Spacer } from 'native-base'; +``` + +- `Flex`: a **[Box](box.md)** with `display: flex` +- `Spacer`: creates an adjustable, empty space that can be used to tune the spacing between child elements within `Flex` + +## Usage + +Flex components comes with some helpful shorthand props: + +- `flexDirection` is `direction` +- `flexWrap` is `wrap` +- `alignItems` is `align` +- `justifyContent` is `justify` + +While you can pass the verbose props, using the shorthand can save you some time. + +## Example + +```ComponentSnackPlayer path=primitives,Flex,basic.tsx + +``` + +### Using the Spacer + +You can pass Spacer to add Space between Flex items. + +```ComponentSnackPlayer path=primitives,Flex,spacer.tsx + +``` + +## Props + +**Flex** implements **[Box](box.md)**, so all the Box Props can be passed to it, i.e. [`color`](utility-props#color-and-background-color), [`space`](utility-props#margin-and-padding), [`layout`](utility-props#layout-width-and-height), [`flexbox`](utility-props#flexbox) & [`border`](utility-props#borders) props from [style-system](utility-props). diff --git a/versioned_docs/version-3.0.4/form.md b/versioned_docs/version-3.0.4/form.md new file mode 100644 index 000000000..726d11383 --- /dev/null +++ b/versioned_docs/version-3.0.4/form.md @@ -0,0 +1,199 @@ +--- +id: form +title: Form with Validation +--- + +Apps often require users to enter information into a text field. For example, you might require users to log in with an email address and password combination. + +To make apps secure and easy to use, check whether the information the user has provided is valid. If the user has correctly filled out the form, process the information. If the user submits incorrect information, display a friendly error message letting them know what went wrong. + +## Example + +In this example, learn how to add validation to a form that has a single text field using the following steps: + +1. Create an Input wrapped in FormControl. +2. Add validation logic. +3. Create a button to validate and submit the form. + +### Step 1 + +Create an Input wrapped in FormControl. + +```SnackPlayer name=Form%20Example +import React from "react"; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from "native-base"; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 2 + +Add validation logic. + +```SnackPlayer name=Form%20Example(Validation) +import React from 'react'; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 3 + +Create a button to validate and submit the form. + +```SnackPlayer name=Form%20Example(Validate and Submit) +import React from 'react'; +import { + VStack, + Button, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + const onSubmit = () => { + validate() ? console.log('Submitted') : console.log('Validation Failed'); + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + {'name' in errors ? + Error +: + + + Name should contain atleast 3 character. + + } + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Community Integration + +NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForm.md) as well. For more details checkout Community Integration section of the docs. diff --git a/versioned_docs/version-3.0.4/formControl.md b/versioned_docs/version-3.0.4/formControl.md new file mode 100644 index 000000000..560499ffd --- /dev/null +++ b/versioned_docs/version-3.0.4/formControl.md @@ -0,0 +1,52 @@ +--- +id: formControl +title: FormControl +--- + +import { ComponentTheme } from '../../src/components'; + +`FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,FormControl,Usage.tsx + +``` + +### Custom Style + +```ComponentSnackPlayer path=composites,FormControl,CustomStyle.tsx + +``` + +## Props + +### FormControl + +```ComponentPropTable path=composites,FormControl,FormControl.tsx + +``` + +### FormControl.Label + +```ComponentPropTable path=composites,FormControl,FormControlLabel.tsx + +``` + +### FormControl.ErrorMessage + +```ComponentPropTable path=composites,FormControl,FormControlErrorMessage.tsx + +``` + +### FormControl.HelperText + +```ComponentPropTable path=composites,FormControl,FormControlHelperText.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/hStack.md b/versioned_docs/version-3.0.4/hStack.md new file mode 100644 index 000000000..276f3d442 --- /dev/null +++ b/versioned_docs/version-3.0.4/hStack.md @@ -0,0 +1,24 @@ +--- +id: hStack +title: HStack / Row +--- + +`HStack` aligns items horizontally. `Row` is also an alias for `HStack`. + +## Import + +```jsx +import { HStack } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=primitives,HStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,HStack.tsx + +``` diff --git a/versioned_docs/version-3.0.4/heading.md b/versioned_docs/version-3.0.4/heading.md new file mode 100644 index 000000000..971b44a20 --- /dev/null +++ b/versioned_docs/version-3.0.4/heading.md @@ -0,0 +1,56 @@ +--- +id: heading +title: Heading +--- + +import { ComponentTheme } from '../../src/components'; + +Headings are used for rendering headlines. `Heading` composes [`Text`](text.md) so you can use all the style props. + +## Import + +```jsx +import { Heading } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Heading,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Heading,Sizes.tsx + +``` + +### Truncate + +```ComponentSnackPlayer path=primitives,Heading,Truncate.tsx + +``` + +### Override + +```ComponentSnackPlayer path=primitives,Heading,OverridenStyle.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=primitives,Heading,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Heading,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/icon.md b/versioned_docs/version-3.0.4/icon.md new file mode 100644 index 000000000..b1438011d --- /dev/null +++ b/versioned_docs/version-3.0.4/icon.md @@ -0,0 +1,54 @@ +--- +id: icon +title: Icon +--- + +You can use icons in multiple ways in NativeBase: + +- Create icon by creating an SVG Icon +- Create icon using createIcon function and use it as a component +- Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. + +## Examples + +### NativeBase Icons + +We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. + +```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx + +``` + +### Basic + +```ComponentSnackPlayer path=primitives,Icon,Basic.tsx + +``` + +Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg). + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx + +``` + +### Create Icon + +```ComponentSnackPlayer path=primitives,Icon,CreateIcon.tsx + +``` + +## Props + +### Icon + +```ComponentPropTable path=primitives,Icon,Icon.tsx showStylingProps=true + +``` + +### createIcon + +```ComponentPropTable path=primitives,Icon,createIcon.tsx + +``` diff --git a/versioned_docs/version-3.0.4/iconButton.md b/versioned_docs/version-3.0.4/iconButton.md new file mode 100644 index 000000000..dcf790c3f --- /dev/null +++ b/versioned_docs/version-3.0.4/iconButton.md @@ -0,0 +1,43 @@ +--- +id: iconButton +title: IconButton +--- + +import { ComponentTheme } from '../../src/components'; + +`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=composites,IconButton,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. +- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). diff --git a/versioned_docs/version-3.0.4/image.md b/versioned_docs/version-3.0.4/image.md new file mode 100644 index 000000000..550e56ec4 --- /dev/null +++ b/versioned_docs/version-3.0.4/image.md @@ -0,0 +1,49 @@ +--- +id: image +title: Image +--- + +Generic Image components from [React Native](https://reactnative.dev). + +## Implements + +- [`Image`](https://reactnative.dev/docs/image) from [React Native](https://reactnative.dev). +- You can use all props of React native Image. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Image,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Image,Sizes.tsx + +``` + +### Border Radius + +```ComponentSnackPlayer path=primitives,Image,BorderRadius.tsx + +``` + +### Fallback + +```ComponentSnackPlayer path=primitives,Image,FallbackSupport.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Image,WithRef.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Image,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.4/input.md b/versioned_docs/version-3.0.4/input.md new file mode 100644 index 000000000..9dcf9e138 --- /dev/null +++ b/versioned_docs/version-3.0.4/input.md @@ -0,0 +1,76 @@ +--- +id: input +title: Input +--- + +import { ComponentTheme } from '../../src/components'; + +The `Input` component is a component that is used to get user input in a text field. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Input,Basic.tsx + +``` + +### Input Sizes + +```ComponentSnackPlayer path=primitives,Input,Size.tsx + +``` + +### Input Variants + +```ComponentSnackPlayer path=primitives,Input,Variant.tsx + +``` + + + +### Input Elements + +```ComponentSnackPlayer path=primitives,Input,Elements.tsx + +``` + +### Password Input + +```ComponentSnackPlayer path=primitives,Input,Masked.tsx + +``` + +### Controlled Input + +```ComponentSnackPlayer path=primitives,Input,Controlled.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Input,FormControlled.tsx + +``` + +## Props + +### Input + +```ComponentPropTable path=primitives,Input,Input.tsx showStylingProps=true + +``` + +### Input.Group + +```ComponentPropTable path=primitives,Input,InputGroup.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/install-cra.mdx b/versioned_docs/version-3.0.4/install-cra.mdx new file mode 100644 index 000000000..ba24220f0 --- /dev/null +++ b/versioned_docs/version-3.0.4/install-cra.mdx @@ -0,0 +1,127 @@ +--- +id: install-cra +title: Install in Create React App project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + + + + + +The easiest way to get started with NativeBase in create react app is using NativeBase template. + +### JavaScript + +```bash +npx create-react-app my-app --template nativebase +cd my-app/ +yarn start +``` + +### TypeScript + +```bash +npx create-react-app my-app --template nativebase-typescript +cd my-app/ +yarn start +``` + + + + + +Create a new CRA project If not exist + +```bash +npx create-react-app my-app +cd my-app +``` + +[Refer this guide](https://necolas.github.io/react-native-web/docs/installation/) if you need additional configurations. + +### Install dependencies + + + + + +```bash +yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +```bash +npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.4/install-expo.mdx b/versioned_docs/version-3.0.4/install-expo.mdx new file mode 100644 index 000000000..4b77d6efe --- /dev/null +++ b/versioned_docs/version-3.0.4/install-expo.mdx @@ -0,0 +1,103 @@ +--- +id: install-expo +title: Install in Expo project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + +Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration. + +### Create a new expo project + +```bash +npm install --global expo-cli +expo init my-project +cd my-project/ +``` + +[Refer this link](https://docs.expo.io/) for additional information on Expo and setting up an Expo starter app. + +### Install dependencies + + + + + +```bash +yarn add native-base styled-components styled-system +``` + + + + + +```bash +npm install native-base styled-components styled-system +``` + + + + + +```bash +expo install react-native-svg +``` + +```bash +expo install react-native-safe-area-context +``` + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +function App() { + return ( + + Hello world + + ); +} +``` + +
+ minions clapping +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.4/install-next.mdx b/versioned_docs/version-3.0.4/install-next.mdx new file mode 100644 index 000000000..dc9dbca16 --- /dev/null +++ b/versioned_docs/version-3.0.4/install-next.mdx @@ -0,0 +1,263 @@ +--- +id: install-next +title: Install in Next.js project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + + + + + +### Create a new project using Next.js CLI with NativeBase template + +
+ + + + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

+
+ +```bash + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base +``` + +
+Yey! you are all set, start editing src/pages/index.js now. + +

With Typescript

+
+ +```bash + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript +``` + +
+Yey! you are all set, start editing src/pages/index.tsx now. + + + + + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

+
+ +```bash + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base +``` + +
+ +Yey! you are all set, start editing src/pages/index.js now. + +

With Typescript

+
+ +```bash + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript +``` + +
+ +Yey! you are all set, start editing src/pages/index.tsx now. + + + +
+ + + + +### Install dependencies + + + + + +
+ +```bash +yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + + +
+ +```bash +npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + + +We'll need 2 more additional steps. + +1. Install dev dependencies. + + + + + +```bash + yarn add next-compose-plugins next-transpile-modules -D +``` + + + + + +```bash + npm i next-compose-plugins next-transpile-modules --save-dev +``` + + + + + +2. Update your next.config.js with the below content. + +```js +const withPlugins = require('next-compose-plugins'); +const withTM = require('next-transpile-modules')([ + 'native-base', + 'react-native-svg', + 'styled-components', + 'react-native-safe-area-context', + '@react-aria/visually-hidden', + '@react-native-aria/button', + '@react-native-aria/checkbox', + '@react-native-aria/combobox', + '@react-native-aria/focus', + '@react-native-aria/interactions', + '@react-native-aria/listbox', + '@react-native-aria/overlays', + '@react-native-aria/radio', + '@react-native-aria/slider', + '@react-native-aria/tabs', + '@react-native-aria/utils', + '@react-stately/combobox', + '@react-stately/radio', +]); + +module.exports = withPlugins( + [ + withTM, + // your plugins go here. + ], + { + webpack: (config) => { + config.resolve.alias = { + ...(config.resolve.alias || {}), + // Transform all direct `react-native` imports to `react-native-web` + 'react-native$': 'react-native-web', + }; + config.resolve.extensions = [ + '.web.js', + '.web.ts', + '.web.tsx', + ...config.resolve.extensions, + ]; + return config; + }, + } +); +``` + +### Run the Hello world example + +Replace the below code in your pages/\_app.js + +```jsx +import '../styles/globals.css'; +import { NativeBaseProvider } from 'native-base'; + +function MyApp({ Component, pageProps }) { + return ( + + + + ); +} + +export default MyApp; +``` + +and put this in your pages/index.js + +```jsx +import React from 'react'; +import { Box } from 'native-base'; + +export default function App() { + return Hello world; +} +``` + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.4/install-rn.mdx b/versioned_docs/version-3.0.4/install-rn.mdx new file mode 100644 index 000000000..4e6701c76 --- /dev/null +++ b/versioned_docs/version-3.0.4/install-rn.mdx @@ -0,0 +1,97 @@ +--- +id: install-rn +title: Install in React Native project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + +### Create a new project + +```bash +react-native init AwesomeNativeBase +cd AwesomeNativeBase +``` + +### Install dependencies + + + + + +```bash +yarn add native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +```bash +npm install native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +### Run pod install + +```bash +cd ios/ +pod install +``` + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +function App() { + return ( + + Hello world + + ); +} +``` + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.4/installation.mdx b/versioned_docs/version-3.0.4/installation.mdx new file mode 100644 index 000000000..91616aeed --- /dev/null +++ b/versioned_docs/version-3.0.4/installation.mdx @@ -0,0 +1,30 @@ +--- +id: installation +title: Installation +--- + +import { InstallationTiles } from '../../src/components'; + +**NativeBase** is supported in [Expo](https://docs.expo.io/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. + +
+
+ +
+
+ +
+ +### NativeBase VS Code Extensions + +NativeBase VS Code Extensions 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. + +aang transitioning to avatar state diff --git a/versioned_docs/version-3.0.4/interaction-styles.mdx b/versioned_docs/version-3.0.4/interaction-styles.mdx new file mode 100644 index 000000000..434d9aa04 --- /dev/null +++ b/versioned_docs/version-3.0.4/interaction-styles.mdx @@ -0,0 +1,225 @@ +--- +id: interaction-styles +title: Pseudo props +--- + +import { + Box, + NativeBaseProvider, + HStack, + VStack, + Text, + Pressable, + Image, +} from 'native-base'; + +NativeBase provides a declarative way to add interaction or platform specific props. + +## Hover + +Using `_hover` pseudo prop, we can customize the style of Pressable component on hover. + + + + + + Hover over me + + + + + +```jsx title="Hover example" + + + Hover me + + +``` + +## Pressed + +Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed. + + + + + + Press me + + + + + +```jsx title="Pressed example" + + + Hover over me + + +``` + +## Focus + +Using `_focus` pseudo prop, we can customize the style of Pressable component on focus. + + + + + + Try focusing me + + + + + +```jsx title="Focus example" + + + Hover over me + + +``` + +## Platform specific styling + +Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms. + + + + + + + Primary + + + Web + + + + + Primary + + + Android + + + + + Primary + + + iOS + + + + +```jsx title="Platform specific example" + + + + + Primary + + + Web + + + + + Primary + + + Android + + + + + Primary + + + iOS + + +``` diff --git a/versioned_docs/version-3.0.4/keyboardAvoidingView.md b/versioned_docs/version-3.0.4/keyboardAvoidingView.md new file mode 100644 index 000000000..574e474de --- /dev/null +++ b/versioned_docs/version-3.0.4/keyboardAvoidingView.md @@ -0,0 +1,18 @@ +--- +id: keyboardAvoidingView +title: KeyboardAvoidingView +--- + +Provides a view that moves out of the way of virtual keyboard automatically. It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height. + +## Example + +```ComponentSnackPlayer path=basic,KeyboardAvoidingView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,KeyboardAvoidingView,KeyboardAvoidingView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.4/kitchen-sink.mdx b/versioned_docs/version-3.0.4/kitchen-sink.mdx new file mode 100644 index 000000000..7187d2c16 --- /dev/null +++ b/versioned_docs/version-3.0.4/kitchen-sink.mdx @@ -0,0 +1,66 @@ +--- +id: kitchen-sink +title: Kitchen Sink +--- + +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import ExpoIcon from '@site/static/img/expo-icon.svg'; +import useThemeContext from '@theme/hooks/useThemeContext'; + +
+
+
+

+ Kitchen Sink is a comprehensive demo app showcasing all the NativeBase + components in action. It includes buttons, forms, icons and much more! +

+
+
+
+ Scan with the + + + + Expo app on your Android device to see the special dish we cooked + for you! +
+ +
+
+
+ +
+
+
+
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.4/link.md b/versioned_docs/version-3.0.4/link.md new file mode 100644 index 000000000..5e77da915 --- /dev/null +++ b/versioned_docs/version-3.0.4/link.md @@ -0,0 +1,68 @@ +--- +id: link +title: Link +--- + +import { ComponentTheme } from '../../src/components'; + +`Links` are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink. + +## **Import** + +```jsx +import { Link } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Link,Basic.tsx + +``` + +### External Link + +```ComponentSnackPlayer path=primitives,Link,ExternalLink.tsx + +``` + +### Link with Underline + +```ComponentSnackPlayer path=primitives,Link,UnderlineLink.tsx + +``` + +### Link custom onPress + +```ComponentSnackPlayer path=primitives,Link,CustomOnPress.tsx + +``` + +### Link around containers + +```ComponentSnackPlayer path=primitives,Link,CompositeLink.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Link,index.tsx + +``` + + + +## Styling + + + +## Accessibility + +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) diff --git a/versioned_docs/version-3.0.4/list.md b/versioned_docs/version-3.0.4/list.md new file mode 100644 index 000000000..84f8d3dfc --- /dev/null +++ b/versioned_docs/version-3.0.4/list.md @@ -0,0 +1,64 @@ +--- +id: list +title: List +--- + +List is used to display list items. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,List,Basic.tsx + +``` + +### Ordered List + +```ComponentSnackPlayer path=primitives,List,OrderedList.tsx + +``` + +### Unordered List + +```ComponentSnackPlayer path=primitives,List,UnorderedList.tsx + +``` + +### Styled List + +```ComponentSnackPlayer path=primitives,List,StylingList.tsx + +``` + +### Pressable List + +```ComponentSnackPlayer path=primitives,List,PressableList.tsx + +``` + +### List with ListIcon + +```ComponentSnackPlayer path=primitives,List,ListWithIcon.tsx + +``` + +### Virtualized List + +```ComponentSnackPlayer path=primitives,List,VirtualizedList.tsx + +``` + +## Props + +### List + +```ComponentPropTable path=primitives,List,List.tsx + +``` + +### List.Item + +```ComponentPropTable path=primitives,List,ListItem.tsx + +``` \ No newline at end of file diff --git a/versioned_docs/version-3.0.4/loginsignupforms.md b/versioned_docs/version-3.0.4/loginsignupforms.md new file mode 100644 index 000000000..ea7c4c056 --- /dev/null +++ b/versioned_docs/version-3.0.4/loginsignupforms.md @@ -0,0 +1,217 @@ +--- +id: loginsignupforms +title: Login/Signup Forms +--- + +## Example + +### Login Form + +```SnackPlayer name=login dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider +} from 'native-base'; + +export default function App() { + + return ( + + + + Welcome + + + Sign in to continue! + + + + + + Email ID + + + + + + Password + + + + Forget Password? + + + + + + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + + + + I'm a new user. + + Sign Up + + + + + + ); +} +``` + +### Signup Form + +```SnackPlayer name=Signup dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider +} from 'native-base'; + +export default function App() { + + return ( + + + + Welcome + + + Sign up to continue! + + + + + + Email + + + + + + Password + + + + + + Confirm Password + + + + + + + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + + + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/menu.md b/versioned_docs/version-3.0.4/menu.md new file mode 100644 index 000000000..736456663 --- /dev/null +++ b/versioned_docs/version-3.0.4/menu.md @@ -0,0 +1,94 @@ +--- +id: menu +title: Menu +--- + +import { ComponentTheme } from '../../src/components'; + +A dropdown menu for the common dropdown menu button design pattern. + +## Import + +NativeBase uses 5 components for rendering menus: + +- `Menu`: The wrapper component provides context, state, and focus management. +- `Menu.Item`: The trigger that handles menu selection. +- `Menu.Group`: A wrapper to group related menu items. +- `Menu.OptionGroup`: A wrapper for checkable menu items (radio and checkbox). +- `Menu.ItemOption`: The checkable menu item, to be used with `MenuOptionGroup`. + +```jsx +import { Menu } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Menu,Basic.tsx + +``` + +### Group + +```ComponentSnackPlayer path=composites,Menu,Group.tsx + +``` + +### MenuOptionGroups + +```ComponentSnackPlayer path=composites,Menu,MenuOptionsGroup.tsx + +``` + +### Menu Placement + +```ComponentSnackPlayer path=composites,Menu,MenuPositions.tsx + +``` + +## Props + +### Menu + +```ComponentPropTable path=composites,Menu,Menu.tsx + +``` + +### MenuItem + +```ComponentPropTable path=composites,Menu,MenuItem.tsx + +``` + +MenuItem implements [Pressable] + +### MenuItemOption + +Extends `MenuItem`. + +### MenuItemOption + +```ComponentPropTable path=composites,Menu,MenuItemOption.tsx + +``` + +### MenuGroup + +```ComponentPropTable path=composites,Menu,MenuGroup.tsx + +``` + +### MenuOptionGroup + +```ComponentPropTable path=composites,Menu,MenuOptionGroup.tsx + +``` + +## Styling + + + +## Accessibility + +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) diff --git a/versioned_docs/version-3.0.4/migration/Accordion.md b/versioned_docs/version-3.0.4/migration/Accordion.md new file mode 100644 index 000000000..9f75bc7ea --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Accordion.md @@ -0,0 +1,89 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced Accordion into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **dataArray** is depreciated. +- **expanded** → `defaultIndex`, and now accepts array of index. +- Pros like **headerStyle**, **contentStyle**, **icon**, **expandedIcon**, **iconStyle**, **expandedIconStyle**, **renderHeader**, **renderContent** are _no longer required_ as components like `Accordion.Button`, `Accordion.Panel`, `Accordion.Icon` replaces them. +- **onAccordionOpen,** **onAccordionOpen** → `onChange`, one callback instead of 2. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Accordion } from 'native-base'; +const dataArray = [ + { + title: 'First Element', + content: 'Lorem ipsum dolor sit amet', + }, + { title: 'Second Element', content: 'Lorem ipsum dolor sit amet' }, + { + title: 'Third Element', + content: 'Lorem ipsum dolor sit amet', + }, +]; +export default class AccordionExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Accordion } from 'native-base'; +export default function () { + return ( + + + + First Element + + + Lorem ipsum dolor sit amet + + + + Second Element + + + Lorem ipsum dolor sit amet + + + + Third Element + + + Lorem ipsum dolor sit amet + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Actionsheet.md b/versioned_docs/version-3.0.4/migration/Actionsheet.md new file mode 100644 index 000000000..9836c69d3 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Actionsheet.md @@ -0,0 +1,102 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced [`Actionsheet`](actionSheet.md) into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **options** (prop) → `Actionsheet.Item` (component). +- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. +- Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Button, + Content, + ActionSheet, + Text, +} from 'native-base'; +var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +var DESTRUCTIVE_INDEX = 3; +var CANCEL_INDEX = 4; +export default class ActionSheetExample extends Component { + constructor(props) { + super(props); + this.state = {}; + } + render() { + return ( + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, Actionsheet, useDisclose } from 'native-base'; + +export default function () { + const { isOpen, onOpen, onClose } = useDisclose(); + return ( + <> + + + + + Header + Option 1 + Option 2 + Option 3 + Delete + + + Cancel + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Badge.md b/versioned_docs/version-3.0.4/migration/Badge.md new file mode 100644 index 000000000..3bec509f0 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Badge.md @@ -0,0 +1,39 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Badge`](badge.md) to v3 will provide a lot more **design**, **size, variant**, **color** and **customisation** options. + +## Overview + +Migrating Badge components can be broadly described in these points: + +- No need to wrap you text inside text component anymore. +- In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. + +## Code Comparison + + + + +```tsx + + Success + +``` + + + + +```tsx + + Success + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Button.md b/versioned_docs/version-3.0.4/migration/Button.md new file mode 100644 index 000000000..5f31c9ba4 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Button.md @@ -0,0 +1,191 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **size**, **color** and **customisation** options. + +## Overview + +Migrating Button components can broadly described in these points: + +- No need to wrap you text inside `Text` component anymore. +- `isDisabled` prop can be used to disable the button. +- Icons in Button: + `leftIcon` and `rightIcon` are the new alternative to iconLeft and iconRight respectively and they accept **tsx.Element**. +- Colors of the Buttons: + In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. +- Design of the Button: + With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. +- Sizes of the Button: + In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. + +## Code Comparison + +## Colors to the Button + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_12.29.32_PM.png](Button/Screenshot_2021-01-22_at_12.29.32_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_12.53.09_PM.png](Button/Screenshot_2021-01-22_at_12.53.09_PM.png) + +```tsx + +``` + + + + +### Sizes of the Button: + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_2.37.09_PM.png](Button/Screenshot_2021-01-22_at_2.37.09_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_2.38.52_PM.png](Button/Screenshot_2021-01-22_at_2.38.52_PM.png) + +```tsx + +``` + + + + +### Designing the Button + +With v3 you can combine variants and style props to create various designs. + + + + +![Button/Screenshot_2021-01-22_at_1.16.25_PM.png](Button/Screenshot_2021-01-22_at_1.16.25_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.23.42_PM.png](Button/Screenshot_2021-01-22_at_1.23.42_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.17.11_PM.png](Button/Screenshot_2021-01-22_at_1.17.11_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.15.34_PM.png](Button/Screenshot_2021-01-22_at_1.15.34_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.22.36_PM.png](Button/Screenshot_2021-01-22_at_1.22.36_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.20.36_PM.png](Button/Screenshot_2021-01-22_at_1.20.36_PM.png) + +```tsx + +``` + + + + +### Icon Button + +With v3 iconLeft and iconRight can now accepts tsx.Element as child and render the element at the appropriate place. + + + + +![Button/Screenshot_2021-01-22_at_1.32.47_PM.png](Button/Screenshot_2021-01-22_at_1.32.47_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.38.15_PM.png](Button/Screenshot_2021-01-22_at_1.38.15_PM.png) + +```tsx + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png new file mode 100644 index 000000000..1f0a85886 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png new file mode 100644 index 000000000..58cfd0c39 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png new file mode 100644 index 000000000..2c80f1549 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png new file mode 100644 index 000000000..f4c8f4781 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png new file mode 100644 index 000000000..cd3d19be5 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png new file mode 100644 index 000000000..5bef6f394 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png new file mode 100644 index 000000000..7bb43656d Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png new file mode 100644 index 000000000..1ba9b546d Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png new file mode 100644 index 000000000..24f882b52 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png new file mode 100644 index 000000000..17cf494df Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png new file mode 100644 index 000000000..44c565e8f Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png new file mode 100644 index 000000000..c46eaa452 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Card.md b/versioned_docs/version-3.0.4/migration/Card.md new file mode 100644 index 000000000..14550a8cf --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Card.md @@ -0,0 +1,86 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have removed Card components because as it's very simple to create various card layout using primitive components. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Content, + Card, + CardItem, + Text, + Body, +} from 'native-base'; +export default class CardItemBordered extends Component { + render() { + return ( + +
+ + + + NativeBase + + + + + NativeBase is a free and open source framework that enable + developers to build high-quality mobile apps using React + Native iOS and Android apps with a fusion of ES6. + + + + + GeekyAnts + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { VStack, Box, Divider } from 'native-base'; + +export default function () { + return ( + + }> + + NativeBase + + + NativeBase is a free and open source framework that enable developers + to build high-quality mobile apps using React Native iOS and Android + apps with a fusion of ES6. + + + GeekyAnts + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Checkbox.md b/versioned_docs/version-3.0.4/migration/Checkbox.md new file mode 100644 index 000000000..ec3666348 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Checkbox.md @@ -0,0 +1,49 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Checkbox`](checkBox.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **checked** props is deprecated, instead now we provide you with `defaultIsChecked` and `isChecked` prop to better manage your checkbox. For most cases **checked** can be replaced with `isChecked`. +- Colors of the Checkbox: + In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. +- onPress props is deprecated, instead v3 provides onChange which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +![Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png](Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png) + +```tsx + + + Finish list Screen + +``` + + + + +![Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png](Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png) + +```tsx + +Finish list Screen +// alternative: pressing the text will also trigger onChange + + Finish list Screen + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png new file mode 100644 index 000000000..121ecaa72 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png new file mode 100644 index 000000000..ef1c1a20d Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/DatePicker.md b/versioned_docs/version-3.0.4/migration/DatePicker.md new file mode 100644 index 000000000..12d26269e --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/DatePicker.md @@ -0,0 +1 @@ +DatePicker is currently in progress and will be coming soon. Till then you can use React Native's [DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker). diff --git a/versioned_docs/version-3.0.4/migration/DeckSwiper.md b/versioned_docs/version-3.0.4/migration/DeckSwiper.md new file mode 100644 index 000000000..7fec051f2 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/DeckSwiper.md @@ -0,0 +1,3 @@ +We're still thinking whether we should add a DeckSwiper component, let us know on [discord channel](https://discord.com/invite/TSgCw2UPmb). +Till then you can use [react-native-deck-swiper +](https://www.npmjs.com/package/react-native-deck-swiper). diff --git a/versioned_docs/version-3.0.4/migration/Drawer.md b/versioned_docs/version-3.0.4/migration/Drawer.md new file mode 100644 index 000000000..5244b40b4 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Drawer.md @@ -0,0 +1 @@ +Drawer component is still in progress, until it's done you can check out the recipe of integrating React Navigation's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. diff --git a/versioned_docs/version-3.0.4/migration/FABs.md b/versioned_docs/version-3.0.4/migration/FABs.md new file mode 100644 index 000000000..7c7e20906 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/FABs.md @@ -0,0 +1,63 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`FAB`](FAB.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Badge components can broadly described in these points: + +- Instead of Passing Icon as child, use `icon` prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, View, Icon, Fab } from 'native-base'; +export default function () { + return ( + +
+ + + + + + + ); +} +``` + + + + +```tsx +import React from 'react'; +import { Fab, Icon } from 'native-base'; + +export default function () { + return ( + } + /> + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/FooterTab.md b/versioned_docs/version-3.0.4/migration/FooterTab.md new file mode 100644 index 000000000..f56f01a8d --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/FooterTab.md @@ -0,0 +1 @@ +With NativeBase v3 we have removed FooterTab components because as it's very simple to create using HStack components. You can checkout the [recipe](buildingFooterTabs.md). diff --git a/versioned_docs/version-3.0.4/migration/Form.md b/versioned_docs/version-3.0.4/migration/Form.md new file mode 100644 index 000000000..7d89a15c5 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Form.md @@ -0,0 +1,67 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have replaced Form with [`FormControl`](formControl.md) and sliced into [`FormControl.Label`](formControl.md#formcontrollabel), [`FormControl.HelperText`](formControl.md#formcontrolhelpertext) and [`FormControl.ErrorMessage`](formControl#formcontrolerrormessage). + +Here an example to show the code comparison. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Form, Item, Input } from 'native-base'; +export default class FormExample extends Component { + render() { + return ( +
+ + + + + + + + +
+ ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Input, Stack, FormControl } from 'native-base'; +export const FormExample = () => { + return ( + + + + Username + + + + Password + + + + + ); +}; + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Guide.md b/versioned_docs/version-3.0.4/migration/Guide.md new file mode 100644 index 000000000..2b3095055 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Guide.md @@ -0,0 +1,19 @@ +--- +id: Guide +title: Guide to v3 +--- + +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! + +If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: + +- Introduction +- Core Concepts +- Features +- Themes + +This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. + +We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. + +Happy Coding! diff --git a/versioned_docs/version-3.0.4/migration/Header.md b/versioned_docs/version-3.0.4/migration/Header.md new file mode 100644 index 000000000..bcb1f312d --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Header.md @@ -0,0 +1 @@ +With v3 we have removed the **Header** as it can be easily built using `HStack`. You can checkout its recipe [here](/buildingAppBar). diff --git a/versioned_docs/version-3.0.4/migration/Icon.md b/versioned_docs/version-3.0.4/migration/Icon.md new file mode 100644 index 000000000..12cfe68b2 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Icon.md @@ -0,0 +1,75 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Icon`](icon.md) to v3 will provide a lot more **customisation** option. You can also create custom icons using SVG. + +## Overview + +Migrating Icon components can broadly described in these points: + +- **ios**, **android** and **type** props have been deprecated. +- default Icon type i.e **Ionicons** has been removed, now v3 does not uses any. +- v3 uses a third-party icon library ( such as @expo/vector-icons ), with **as** prop. +- custom colors and size can be added using **color** and **size** props. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Icon } from 'native-base'; + +export default class IconExample extends Component { + render() { + return ( + <> + + + + + ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Platform } from 'react-native'; +import { Icon } from 'native-base'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; + +export default function () { + return ( + <> + + + + + ); +} + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Layout.md b/versioned_docs/version-3.0.4/migration/Layout.md new file mode 100644 index 000000000..5e77d987d --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Layout.md @@ -0,0 +1,72 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +## Grid + +You can easily design layouts with [Row](hStack.md) or [Column](VStack.md) components. + +## List + +With NativeBase v3 we have removed List components because as it's very simple to create various list layout using primitive components. + +### Code Comparison + + + + +```tsx + + + + Simon Mignolet + + + + + + + + Nathaniel Clyne + + + + + + + + Dejan Lovren + + + + + + +``` + + + + +```tsx +} w="90%"> + + Simon Mignolet + + + + Nathaniel Clyne + + + + Dejan Lovren + + + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/List.md b/versioned_docs/version-3.0.4/migration/List.md new file mode 100644 index 000000000..e69de29bb diff --git a/versioned_docs/version-3.0.4/migration/Picker.md b/versioned_docs/version-3.0.4/migration/Picker.md new file mode 100644 index 000000000..3d1804beb --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Picker.md @@ -0,0 +1,86 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Picker** with [`Select`](select.md). + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Picker, Form } from 'native-base'; + +export default class PickerExample extends Component { + constructor(props) { + super(props); + this.state = { + selected: 'key1', + }; + } + onValueChange(value: string) { + this.setState({ + selected: value, + }); + } + render() { + return ( + +
+ +
+ + + + + + + +
+ + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Icon, Select } from 'native-base'; + +export default function () { + let [language, setLanguage] = React.useState('key0'); + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Radio Button.md b/versioned_docs/version-3.0.4/migration/Radio Button.md new file mode 100644 index 000000000..67f137395 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Radio Button.md @@ -0,0 +1,90 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Radio`](radio.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Radio components can broadly described in these points: + +- In v3 `Radio` can only used along with `Radio.Group`. +- **selected** is deprecated, instead v3 provides with **value** prop in `Radio.Group`. +- Colors of the Radio: + **color** and **selectedColor** props are deprecated, instead now in v3 **color** is controlled by `colorScheme` prop, and it accepts all the color available in the theme. +- **onPress** prop is deprecated, instead v3 provides **onChange** which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { ListItem, Container, Content, Header, Text, Radio } from 'native-base'; +export default class RadioButtonExample extends Component { + constructor() { + super(); + this.state = { + itemSelected: '', + }; + } + render() { + return ( + +
+ + + this.setState({ itemSelected: 'one' })} + selected={this.state.itemSelected == 'one'} + /> + One + + + this.setState({ itemSelected: 'two' })} + selected={this.state.itemSelected == 'two'} + /> + Two + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Radio } from 'native-base'; +export default function () { + const [value, setValue] = React.useState('one'); + return ( + { + setValue(nextValue); + }} + > + + One + + + Two + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Searchbar.md b/versioned_docs/version-3.0.4/migration/Searchbar.md new file mode 100644 index 000000000..7bc7d3399 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Searchbar.md @@ -0,0 +1 @@ +With NativeBase v3 we have removed **Searchbar** components because as it's very simple to create using `Input` components. To view some examples for seachbars, checkout the [searchbar recipe](buildingSearchBar.md). diff --git a/versioned_docs/version-3.0.4/migration/Segment.md b/versioned_docs/version-3.0.4/migration/Segment.md new file mode 100644 index 000000000..806662cee --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Segment.md @@ -0,0 +1,2 @@ +With NativeBase v3 we have removed the **Segment** component because it's more like a Tab component. You can check out the Tab recipe +[here](buildingTabView.md). diff --git a/versioned_docs/version-3.0.4/migration/Spinner.md b/versioned_docs/version-3.0.4/migration/Spinner.md new file mode 100644 index 000000000..b066b6093 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Spinner.md @@ -0,0 +1,42 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Spinner`](spinner.md) to v3 will provide a lot more **size**, **color** and **customisation** option. + +## Overview + +Migrating Spinner components can broadly described in these points: + +- Get 2 size options, namely **sm/small** and **lg/large** or pass a number as a **size** prop. +- In v3 the color are provided by theme, so the shade for the color should be passed along with the color name. + +## Code Comparison + + + + +```tsx + + + + +``` + + + + +```tsx + + + + + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/SwipeList.md b/versioned_docs/version-3.0.4/migration/SwipeList.md new file mode 100644 index 000000000..4376cf523 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/SwipeList.md @@ -0,0 +1 @@ +With NativeBase v3 we have removed **SwipeList** component. To view example for SwipeList built using [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NB, checkout this [recipe](buildingSwipeList.md). diff --git a/versioned_docs/version-3.0.4/migration/Tabs.md b/versioned_docs/version-3.0.4/migration/Tabs.md new file mode 100644 index 000000000..f809f9a07 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Tabs.md @@ -0,0 +1,62 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +API for Tabs is in progress, in the meantine you can check this [recipe](buildingTabView.md) for building Tabs. + + diff --git a/versioned_docs/version-3.0.4/migration/Thumbnail.md b/versioned_docs/version-3.0.4/migration/Thumbnail.md new file mode 100644 index 000000000..4a2f91bae --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Thumbnail.md @@ -0,0 +1,68 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Thumbnail** with [`Image`](image.md). And we also provide [`Avatar`](avatar.md) as well. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Thumbnail, Text } from 'native-base'; +export default class ThumbnailExample extends Component { + render() { + const uri = + 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + return ( + +
+ + Square Thumbnail + + + + Circular Thumbnail + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Avatar, VStack, Text, Image } from 'native-base'; + +export default function () { + const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + + return ( + + Square Thumbnail + react-native + react-native + react-native + Circular Thumbnail + + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Toast.md b/versioned_docs/version-3.0.4/migration/Toast.md new file mode 100644 index 000000000..43aa50dea --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Toast.md @@ -0,0 +1,79 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +In v3, [`Toast`](toast.md) can be created using **useToast** hook + +## Overview + +Migrating Toast components can broadly described in these points: + +- **buttonText** is no longer supported. +- **type** (prop) → **status** prop. +- **position** (prop) → **placement** prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Toast, Button, Text } from 'native-base'; + +export default class ToastExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, useToast } from 'native-base'; + +export default function () { + const toast = useToast(); + + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Typography.md b/versioned_docs/version-3.0.4/migration/Typography.md new file mode 100644 index 000000000..eca34dd79 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Typography.md @@ -0,0 +1,34 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +**H1**, **H2** and **H3** all have been replaced with [`Heading`](heading.md) component. + +## Code Comparison + + + + +```tsx +

Header One

+

Header Two

+

Header Three

+Default +``` + + + + +```tsx +Header One +Header Two +Header Three +Default +``` + + + diff --git a/versioned_docs/version-3.0.4/modal.md b/versioned_docs/version-3.0.4/modal.md new file mode 100644 index 000000000..df0f0dd3e --- /dev/null +++ b/versioned_docs/version-3.0.4/modal.md @@ -0,0 +1,92 @@ +--- +id: modal +title: Modal +--- + +import { ComponentTheme } from '../../src/components'; + +A Modal is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is **inert**, meaning that users cannot interact with it. + +## Import + +NativeBase exports Modal Compound component: + +- `Modal`: The wrapper that provides context for its children. +- `Modal.Content`: The container for the modal dialog's content. +- `Modal.Header`: The header that labels the modal dialog. +- `Modal.Footer`: The footer that houses the modal actions. +- `Modal.Body`: The wrapper that houses the modal's main content. +- `Modal.CloseButton`: The button that closes the modal. + +```jsx +import { Modal } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Modal,Basic.tsx + +``` + +### Modal Sizes + +You can pass `size` prop to NativeBase Modal , it can take `sm`, `md`, `lg`, `full` that maps to **60%**, **75%**, **90%**, **100%**, or a string or a numerical width of the Modal. + +```ComponentSnackPlayer path=composites,Modal,Size.tsx + +``` + +### intialFocusRef and finalFocusRef Example + +```ComponentSnackPlayer path=composites,Modal,ModalRefEg.tsx + +``` + +### Modal with avoidKeyboard + +```ComponentSnackPlayer path=composites,Modal,ModalWithAvoidKeyboard.tsx + +``` + +### Modal Placement + +```ComponentSnackPlayer path=composites,Modal,ModalPlacement.tsx + +``` + +
+ +:::tip Tip +If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` to Modal. +::: + +## Accessibility + +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). + +### Keyboard Interactions + +| Key | Description | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Tab` | Moves focus to the next tabbable element inside the dialog. If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog. | +| `Shift` + `Tab` | Moves focus to the previous tabbable element inside the dialog. If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog. | +| `Escape` | Closes the dialog | + +## Props + +### Modal + +```ComponentPropTable path=composites,Modal,Modal.tsx + +``` + +### Children components + +- `Modal.Header`, `Modal.Footer` and `Modal.Body` composes the [`Box`](box.md) component. +- `Modal.CloseButton` composes the [`Button`](button.md). + +## Styling + + diff --git a/versioned_docs/version-3.0.4/nativebase-factory.md b/versioned_docs/version-3.0.4/nativebase-factory.md new file mode 100644 index 000000000..69ed5628f --- /dev/null +++ b/versioned_docs/version-3.0.4/nativebase-factory.md @@ -0,0 +1,146 @@ +--- +id: nativebase-factory +title: NativeBase Factory +--- + +NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them. + +```jsx +import { Factory } from 'native-base'; +``` + +## Usage + +```SnackPlayer name=NativeBase%20Factory%20Usage +import React from 'react'; +import { Factory, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewExample () { + const FactoryView = Factory(View); + return ( + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Defining component theme + +```SnackPlayer name=NativeBase%20Factory%20Component%20Theme +import React from 'react'; +import { Factory, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewExample () { + const FactoryView = Factory(View, { + baseStyle: { + bg: 'cyan.300', + borderRadius: 'md', + }, + }); + return ; +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Using mode in component theme + +```SnackPlayer name=NativeBase%20Factory%20Component%20Theme +import React from 'react'; +import { Factory, themeTools, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewModeExample () { + const FactoryView = Factory(View, { + baseStyle: (props) => { + return { + bg: themeTools.mode('rose.500', 'cyan.300')(props), + borderRadius: 'md', + }; + }, + }); + return ; +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Using ref + +```SnackPlayer name=NativeBase%20Factory%20Using%20Ref +import React from 'react'; +import { Factory, Button, Stack, NativeBaseProvider,Center } from 'native-base'; +import { TextInput } from 'react-native'; + +function FactoryViewRefExample () { + const NBInput = Factory(TextInput); + const inputRef = React.useRef(null); + return ( + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Params + +| Name | Type | Description | Default | +| -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | +| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/versioned_docs/version-3.0.4/nativebase-formik-ui.md b/versioned_docs/version-3.0.4/nativebase-formik-ui.md new file mode 100644 index 000000000..e1b73f8e8 --- /dev/null +++ b/versioned_docs/version-3.0.4/nativebase-formik-ui.md @@ -0,0 +1,83 @@ +--- +id: nativebase-formik-ui +title: Formik +--- + +NativeBase provides [Form components](button.md) which can be easily integrated with Formik. + +Let's take an example using [FormControl](formControl.md) and [Input](input.md) components + +```SnackPlayer name=Formik-example dependencies=formik@2.2.9 +import { + VStack, + Input, + Button, + FormControl, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { Formik } from 'formik'; + +const validate = (values) => { + const errors = {}; + + if (!values.firstName) { + errors.firstName = 'Required'; + } + + return errors; + }; + +function FormikExample() { + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + + return ( + + {({ handleChange, handleBlur, handleSubmit, values, errors }) => ( + + + First Name + {console.log("errors" , errors)} + + + {errors.firstName} + + + + + Last Name + + + {errors.lastName} + + + + + + )} + + ); +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/nativebase.mdx b/versioned_docs/version-3.0.4/nativebase.mdx new file mode 100644 index 000000000..67326a804 --- /dev/null +++ b/versioned_docs/version-3.0.4/nativebase.mdx @@ -0,0 +1,93 @@ +--- +id: nativebase +title: Getting Started +slug: / +--- + +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; +import TOCInline from '@theme/TOCInline'; + +
+
+
+

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

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+

A Brief History of NativeBase

+
+ +
+

What's New with NativeBase v3?

+ +We had clear goals in mind while building version 3. Take a look at some of the new features we added: + +
+

Multiplatform

+
+ NativeBase supports multiple platforms; android, iOS and web. You can also + customise properties using platform-specific props. +
+
+ +
+

Inherently Beautiful

+
+ NativeBase ships with a default theme that provides beautiful components, + out of the box. +
+
+ +
+

Accessible

+
+ This version has out of the box accessibility including focus management, + keyboard navigation and more. +
+
+ +
+

Customisable + +

+
+The default theme can be extended as you desire. You can also customise specific components for your app needs. +
+
+ +
diff --git a/versioned_docs/version-3.0.4/numberInput.md b/versioned_docs/version-3.0.4/numberInput.md new file mode 100644 index 000000000..5f44f069a --- /dev/null +++ b/versioned_docs/version-3.0.4/numberInput.md @@ -0,0 +1,231 @@ +--- +id: numberInput +title: NumberInput +--- + +The `NumberInput` component is similar to the [`Input`](input.md) component, but it has controls for incrementing or decrementing numeric values. + +## Implements + +- [`Input`](input.md) + +## Examples + +## Basic + +```SnackPlayer name=NumberInput%20Usage +import React from 'react'; +import { + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + NativeBaseProvider, + Center +} from 'native-base'; + +function NumberInputComponent () { + return ( + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Default Value + +```SnackPlayer name=NumberInput%20Default Value +import React from 'react'; +import { + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + NativeBaseProvider, + Center +} from 'native-base'; +function NumberInputComponent () { + return ( + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Min Max + +```SnackPlayer name=NumberInput%20Min Max +import React from 'react'; +import { + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + NativeBaseProvider, + Center +} from 'native-base'; +function NumberInputComponent () { + return ( + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Steps + +```SnackPlayer name=NumberInput%20Steps +import React from 'react'; +import { + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + NativeBaseProvider, + Center +} from 'native-base'; +function NumberInputComponent () { + return ( + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Form Controlled + +```SnackPlayer name=NumberInput%20Form Controlled +import React from 'react'; +import { + FormControl, + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + Container, + NativeBaseProvider, + Center +} from 'native-base'; + +function NumberInputComponent () { + return ( + + + Number of components? + + + + + + + + You can make a guess. + Don't worry, it's just an example. + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +### NumberInputField + +| Name | Type | Description | Default | +| ------------------ | -------- | -------------------------------------------------------------------------------------------------------------- | ------- | +| value | number | The value of the input for controlled usage. Should be less than max and greater than min. | - | +| defaultValue | number | The initial value of the input. Should be less than max and greater than min. | - | +| onChange | function | The callback fired when the value changes. | | +| min | number | The minimum value of the input. | | +| max | number | The maximum value of the input. | | +| step | number | The step used to increment or decrement the value. | | +| isDisabled | boolean | If true, the input will be disabled. | | +| keepWithinRange | boolean | If true and you use the stepper or up/down arrow keys, the value will not exceed the max or go lower than min. | | +| focusInputOnChange | boolean | If true, the input will be focused as you increment or decrement the value with the stepper. | | + +`NumberInput` composes [`Input`](input.md) so you can pass all the [`Input props`](input.md#props). + +### NumberInputStepper + +`NumberInputStepper` composes [`VStack`](VStack.md) so you can pass all the [`VStack props`](VStack.md#props). + +### NumberDecrementStepper and NumberIncrementStepper + +`NumberDecrementStepper` and `NumberIncrementStepper` composes the [`Box`](box.md) props so you can pass all the [`Box props`](box.md#props). + +### NumberDecrementStepper and NumberIncrementStepper + +| Name | Type | Description | Default | +| ---------- | ---------- | ------------------------------------------- | ------- | +| \_disabled | StyleProps | Pass custom style object for disabled state | - | +| \_active | StyleProps | Pass custom style object for active state | - | diff --git a/versioned_docs/version-3.0.4/overlay.md b/versioned_docs/version-3.0.4/overlay.md new file mode 100644 index 000000000..4dbcbad8c --- /dev/null +++ b/versioned_docs/version-3.0.4/overlay.md @@ -0,0 +1,97 @@ +--- +id: overlay +title: Overlay +--- + +`Overlay` is the fundamental component for positioning and controlling new components on top of existing ones. + +## Import + +```jsx +import { Overlay, useOverlay } from 'native-base'; +``` + +## Examples + +### Usage + +```SnackPlayer name=Overlay%20Usage +import React from 'react'; +import { Button, useOverlay, NativeBaseProvider, Center } from 'native-base'; + +function OverlayComponent () { + const { closeOverlay, setOverlay } = useOverlay(); + return ( + + ) + }> + Show Overlay + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Customised + +```SnackPlayer name=Overlay%20Customized +import React from 'react'; +import { Button, useOverlay, VStack, NativeBaseProvider, Center } from 'native-base'; + +function OverlayComponent () { + const [disableOverlay, setDisableOverlay] = React.useState(false); + const { closeOverlay, setOverlay } = useOverlay(); + + return ( + + , + { disableOverlay, position: 'center', backgroundColor: '#5511ff44' } + ) + } + > + Show Overlay + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| ---------------------- | ------------------------- | ------------------------------------------------- | ------- | +| disableOverlay | boolean | If true, it disables the overlay. | false | +| position | `bottom`, `center`, `top` | Vertically position the component on the overlay. | - | +| defaultBackgroundColor | string | Set background color of overlay. | - | +| animationDuration | number | Duration for fade animation of the overlay. | - | diff --git a/versioned_docs/version-3.0.4/pagination.md b/versioned_docs/version-3.0.4/pagination.md new file mode 100644 index 000000000..e4ed470d1 --- /dev/null +++ b/versioned_docs/version-3.0.4/pagination.md @@ -0,0 +1,6 @@ +--- +id: pagination +title: Pagination +--- + +## Coming Soon diff --git a/versioned_docs/version-3.0.4/pinInput.md b/versioned_docs/version-3.0.4/pinInput.md new file mode 100644 index 000000000..953f20c73 --- /dev/null +++ b/versioned_docs/version-3.0.4/pinInput.md @@ -0,0 +1,285 @@ +--- +id: pinInput +title: PinInput +--- + +The `PinInput` component is similar to the [`Input`](input.md) component, but it is optimized for entering sequences of digits. + +## Implements + +- [`Input`](input.md) + +## Examples + +### Usage + +```SnackPlayer name=PinInput%20Usage +import React from 'react'; +import { PinInput, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Size + +```SnackPlayer name=PinInput%20Sizes +import React from 'react'; +import { PinInput, Stack, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Default Value + +```SnackPlayer name=PinInput%20DefaultValue +import React from 'react'; +import { PinInput, Stack, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Placeholder + +```SnackPlayer name=PinInput%20Placeholder +import React from 'react'; +import { PinInput, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Manage Focus + +```SnackPlayer name=PinInput%20Manage Focus +import React from 'react'; +import { PinInput, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Variants + +```SnackPlayer name=PinInput%20Variants +import React from 'react'; +import { PinInput, Stack, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Form Controlled + +```SnackPlayer name=PinInput%20Form +import React from 'react'; +import { + PinInput, + Center, + FormControl, + NativeBaseProvider +} from 'native-base'; + +function PinInputComponent () { + return ( +
+ + OTP + + + + + + + + OTP will be sent to the number. + + Please Retry. + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## **Props** + +### PinInput + +PinInput passes all the props to its children (`PinInput.Field`) only. + +| Name | Type | Description | Default | +| ------------ | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- | +| manageFocus | boolean | The style variant of the badge. | true | +| defaultValue | string | The default value of the pin input. Example '32'. | - | +| value | string | The value of the the pin input. This is the value that will be returned when the pin input is filled. | - | +| space | [`MarginProps`](https://styled-system.com/api/#space) | The space between each stack item. | - | +| onChange | function | Function called on input change | - | + +### PinInput.Field + +PinInput.Field composes [`Input`](input.md) so you can pass all the [`Input props`](input.md#props). diff --git a/versioned_docs/version-3.0.4/popOver.md b/versioned_docs/version-3.0.4/popOver.md new file mode 100644 index 000000000..c1908d9f5 --- /dev/null +++ b/versioned_docs/version-3.0.4/popOver.md @@ -0,0 +1,94 @@ +--- +id: popOver +title: Popover +--- + +import { ComponentTheme } from '../../src/components'; + +`Popover` is a non-modal dialog that floats around a trigger. It's used to display contextual information to the user, and should be paired with a pressable trigger element. + +## Import + +- `Popover`: The wrapper that provides props, state, and context to its children. +- `Popover.Arrow`: The popover arrow. +- `Popover.Body`: The body of the popover. +- `Popover.Content`: The popover itself. +- `Popover.CloseButton`: A button to close the popover. +- `Popover.Header`: The header of the popover. +- `Popover.Trigger`: Used to wrap the reference (or trigger) element. + +```jsx +import { Popover } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Popover,Basic.tsx + +``` + +### initialFocusRef + +```ComponentSnackPlayer path=composites,Popover,RefEg.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=composites,Popover,PopoverPositions.tsx + +``` + +:::tip Tip +You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content. +::: + +## Props + +```ComponentPropTable path=composites,Popover,Popover.tsx + +``` + +### Popover.Arrow + +`Popover.Arrow` composes the [`Box`](box.md) component. + +### Popover.Content + +`Popover.Content` composes the [`Box`](box.md) component. + +### Popover.Header + +`Popover.Header` composes the [`Box`](box.md) component. + +### Popover.Footer + +`Popover.Footer` composes the [`Box`](box.md) component. + +### Popover.Body + +`Popover.Body` composes the [`Box`](box.md) component. + +### Popover.CloseButton  + +`Popover.CloseButton` composes the [`Button`](button.md) component. + +## Styling + + + +## Accessibility + +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) + +### Keyboard Interactions + +| Name | Description | +| ----------- | ------------------------------------------------------ | +| Space | Opens/closes the popover. | +| Enter | Opens/closes the popover. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover and moves focus to Popover.Trigger. | diff --git a/versioned_docs/version-3.0.4/presence-transition.md b/versioned_docs/version-3.0.4/presence-transition.md new file mode 100644 index 000000000..2e725036a --- /dev/null +++ b/versioned_docs/version-3.0.4/presence-transition.md @@ -0,0 +1,63 @@ +--- +id: presence-transition +title: PresenceTransition +--- + +PresenceTransition provides a declarative API to add entry and exit transitions. + +### Fade + +```ComponentSnackPlayer path=composites,Transitions,Fade.tsx + +``` + +### ScaleFade + +```ComponentSnackPlayer path=composites,Transitions,ScaleFade.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true + +``` + +### ISupportedTransitions + +```js +interface ISupportedTransitions { + opacity?: number; + translateY?: number; + translateX?: number; + scale?: number; + scaleX?: number; + scaleY?: number; + rotate?: string; +} +``` + +### ITransitionStyleProps + +```js +interface ITransitionStyleProps extends ISupportedTransitions { + transition?: { + type?: 'timing' | 'spring', + easing?: (value: number) => number, + overshootClamping?: boolean, + restDisplacementThreshold?: number, + restSpeedThreshold?: number, + velocity?: number | { x: number, y: number }, + bounciness?: number, + speed?: number, + tension?: number, + friction?: number, + stiffness?: number, + mass?: number, + damping?: number, + delay?: number, + duration?: number, + useNativeDriver?: boolean, + }; +} +``` diff --git a/versioned_docs/version-3.0.4/pressable.md b/versioned_docs/version-3.0.4/pressable.md new file mode 100644 index 000000000..4f37c810d --- /dev/null +++ b/versioned_docs/version-3.0.4/pressable.md @@ -0,0 +1,32 @@ +--- +id: pressable +title: Pressable +--- + +Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events. + +## Examples + +### Basic + +Pressable accepts most of the utility style system props. + +```ComponentSnackPlayer path=primitives,Pressable,Basic.tsx + +``` + +### Accessing events (hover, focus and pressed) + +Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props. + +```ComponentSnackPlayer path=primitives,Pressable,Events.tsx + +``` + +## Props + +### Pressable + +```ComponentPropTable path=primitives,Pressable,Pressable.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.4/progress.md b/versioned_docs/version-3.0.4/progress.md new file mode 100644 index 000000000..9fe5ee80c --- /dev/null +++ b/versioned_docs/version-3.0.4/progress.md @@ -0,0 +1,62 @@ +--- +id: progress +title: Progress +--- + +import { ComponentTheme } from '../../src/components'; + +`Progress` is used to display the progress status for a task that takes a long time or consists of several steps. + +## Import + +```jsx +import { Progress } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Progress,Basic.tsx + +``` + +### Progress colorScheme + +```ComponentSnackPlayer path=composites,Progress,ColorScheme.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Progress,Sizes.tsx + +``` + +### Flat Progress + +```ComponentSnackPlayer path=composites,Progress,Flat.tsx + +``` + +### Custom Track Color + +```ComponentSnackPlayer path=composites,Progress,CustomBgColor.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Progress,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. diff --git a/versioned_docs/version-3.0.4/radio.md b/versioned_docs/version-3.0.4/radio.md new file mode 100644 index 000000000..63485030b --- /dev/null +++ b/versioned_docs/version-3.0.4/radio.md @@ -0,0 +1,97 @@ +--- +id: radio +title: Radio +--- + +import { ComponentTheme } from '../../src/components'; + +`Radio` is used when only one choice may be selected in a series of options. + +## Examples + +### Controlled + +```ComponentSnackPlayer path=primitives,Radio,controlledRadio.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Radio,uncontrolledRadio.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Radio,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Radio,invalid.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Radio,size.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Radio,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Radio,customIcon.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Radio,formControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Radio,withRef.tsx + +``` + +## Props + +### Radio + +```ComponentPropTable path=primitives,Radio,Radio.tsx + +``` + +### Radio Group + +```ComponentPropTable path=primitives,Radio,RadioGroup.tsx + +``` + +## Accessibility + +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). + +### Keyboard Interactions + +| Key | Description | +| ------------ | ---------------------------------------------------------------------------------- | +| `Tab` | Moves focus to either the checked radio item or the first radio item in the group. | +| `Space` | When focus is on an unchecked radio item, checks it. | +| `ArrowDown` | Moves focus to the next radio item in the group. | +| `ArrowRight` | Moves focus to the next radio item in the group. | +| `ArrowUp` | Moves focus to the previous radio item in the group. | +| `ArrowLeft` | Moves focus to the previous radio item in the group. | + +## Styling + + diff --git a/versioned_docs/version-3.0.4/reactHooksForms.md b/versioned_docs/version-3.0.4/reactHooksForms.md new file mode 100644 index 000000000..f4efec13c --- /dev/null +++ b/versioned_docs/version-3.0.4/reactHooksForms.md @@ -0,0 +1,565 @@ +--- +id: react-hook-forms +title: React Hook Forms +--- + +A Performant, flexible and extensible forms with easy-to-use validation. And below are some examples showing its integration with NativeBase. + +## Usage + +```jsx +import { + VStack, + Input, + Button, + FormControl, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + First Name + ( + onChange(val)} + value={value} + /> + )} + name="firstName" + rules={{ required: 'Field is required', minLength: 3 }} + defaultValue="" + /> + + {errors.firstName?.message} + + + + Last Name + ( + onChange(val)} + value={value} + /> + )} + name="lastName" + defaultValue="" + /> + + {errors.lastName?.message} + + + + Age + ( + onChange(val)} + value={value} + /> + )} + name="age" + rules={{ min: 18, required: 'Age is required' }} + defaultValue="" + /> + + {errors.age?.type === 'required' + ? errors.age?.message + : errors.age?.type === 'min' ?? 'Under age'} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Radio and Checkbox + +```jsx +import { + VStack, + Button, + FormControl, + Radio, + Checkbox, + Text, + Icon, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookCheckboxExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + Hobbies + ( + { + onChange(values); + }} + flexDirection="row" + > + } + > + Darts + + } + > + Movie + + } + > + Camping + + + } + > + Chess + + + )} + rules={{ required: 'Atleast 1 hobbie needed' }} + name="hobbies" + defaultValue="" + /> + + {errors.hobbies?.message} + + + + Gender + ( + onChange(val)} + > + + Male + + + Female + + + )} + name="gender" + rules={{ required: 'Gender is required' }} + /> + + {errors.gender?.message} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Select + +```jsx +import { + VStack, + Button, + FormControl, + Select, + Icon, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookSelectExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + Fav language: + ( + + )} + name="language" + rules={{ required: 'Field is required' }} + defaultValue="js" + /> + + {errors.language?.message} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Slider + +```jsx +import { + VStack, + Button, + FormControl, + Slider, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookSliderExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + Amount you like NativeBase + ( + onChange(val)} defaultValue={value}> + + + + + + )} + name="like" + rules={{ required: 'Field is required', minLength: 3 }} + defaultValue={100} + /> + + {errors.like?.message} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Textarea + +```jsx +import { + VStack, + Button, + FormControl, + TextArea, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookTextareaExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + What do you think? + ( +