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. 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 = { diff --git a/docs/hidden.md b/docs/hidden.md new file mode 100644 index 000000000..df7ecb077 --- /dev/null +++ b/docs/hidden.md @@ -0,0 +1,125 @@ +--- +id: hidden +title: Hidden +--- + +import { ComponentTheme } from '../src/components'; + +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 + +```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/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() { } ``` + + + + +
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" + /> + } + /> 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**. 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 }) {