Update staging

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.
 

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 = {

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
+<Hidden>
+  <Box bg="red.400" p={2}>
+    <Text>This text will be always hidden.</Text>
+  </Box>
+</Hidden>
+```
+
+### Hidden according to breakpoints
+
+```jsx
+<>
+  <Hidden from="sm" till="lg">
+    <Box bg="red.400" p={2}>
+      <Text>This text will be hidden from sm to lg screens.</Text>
+    </Box>
+  </Hidden>
+  <Hidden only={['sm', 'lg']}>
+    <Box bg="red.400" p={2}>
+      <Text>This text will be hidden on sm and lg screens only.</Text>
+    </Box>
+  </Hidden>
+</>
+```
+
+### 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 (
+    <>
+      <Button
+        colorScheme={colorMode === 'light' ? 'blue' : 'red'}
+        onPress={() => {
+          toggleColorMode();
+        }}
+      >
+        Change mode
+      </Button>
+      <VStack space={2} mt={3}>
+        <Hidden colorMode="light">
+          <Box bg="yellow.400" p={2}>
+            <Text>This text will be hidden on light mode</Text>
+          </Box>
+        </Hidden>
+        <Hidden colorMode="dark">
+          <Box bg="green.400" p={2}>
+            <Text>This text will be hidden on dark mode</Text>
+          </Box>
+        </Hidden>
+      </VStack>
+    </>
+  );
+}
+
+const LocalWrapper = ({ children }) => {
+  const bg = useColorModeValue('gray.200', 'gray.800')
+  return (
+    <Center
+      flex={1}
+      bg={bg}
+    >
+      {children}
+    </Center>
+  );
+};
+
+export default function () {
+  return (
+    <NativeBaseProvider>
+      <LocalWrapper>
+        <ColorModeExample />
+      </LocalWrapper>
+    </NativeBaseProvider>
+  );
+}
+```
+
+## Hidden according to platform
+
+```jsx
+<Hidden platform={['android', 'web']}>
+  <Box bg="red.400" p={2}>
+    <Text>This text will be hidden on android and web.</Text>
+  </Box>
+</Hidden>
+```
+
+## Props
+
+```ComponentPropTable path=composites,Fab,Fab.tsx
+
+```

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
+
+<Tabs
+  defaultValue='new'
+  values={[
+  { label: 'New Project', value: 'new' },
+  { label: 'Existing Project', value: 'existing' }
+  ]}>
+ <TabItem value="new">
+
+### Create a new project using Expo CLI with NativeBase template
+
+<h4 style={{marginTop:"40px"}} className="mt-10 font-mono">Plain Javascript</h4>
+<div style={{maxWidth:"750px"}}>
+
+```bash
+expo init my-app --template expo-template-native-base
+```
+
+</div>
+
+<h4 className="mt-8 font-mono">With Typescript</h4>
+<div style={{maxWidth:"750px"}}>
+
+```bash
+expo init my-app --template expo-template-native-base-typescript
+```
+
+</div>
+
+Yey! you are all set, start editing App.js/App.tsx now.
+
+</TabItem>
+
+
+
+<TabItem value="existing">
+
+### 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' }
   ]}>
 
-  <TabItem value="yarn">
+<TabItem value="yarn">
 
 ```bash
 yarn add native-base styled-components styled-system
@@ -71,6 +108,13 @@ export default function App() {
 }
 ```
 
+
+
+</TabItem>
+</Tabs>
+
+
+
 <div style={{ textAlign: 'center' }}>
   <img src="/img/minion.gif" alt="minions clapping" />
 </div>

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
+
+<Tabs
+  defaultValue='new'
+  values={[
+  { label: 'New Project', value: 'new' },
+  { label: 'Existing Project', value: 'existing' }
+  ]}>
+
+
+<TabItem value="new">
+
+
+
+### 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.
+
+<h4 style={{marginTop:"40px"}} className="mt-8 font-mono">Plain Javascript</h4>
+<div style={{maxWidth:"750px"}}>
+
+```bash
+npx react-native init MyApp --template react-native-template-native-base
+```
+
+</div>
+
+<h4 className="mt-8 font-mono">With Typescript</h4>
+<div style={{maxWidth:"750px"}}>
+
+```bash
+npx react-native init MyApp --template react-native-template-native-base-typescript
+```
+
+</div>
+
+Yey! you are all set, start editing App.js/App.tsx now.
+
+
+</TabItem>
+
+
+<TabItem value="existing">
+
+### Create a new project if not exist
 
 ```bash
 npx react-native init AwesomeNativeBase
@@ -65,6 +108,11 @@ export default function App() {
 }
 ```
 
+</TabItem>
+
+</Tabs>
+
+
 <div style={{ textAlign: 'center' }}>
   <img src="/img/minion.gif" />
 </div>