From 23bc03b4cd9ca8fc1f8af79359a504b354243b70 Mon Sep 17 00:00:00 2001 From: Trevor Allred Date: Thu, 2 Sep 2021 09:22:29 -0700 Subject: [PATCH 1/9] Update Button.md Fixed minor English typo --- versioned_docs/version-3.1.0/migration/Button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-3.1.0/migration/Button.md b/versioned_docs/version-3.1.0/migration/Button.md index 28d7e47de..a33b068df 100644 --- a/versioned_docs/version-3.1.0/migration/Button.md +++ b/versioned_docs/version-3.1.0/migration/Button.md @@ -12,7 +12,7 @@ Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **siz Migrating Button components can broadly described in these points: -- No need to wrap you text inside `Text` component anymore. +- No need to wrap your 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**. From df4204f8c3f7513683f759e60cefa5c8434e076e Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Fri, 3 Sep 2021 09:50:22 +0530 Subject: [PATCH 2/9] add export default in app exports --- docs/install-cra.mdx | 2 +- docs/install-expo.mdx | 2 +- docs/install-rn.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/install-cra.mdx b/docs/install-cra.mdx index f016c5a49..a207768f2 100644 --- a/docs/install-cra.mdx +++ b/docs/install-cra.mdx @@ -80,7 +80,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world diff --git a/docs/install-expo.mdx b/docs/install-expo.mdx index 99a117f78..08b909648 100644 --- a/docs/install-expo.mdx +++ b/docs/install-expo.mdx @@ -62,7 +62,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world diff --git a/docs/install-rn.mdx b/docs/install-rn.mdx index ca4746850..88d0e5010 100644 --- a/docs/install-rn.mdx +++ b/docs/install-rn.mdx @@ -56,7 +56,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world From fd1d4b8d5ba5f8fd93adc922740709fb5b7b0623 Mon Sep 17 00:00:00 2001 From: Thales Ogliari Date: Fri, 3 Sep 2021 09:17:02 -0300 Subject: [PATCH 3/9] fix typo --- docs/darkMode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/darkMode.md b/docs/darkMode.md index 88bd73132..1c427554a 100644 --- a/docs/darkMode.md +++ b/docs/darkMode.md @@ -66,7 +66,7 @@ export default function () { 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 +## 3. By using \_light and \_dark props In this approach we pass the required props inside \_light and \_dark based on the requirement. From 2c7e35cc0f6e743272bfcd5357c1a4d00a752888 Mon Sep 17 00:00:00 2001 From: meenu Date: Mon, 6 Sep 2021 17:44:43 +0530 Subject: [PATCH 4/9] feat: hidden documentation added --- docs/hidden.md | 125 +++++++++++++++++++++++++++++++ sidebars.js | 1 + src/components/ComponentTheme.js | 2 +- 3 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 docs/hidden.md diff --git a/docs/hidden.md b/docs/hidden.md new file mode 100644 index 000000000..f51c05c15 --- /dev/null +++ b/docs/hidden.md @@ -0,0 +1,125 @@ +--- +id: hidden +title: Hidden +--- + +import { ComponentTheme } from '../src/components'; + +Hidden is used to responsively, according to colorMode or according to platform toggle the visibility value of child components. It doesn't mount the child components in the restricted values of props. + +## Import + +```jsx +import { Hidden } from 'native-base'; +``` + +## Example + +### Basic + +```jsx + + + This text will be always hidden. + + +``` + +### Hidden according to breakpoints + +```jsx +<> + + + This text will be hidden from sm to lg screens. + + + + + This text will be hidden on sm and lg screens only. + + + +``` + +### Hidden according to colorMode + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + useColorMode, + Button, + VStack, + Center, + Box,Text, + Hidden, + useColorModeValue, + NativeBaseProvider +} from 'native-base'; + +function ColorModeExample () { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + <> + + + + + This text will be hidden on light mode + + + + + This text will be hidden on dark mode + + + + + ); +} + +const LocalWrapper = ({ children }) => { + const bg = useColorModeValue('gray.200', 'gray.800') + return ( +
+ {children} +
+ ); +}; + +export default function () { + return ( + + + + + + ); +} +``` + +## Hidden according to platform + +```jsx + + + This text will be hidden on android and web. + + +``` + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/sidebars.js b/sidebars.js index 3a408b265..dc34c8182 100644 --- a/sidebars.js +++ b/sidebars.js @@ -176,6 +176,7 @@ module.exports = { items: [ // 'appBar', 'FAB', + 'hidden', ], }, { diff --git a/src/components/ComponentTheme.js b/src/components/ComponentTheme.js index fd2c71205..b4b21e2d6 100644 --- a/src/components/ComponentTheme.js +++ b/src/components/ComponentTheme.js @@ -75,7 +75,7 @@ export function ComponentTheme({ name, componentName, fileName }) { Date: Mon, 6 Sep 2021 17:53:48 +0530 Subject: [PATCH 5/9] opacity docs changes --- docs/default-theme.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/default-theme.md b/docs/default-theme.md index 1f7874bd8..7a6ab70bf 100644 --- a/docs/default-theme.md +++ b/docs/default-theme.md @@ -30,20 +30,20 @@ To manage Typography options, the theme object supports the following keys: ```jsx const typography = { letterSpacings: { - 'xs': '-0.05em', - 'sm': '-0.025em', - 'md': 0, - 'lg': '0.025em', - 'xl': '0.05em', + xs: '-0.05em', + sm: '-0.025em', + md: 0, + lg: '0.025em', + xl: '0.05em', '2xl': '0.1em', }, lineHeights: { '2xs': '1em', - 'xs': '1.125em', - 'sm': '1.25em', - 'md': '1.375em', - 'lg': '1.5em', - 'xl': '1.75em', + xs: '1.125em', + sm: '1.25em', + md: '1.375em', + lg: '1.5em', + xl: '1.75em', '2xl': '2em', '3xl': '2.5em', '4xl': '3em', @@ -68,11 +68,11 @@ const typography = { }, fontSizes: { '2xs': 10, - 'xs': 12, - 'sm': 14, - 'md': 16, - 'lg': 18, - 'xl': 20, + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 20, '2xl': 24, '3xl': 30, '4xl': 36, @@ -95,7 +95,7 @@ The `size` key allows you to customize the global spacing and sizing scale for ## Opacity -The `opacity` key is mainly used to allow you to define colors opacity using the red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. +The `opacity` key is used in opacity style object and to define colors opacity using the red-green-blue-alpha (RGBA) model, RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. ```jsx const opacity = { From 291f2dd592c35ec42f1d5635bd160e72ea94620d Mon Sep 17 00:00:00 2001 From: meenu Date: Mon, 6 Sep 2021 18:11:00 +0530 Subject: [PATCH 6/9] hidden definition changes --- docs/hidden.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/hidden.md b/docs/hidden.md index f51c05c15..df7ecb077 100644 --- a/docs/hidden.md +++ b/docs/hidden.md @@ -5,7 +5,7 @@ title: Hidden import { ComponentTheme } from '../src/components'; -Hidden is used to responsively, according to colorMode or according to platform toggle the visibility value of child components. It doesn't mount the child components in the restricted values of props. +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. ## Import From ff221791a7a618f6331cd9ef3311ce8e6488eb5f Mon Sep 17 00:00:00 2001 From: Himanshu Satija Date: Mon, 6 Sep 2021 18:31:31 +0530 Subject: [PATCH 7/9] Minor typo --- docs/migration/Button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migration/Button.md b/docs/migration/Button.md index 28d7e47de..a33b068df 100644 --- a/docs/migration/Button.md +++ b/docs/migration/Button.md @@ -12,7 +12,7 @@ Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **siz Migrating Button components can broadly described in these points: -- No need to wrap you text inside `Text` component anymore. +- No need to wrap your 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**. From 28d2dbf2417d70520348ae3bc6076d144a4fda1c Mon Sep 17 00:00:00 2001 From: Himanshu Satija Date: Mon, 6 Sep 2021 18:37:51 +0530 Subject: [PATCH 8/9] Fix typo --- docs/loginsignupforms.md | 124 +++++++++++++++++++-------------------- 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/docs/loginsignupforms.md b/docs/loginsignupforms.md index dbd302238..8890642a2 100644 --- a/docs/loginsignupforms.md +++ b/docs/loginsignupforms.md @@ -69,37 +69,37 @@ export default function App() { Login - - } - color='muted.700' - size='sm' - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> @@ -178,37 +178,37 @@ export default function App() { SignUp - - } - color='muted.700' - size='sm' - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> From c0a6750ba121206872b969acfa8c53ab12e3fcab Mon Sep 17 00:00:00 2001 From: Cyrus Passi Date: Tue, 7 Sep 2021 11:59:09 +0530 Subject: [PATCH 9/9] added templates for expo and react-native (#19) --- docs/install-expo.mdx | 48 +++++++++++++++++++++++++++++++++++++++-- docs/install-rn.mdx | 50 ++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 95 insertions(+), 3 deletions(-) diff --git a/docs/install-expo.mdx b/docs/install-expo.mdx index 08b909648..00a6c09a5 100644 --- a/docs/install-expo.mdx +++ b/docs/install-expo.mdx @@ -9,7 +9,44 @@ 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 + + + + +### Create a new project using Expo CLI with NativeBase template + +

Plain Javascript

+
+ +```bash +expo init my-app --template expo-template-native-base +``` + +
+ +

With Typescript

+
+ +```bash +expo init my-app --template expo-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + + + +### Create a new expo project if not exist ```bash npm install --global expo-cli @@ -28,7 +65,7 @@ cd my-project/ { label: 'npm', value: 'npm' } ]}> - + ```bash yarn add native-base styled-components styled-system @@ -71,6 +108,13 @@ export default function App() { } ``` + + + + + + +
minions clapping
diff --git a/docs/install-rn.mdx b/docs/install-rn.mdx index 7ccf696ff..202de7126 100644 --- a/docs/install-rn.mdx +++ b/docs/install-rn.mdx @@ -7,7 +7,50 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import { TileLink } from '../src/components'; -### Create a new project + + + + + + + + +### Create a new project using ReactNative CLI with NativeBase template + +[Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. + +

Plain Javascript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base +``` + +
+ +

With Typescript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + + + +### Create a new project if not exist ```bash npx react-native init AwesomeNativeBase @@ -65,6 +108,11 @@ export default function App() { } ``` + + + + +