@@ -107,7 +107,7 @@ export default function App() {
>
-
+
The active color mode is{' '}
{useColorModeValue('Light', 'Dark')}
diff --git a/docs/customizingTheme.md b/docs/customizingTheme.md
index 34e5bd136..87d58b620 100644
--- a/docs/customizingTheme.md
+++ b/docs/customizingTheme.md
@@ -101,7 +101,7 @@ function App() {
return (
-
+
);
}
diff --git a/docs/design-tokens.md b/docs/design-tokens.md
index 8198af8e3..a919f0a01 100644
--- a/docs/design-tokens.md
+++ b/docs/design-tokens.md
@@ -55,7 +55,7 @@ export const spacing = {
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
diff --git a/docs/interaction-styles.mdx b/docs/interaction-styles.mdx
index 8c07bf6a5..142e1d206 100644
--- a/docs/interaction-styles.mdx
+++ b/docs/interaction-styles.mdx
@@ -20,12 +20,12 @@ NativeBase provides a declarative way to add interaction or platform specific pr
Using `_hover` pseudo prop, we can customize the style of Pressable component on hover.
-
+
@@ -40,8 +40,8 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on
@@ -56,12 +56,12 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on
Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed.
-
+
@@ -76,9 +76,9 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component
@@ -92,7 +92,7 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component
Using `_focus` pseudo prop, we can customize the style of Pressable component on focus.
-
+
@@ -117,8 +117,8 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on
_focus={{ bg: 'primary.700', borderColor: 'primary.400', borderWidth: '2px' }}
bg="primary.600"
rounded="sm"
- py={2}
- px={3}
+ py="2"
+ px="3"
alignSelf="center"
>
@@ -132,14 +132,14 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on
Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms.
-
-
+
+
@@ -148,13 +148,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
Web
-
+
@@ -163,13 +163,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
Android
-
+
@@ -183,12 +183,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
```jsx title="Platform specific example"
-
+
@@ -197,12 +197,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
Web
-
+
@@ -211,12 +211,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
Android
-
+
diff --git a/docs/migration/Card.md b/docs/migration/Card.md
index c9acc1d07..14a383239 100644
--- a/docs/migration/Card.md
+++ b/docs/migration/Card.md
@@ -68,17 +68,17 @@ 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/docs/migration/Icon.md b/docs/migration/Icon.md
index cdaba70a0..e51c49acb 100644
--- a/docs/migration/Icon.md
+++ b/docs/migration/Icon.md
@@ -65,7 +65,7 @@ export default function () {
diff --git a/docs/migration/Radio Button.md b/docs/migration/Radio Button.md
index a2ccedd08..b05b412b7 100644
--- a/docs/migration/Radio Button.md
+++ b/docs/migration/Radio Button.md
@@ -80,10 +80,10 @@ export default function () {
setValue(nextValue);
}}
>
-
+
One
-
+
Two
diff --git a/docs/migration/Spinner.md b/docs/migration/Spinner.md
index a4f8f160d..9a6fbc31a 100644
--- a/docs/migration/Spinner.md
+++ b/docs/migration/Spinner.md
@@ -40,7 +40,7 @@ values={[
-
+
```
diff --git a/docs/migration/Thumbnail.md b/docs/migration/Thumbnail.md
index 2f8e46907..d199a39ad 100644
--- a/docs/migration/Thumbnail.md
+++ b/docs/migration/Thumbnail.md
@@ -55,11 +55,11 @@ export default function () {
const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png';
return (
-
+ Square Thumbnail
-
-
-
+
+
+ Circular Thumbnail
diff --git a/docs/nativebase-factory.md b/docs/nativebase-factory.md
index 242f0bdae..fafcf1a6f 100644
--- a/docs/nativebase-factory.md
+++ b/docs/nativebase-factory.md
@@ -19,7 +19,7 @@ import { View } from 'react-native';
function FactoryViewExample () {
const FactoryView = Factory(View);
return (
-
+
);
}
@@ -49,7 +49,7 @@ function FactoryViewExample () {
borderRadius: 'md',
},
});
- return ;
+ return ;
}
// Example template which wraps component with NativeBaseProvider
@@ -80,7 +80,7 @@ function FactoryViewModeExample () {
};
},
});
- return ;
+ return ;
}
// Example template which wraps component with NativeBaseProvider
@@ -112,7 +112,7 @@ function FactoryViewRefExample() {
const NBInput = Factory(TextInput);
const inputRef = React.useRef(null);
return (
-
+
@@ -119,14 +119,14 @@ function Example() {
bg="violet.500"
_text={{ color: 'white', fontWeight: '700', fontSize: 'xs' }}
position="absolute"
- bottom={0}
+ bottom="0"
px="3"
py="1.5">
PHOTOS
-
+
The Garden City
@@ -143,7 +143,7 @@ function Example() {
Bengaluru (also called Bangalore) is the center of India's high-tech
industry. The city is also known for its parks and nightlife.
-
+
+ NativeBase
);
@@ -53,7 +53,7 @@ import { NativeBaseProvider, Box, Text } from 'native-base';
function MyComponent() {
return (
// This would look same on all devices
-
+ NativeBase
);
@@ -81,7 +81,7 @@ function MyComponent() {
const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 });
return (
// This would look same on all devices
-
+ NativeBase
);
diff --git a/docs/theme.md b/docs/theme.md
index db050174c..0f660da4a 100644
--- a/docs/theme.md
+++ b/docs/theme.md
@@ -22,9 +22,9 @@ function ColorPalete() {
return (
}
+ renderItem={({ item }) => }
/>
);
@@ -34,7 +34,7 @@ function ColorPalete() {
export default function () {
return (
-
-
+
The active color mode is{' '}
{useColorModeValue('Light', 'Dark')}
diff --git a/docs/useAccessibleColors.md b/docs/useAccessibleColors.md
index 1fa0dfd75..812db8a6d 100644
--- a/docs/useAccessibleColors.md
+++ b/docs/useAccessibleColors.md
@@ -26,7 +26,7 @@ const ButtonTemplate = ({ shade }: any) => {
key={`yellow.${shade}`}
bg={`yellow.${shade}`}
_text={{ color: colorContrast }}
- mb={1}
+ mb="1"
>
Save Changes
diff --git a/docs/useContrastText.md b/docs/useContrastText.md
index 4497c3b17..462bbe3dc 100644
--- a/docs/useContrastText.md
+++ b/docs/useContrastText.md
@@ -65,7 +65,7 @@ const ButtonTemplate = ({ shade }: any) => {
key={`yellow.${shade}`}
bg={`yellow.${shade}`}
_text={{ color: colorContrast }}
- mb={1}
+ mb="1"
>
Save Changes
diff --git a/docs/utility-first.mdx b/docs/utility-first.mdx
index ebd5645c6..579ba2c33 100644
--- a/docs/utility-first.mdx
+++ b/docs/utility-first.mdx
@@ -51,16 +51,16 @@ export default function App() {
const styles = StyleSheet.create({
container: {
backgroundColor: '#0891b2',
- paddingVertical: 16,
- paddingHorizontal: 12,
- borderRadius: 5,
+ paddingVertical: '16',
+ paddingHorizontal: '12',
+ borderRadius: '5',
alignSelf: 'center',
- width: 375,
+ width: '375',
maxWidth: '100%',
},
timings: {
color: '#fff',
- fontSize: 14,
+ fontSize: '14',
},
metaContainer: {
justifyContent: 'space-between',
@@ -70,27 +70,27 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
},
avatar: {
- height: 100,
- width: 100,
- borderRadius: 100,
+ height: '100',
+ width: '100',
+ borderRadius: '100',
},
description: {
color: 'white',
- marginTop: 5,
- fontSize: 20,
+ marginTop: '5',
+ fontSize: '20',
},
button: {
backgroundColor: '#22d3ee',
alignSelf: 'flex-start',
- paddingHorizontal: 10,
- paddingVertical: 5,
- borderRadius: 3,
+ paddingHorizontal: '10',
+ paddingVertical: '5',
+ borderRadius: '3',
},
buttonText: {
fontWeight: 'bold',
color: 'white',
textTransform: 'uppercase',
- fontSize: 14,
+ fontSize: '14',
},
});
```
@@ -126,8 +126,8 @@ export function UtilityFirstExample() {
-
+
Today @ 9PM
@@ -147,12 +147,12 @@ export function UtilityFirstExample() {
rounded="sm"
bg="primary.400"
alignSelf="flex-start"
- py={2}
- px={3}
+ py="4"
+ px="3"
>
@@ -165,9 +165,9 @@ export function UtilityFirstExample() {
uri: 'https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg',
}}
alt="Aang flying and surrounded by clouds"
- height={100}
+ height="100"
rounded="full"
- width={100}
+ width="100"
/>
diff --git a/docs/utilityProps.md b/docs/utilityProps.md
index 8cf57537b..f0ede0148 100644
--- a/docs/utilityProps.md
+++ b/docs/utilityProps.md
@@ -22,12 +22,12 @@ const Box = (props) => {
function Component() {
return (
<>
- { /* m={2} refers to the value of `theme.space[2]` */ }
-
+ { /* m="2" refers to the value of `theme.space[2]` */ }
+
{ /* You can also use custom values */ }
-
+
{ /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */ }
-
+
);
}
@@ -69,7 +69,7 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base';
const Box = (props) => {
- return ;
+ return ;
};
function Component() {
@@ -79,7 +79,7 @@ function Component() {
{/* picks up a nested color value using dot notation */}
{/* => `theme.colors.lightBlue[300]` */}
-
+
{/* using theme colors to set text color */}
{' '}
@@ -129,38 +129,38 @@ import React from "react"
import { HStack, Stack, Center, NativeBaseProvider } from "native-base"
export function Example() {
return (
-
-
+
+
Box 1
Box 2
Box 3
@@ -188,7 +188,7 @@ import React from 'react';
import { Text as NBText, NativeBaseProvider, Center } from 'native-base';
const Text = (props) => {
- return
+ return
}
function Component() {
@@ -239,24 +239,24 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
return (
<>
{ /* verbose */ }
-
+
{ /* shorthand */ }
{ /* use boxSizing */ }
-
+
{ /* width `50%` */ }
-
- { /* width `256px` h={8} */ }
-
- { /* width `'40px'` */ }
-
+
+ { /* width `256px` h="8" */ }
+
+ { /* width `"40px"` */ }
+
);
}
@@ -296,7 +296,7 @@ import React from 'react';
import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
@@ -353,15 +353,15 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return ;
+ return ;
};
function Component() {
return (
<>
-
-
-
+
+
+
);
}
@@ -410,7 +410,7 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
@@ -418,12 +418,12 @@ function Component() {
<>
{ /* picks up a nested radius value using dot notation */ }
{ /* => `theme.radius.md` */ }
-
-
+
+
{ /* partial border radius */ }
-
+
{ /* absolute value prop */ }
-
+
);
}
@@ -460,15 +460,15 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
return (
<>
-
-
-
+
+
+
);
}
@@ -502,18 +502,18 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
return (
<>
{ /* => `theme.shadows.md` */ }
-
-
-
-
-
+
+
+
+
+
);
}
diff --git a/docs/utilityPropsSpecificity.md b/docs/utilityPropsSpecificity.md
index 70e42236a..9c7e1a053 100644
--- a/docs/utilityPropsSpecificity.md
+++ b/docs/utilityPropsSpecificity.md
@@ -6,17 +6,17 @@ title: Utility Props Specificity
- If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered.
```jsx
-
+
```
- In the above example, we have two similar props for the Input component, but as you might have noticed `px={2}` is more specific than `p={0}` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px={2}` will be applied when the Input component is rendered.
+ In the above example, we have two similar props for the Input component, but as you might have noticed `px="2"` is more specific than `p="0"` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px="2"` will be applied when the Input component is rendered.
- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle.
Let's take an example of `Input` to understand better.
```jsx
-
+
// baseStyle for Input component
return {
@@ -27,12 +27,12 @@ title: Utility Props Specificity
}
```
- As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p={0}` in the props of an Input, it will override the the baseStyle and apply `p={0}` to that component. **Similar happens with other utility props.**
+ As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p="0"` in the props of an Input, it will override the the baseStyle and apply `p="0"` to that component. **Similar happens with other utility props.**
Now, here is an example to analyze both the cases together:
```jsx
-
+
// baseStyle for Input component
return {
@@ -47,7 +47,7 @@ In the above example, what do you think should be the padding of the rendered In
Let's see.
-We have `p={0}` which will override the value of padding coming from the baseStyle of Input component, then we have `px={3}` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`.
+We have `p="0"` which will override the value of padding coming from the baseStyle of Input component, then we have `px="3"` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`.
diff --git a/versioned_docs/version-3.2.0/buildingFooterTabs.md b/versioned_docs/version-3.2.0/buildingFooterTabs.md
index 4a4e7f597..a81d29f34 100644
--- a/versioned_docs/version-3.2.0/buildingFooterTabs.md
+++ b/versioned_docs/version-3.2.0/buildingFooterTabs.md
@@ -84,7 +84,7 @@ export default function App() {
>
-
+
Cart
@@ -107,7 +107,7 @@ export default function App() {
>
-
+
The active color mode is{' '}
{useColorModeValue('Light', 'Dark')}
diff --git a/versioned_docs/version-3.2.0/customizingTheme.md b/versioned_docs/version-3.2.0/customizingTheme.md
index 34e5bd136..87d58b620 100644
--- a/versioned_docs/version-3.2.0/customizingTheme.md
+++ b/versioned_docs/version-3.2.0/customizingTheme.md
@@ -101,7 +101,7 @@ function App() {
return (
-
+
);
}
diff --git a/versioned_docs/version-3.2.0/design-tokens.md b/versioned_docs/version-3.2.0/design-tokens.md
index 8198af8e3..a919f0a01 100644
--- a/versioned_docs/version-3.2.0/design-tokens.md
+++ b/versioned_docs/version-3.2.0/design-tokens.md
@@ -55,7 +55,7 @@ export const spacing = {
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
diff --git a/versioned_docs/version-3.2.0/install-expo.mdx b/versioned_docs/version-3.2.0/install-expo.mdx
index 9d29951b2..6f80a3508 100644
--- a/versioned_docs/version-3.2.0/install-expo.mdx
+++ b/versioned_docs/version-3.2.0/install-expo.mdx
@@ -9,6 +9,7 @@ import { TileLink } from '../../src/components';
Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration.
+
+
@@ -106,9 +108,13 @@ export default function App() {
}
```
+
+
+
+
diff --git a/versioned_docs/version-3.2.0/install-next.mdx b/versioned_docs/version-3.2.0/install-next.mdx
index dc9dbca16..40a4eee9e 100644
--- a/versioned_docs/version-3.2.0/install-next.mdx
+++ b/versioned_docs/version-3.2.0/install-next.mdx
@@ -52,6 +52,7 @@ Yey! you are all set, start editing src/pages/index.tsx now.
+
Choose your preferred setting and start your development swiftly 🚀
diff --git a/versioned_docs/version-3.2.0/install-rn.mdx b/versioned_docs/version-3.2.0/install-rn.mdx
index 8ed3a885d..b03d00461 100644
--- a/versioned_docs/version-3.2.0/install-rn.mdx
+++ b/versioned_docs/version-3.2.0/install-rn.mdx
@@ -7,6 +7,7 @@ import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { TileLink } from '../../src/components';
+
+
+
+
### 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.
@@ -40,8 +44,10 @@ npx react-native init MyApp --template react-native-template-native-base-typescr
Yey! you are all set, start editing App.js/App.tsx now.
+
+
### Create a new project if not exist
@@ -106,6 +112,7 @@ export default function App() {
+
diff --git a/versioned_docs/version-3.2.0/interaction-styles.mdx b/versioned_docs/version-3.2.0/interaction-styles.mdx
index 8c07bf6a5..142e1d206 100644
--- a/versioned_docs/version-3.2.0/interaction-styles.mdx
+++ b/versioned_docs/version-3.2.0/interaction-styles.mdx
@@ -20,12 +20,12 @@ NativeBase provides a declarative way to add interaction or platform specific pr
Using `_hover` pseudo prop, we can customize the style of Pressable component on hover.
-
+
@@ -40,8 +40,8 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on
@@ -56,12 +56,12 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on
Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed.
-
+
@@ -76,9 +76,9 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component
@@ -92,7 +92,7 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component
Using `_focus` pseudo prop, we can customize the style of Pressable component on focus.
-
+
@@ -117,8 +117,8 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on
_focus={{ bg: 'primary.700', borderColor: 'primary.400', borderWidth: '2px' }}
bg="primary.600"
rounded="sm"
- py={2}
- px={3}
+ py="2"
+ px="3"
alignSelf="center"
>
@@ -132,14 +132,14 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on
Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms.
-
-
+
+
@@ -148,13 +148,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
Web
-
+
@@ -163,13 +163,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
Android
-
+
@@ -183,12 +183,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
```jsx title="Platform specific example"
-
+
@@ -197,12 +197,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
Web
-
+
@@ -211,12 +211,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
Android
-
+
diff --git a/versioned_docs/version-3.2.0/list.md b/versioned_docs/version-3.2.0/list.md
deleted file mode 100644
index 84f8d3dfc..000000000
--- a/versioned_docs/version-3.2.0/list.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-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.2.0/migration/Card.md b/versioned_docs/version-3.2.0/migration/Card.md
index c9acc1d07..14a383239 100644
--- a/versioned_docs/version-3.2.0/migration/Card.md
+++ b/versioned_docs/version-3.2.0/migration/Card.md
@@ -68,17 +68,17 @@ 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.2.0/migration/Icon.md b/versioned_docs/version-3.2.0/migration/Icon.md
index cdaba70a0..e51c49acb 100644
--- a/versioned_docs/version-3.2.0/migration/Icon.md
+++ b/versioned_docs/version-3.2.0/migration/Icon.md
@@ -65,7 +65,7 @@ export default function () {
diff --git a/versioned_docs/version-3.2.0/migration/Radio Button.md b/versioned_docs/version-3.2.0/migration/Radio Button.md
index a2ccedd08..b05b412b7 100644
--- a/versioned_docs/version-3.2.0/migration/Radio Button.md
+++ b/versioned_docs/version-3.2.0/migration/Radio Button.md
@@ -80,10 +80,10 @@ export default function () {
setValue(nextValue);
}}
>
-
+
One
-
+
Two
diff --git a/versioned_docs/version-3.2.0/migration/Spinner.md b/versioned_docs/version-3.2.0/migration/Spinner.md
index a4f8f160d..9a6fbc31a 100644
--- a/versioned_docs/version-3.2.0/migration/Spinner.md
+++ b/versioned_docs/version-3.2.0/migration/Spinner.md
@@ -40,7 +40,7 @@ values={[
-
+
```
diff --git a/versioned_docs/version-3.2.0/migration/Thumbnail.md b/versioned_docs/version-3.2.0/migration/Thumbnail.md
index 2f8e46907..d199a39ad 100644
--- a/versioned_docs/version-3.2.0/migration/Thumbnail.md
+++ b/versioned_docs/version-3.2.0/migration/Thumbnail.md
@@ -55,11 +55,11 @@ export default function () {
const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png';
return (
-
+ Square Thumbnail
-
-
-
+
+
+ Circular Thumbnail
diff --git a/versioned_docs/version-3.2.0/more-props.md b/versioned_docs/version-3.2.0/more-props.md
new file mode 100644
index 000000000..935c792be
--- /dev/null
+++ b/versioned_docs/version-3.2.0/more-props.md
@@ -0,0 +1,13 @@
+---
+id: more-props
+title: More props
+---
+
+### ILinearGradientProps
+
+| Name | Type | Description | Default |
+| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
+| colors | `Array` | An array of colors that represent stops in the gradient. | - |
+| start | `Array` | This means that the gradient will start from first value from the left and second value from the top. Array can contain numbers ranging from 0 to 1. | |
+| end | `Array` | This means that the gradient will end at first value from the left and at second value from the bottom. Array can contain numbers ranging from 0 to 1. | |
+| location | `Array ` | Each number indicates a color-stop location where each respective color should be located. Array can contain numbers ranging from 0 to 1. | |
diff --git a/versioned_docs/version-3.2.0/nativebase-factory.md b/versioned_docs/version-3.2.0/nativebase-factory.md
index 242f0bdae..fafcf1a6f 100644
--- a/versioned_docs/version-3.2.0/nativebase-factory.md
+++ b/versioned_docs/version-3.2.0/nativebase-factory.md
@@ -19,7 +19,7 @@ import { View } from 'react-native';
function FactoryViewExample () {
const FactoryView = Factory(View);
return (
-
+
);
}
@@ -49,7 +49,7 @@ function FactoryViewExample () {
borderRadius: 'md',
},
});
- return ;
+ return ;
}
// Example template which wraps component with NativeBaseProvider
@@ -80,7 +80,7 @@ function FactoryViewModeExample () {
};
},
});
- return ;
+ return ;
}
// Example template which wraps component with NativeBaseProvider
@@ -112,7 +112,7 @@ function FactoryViewRefExample() {
const NBInput = Factory(TextInput);
const inputRef = React.useRef(null);
return (
-
+
- setOverlay(
-
- )
- }>
- 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.2.0/responsive.md b/versioned_docs/version-3.2.0/responsive.md
index aa66b499a..6e3ddd039 100644
--- a/versioned_docs/version-3.2.0/responsive.md
+++ b/versioned_docs/version-3.2.0/responsive.md
@@ -102,7 +102,7 @@ function Example() {
rounded="lg"
overflow="hidden"
width={['72', '72', '4/6']}
- shadow={1}
+ shadow="1"
_light={{ backgroundColor: 'coolGray.50' }}
_dark={{ backgroundColor: 'gray.700' }}>
@@ -119,14 +119,14 @@ function Example() {
bg="violet.500"
_text={{ color: 'white', fontWeight: '700', fontSize: 'xs' }}
position="absolute"
- bottom={0}
+ bottom="0"
px="3"
py="1.5">
PHOTOS
-
+
The Garden City
@@ -143,7 +143,7 @@ function Example() {
Bengaluru (also called Bangalore) is the center of India's high-tech
industry. The city is also known for its parks and nightlife.
-
+
+ NativeBase
);
@@ -53,7 +53,7 @@ import { NativeBaseProvider, Box, Text } from 'native-base';
function MyComponent() {
return (
// This would look same on all devices
-
+ NativeBase
);
@@ -81,7 +81,7 @@ function MyComponent() {
const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 });
return (
// This would look same on all devices
-
+ NativeBase
);
diff --git a/versioned_docs/version-3.2.0/select.md b/versioned_docs/version-3.2.0/select.md
index cfecd7ead..9711f99a3 100644
--- a/versioned_docs/version-3.2.0/select.md
+++ b/versioned_docs/version-3.2.0/select.md
@@ -76,7 +76,7 @@ import { Select } from 'native-base';
| label | string | The label which will be displayed. | - |
| value | string | The value to be used for the item. This is the value that will be returned on form submission. | - |
| isDisabled | boolean | If true, the item will be disabled (only for `styled` variant). | - |
-| \_label | [`TextProps`](text.md#props) | TextProps to be applied to label (only for `styled` variant). | - | -->
+| \_label | [`TextProps`](text.md#props) | TextProps to be applied to label (only for `styled` variant). | - | --> |
## Styling
diff --git a/versioned_docs/version-3.2.0/slider.md b/versioned_docs/version-3.2.0/slider.md
index 8c2d7365d..e82c18e92 100644
--- a/versioned_docs/version-3.2.0/slider.md
+++ b/versioned_docs/version-3.2.0/slider.md
@@ -79,12 +79,12 @@ Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-
### Keyboard Interactions
-| Name | Description |
-| ------------------|-------------|
-| ArrowRight | Increments/decrements by the step value depending on orientation.|
-| ArrowLeft | Increments/decrements by the step value depending on orientation.
-| ArrowUp | Increases the value by the step amount.
-| ArrowDown | Decreases the value by the step amount.
+| Name | Description |
+| ---------- | ----------------------------------------------------------------- |
+| ArrowRight | Increments/decrements by the step value depending on orientation. |
+| ArrowLeft | Increments/decrements by the step value depending on orientation. |
+| ArrowUp | Increases the value by the step amount. |
+| ArrowDown | Decreases the value by the step amount. |
diff --git a/versioned_docs/version-3.2.0/swipableList.md b/versioned_docs/version-3.2.0/swipableList.md
deleted file mode 100644
index e19b2bd22..000000000
--- a/versioned_docs/version-3.2.0/swipableList.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-id: swipable-list
-title: Swipable List
----
-
-## Coming Soon
diff --git a/versioned_docs/version-3.2.0/textField.md b/versioned_docs/version-3.2.0/textField.md
deleted file mode 100644
index 0c98d5b26..000000000
--- a/versioned_docs/version-3.2.0/textField.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-id: textField
-title: TextField
----
-
-The `TextField` component is a component that is used to get user input in a text field.
-
-## Implements
-
-- [`TextProps`](input.md)
-- [`VStack`](VStack.md)
-
-## Import
-
-```jsx
-import { TextField } from 'native-base';
-```
-
-## Examples
-
-### Basic
-
-```SnackPlayer name=TextField%20Basic
-import React from 'react';
-import { TextField, NativeBaseProvider, Center } from 'native-base';
-
-function TextFieldComponent () {
- return ;
-};
-export default function () {
- return (
-
-
-
- );
-}
-```
-
-### Slide wrapped inside parent
-
-```SnackPlayer name=Transition%20Slide With Parent
-import React from 'react';
-import { Slide, Button, Box, Center, Heading, NativeBaseProvider } from 'native-base';
-function SlideExample () {
- const [isOpen, setIsOpen] = React.useState(false);
-
- return (
-
-
- This is an example to show how slider can be used.
-
-
-
- The Force is strong with this one. I have you now. Look, I ain't in this
- for your revolution, and I'm not in it for you, Princess. I expect to be
- well paid. I'm in it for the money. What!? Hey, Luke! May the Force be
- with you. Remember, a Jedi can feel the Force flowing through him. All
- right. Well, take care of yourself, Han. I guess that's what you're best
- at, ain't it? In my experience, there is no such thing as luck. Kid,
- I've flown from one side of this galaxy to the other. I've seen a lot of
- strange stuff, but I've never seen anything to make me believe there's
- one all-powerful Force controlling everything. There's no mystical
- energy field that controls my destiny. It's all a lot of simple tricks
- and nonsense.
-
-
- );
-}
-```
-
-### Slide Composition
-
-```SnackPlayer name=Transition%20Slide Composition
-import React from 'react';
-import { Slide, Button, Box, Center, Heading, NativeBaseProvider } from 'native-base';
-function SlideExample () {
- const [isOpen, setIsOpen] = React.useState(false);
-
- return (
- <>
-
-
- This is an example to show how slider can be used.
-
-
-
- The Force is strong with this one. I have you now. Look, I ain't in
- this for your revolution, and I'm not in it for you, Princess. I
- expect to be well paid. I'm in it for the money. What!? Hey, Luke! May
- the Force be with you. Remember, a Jedi can feel the Force flowing
- through him. All right. Well, take care of yourself, Han. I guess
- that's what you're best at, ain't it? In my experience, there is no
- such thing as luck. Kid, I've flown from one side of this galaxy to
- the other. I've seen a lot of strange stuff, but I've never seen
- anything to make me believe there's one all-powerful Force controlling
- everything. There's no mystical energy field that controls my destiny.
- It's all a lot of simple tricks and nonsense.
-
-
- );
-}
-```
-
-## Props
-
-### Fade
-
-| Name | Type | Description | Default |
-| -------- | ------- | ------------------------------------------------------ | ------- |
-| in | boolean | Show the component; triggers the enter or exit states. | - |
-| duration | number | Duration of animation in mili second. | 500 |
-
-### Scale Fade
-
-| Name | Type | Description | Default |
-| ------------ | ------- | ------------------------------------------------------ | ------- |
-| in | boolean | Show the component; triggers the enter or exit states. | - |
-| duration | number | Duration of animation in mili second. | 500 |
-| initialScale | number | The initial scale to animate from. | 0.9 |
-
-### Slide
-
-| Name | Type | Description | Default |
-| --------- | --------------- | ------------------------------------------------------ | -------- |
-| in | boolean | Show the component; triggers the enter or exit states. | - |
-| duration | number | Duration of animation in mili second. | 500 |
-| placement | `top` ,`bottom` | The direction to slide drawer from. | `bottom` |
-
-### SlideFade
-
-| Name | Type | Description | Default |
-| -------- | ------- | ------------------------------------------------------ | ------- |
-| in | boolean | Show the component; triggers the enter or exit states. | - |
-| duration | number | Duration of animation in mili second. | 500 |
-| offsetX | number | The initial offset to slide from. | 10 |
-| offsetY | number | The initial offset to slide from. | 10 |
diff --git a/versioned_docs/version-3.2.0/useAccessibleColors.md b/versioned_docs/version-3.2.0/useAccessibleColors.md
index 1fa0dfd75..812db8a6d 100644
--- a/versioned_docs/version-3.2.0/useAccessibleColors.md
+++ b/versioned_docs/version-3.2.0/useAccessibleColors.md
@@ -26,7 +26,7 @@ const ButtonTemplate = ({ shade }: any) => {
key={`yellow.${shade}`}
bg={`yellow.${shade}`}
_text={{ color: colorContrast }}
- mb={1}
+ mb="1"
>
Save Changes
diff --git a/versioned_docs/version-3.2.0/useContrastText.md b/versioned_docs/version-3.2.0/useContrastText.md
index 4497c3b17..462bbe3dc 100644
--- a/versioned_docs/version-3.2.0/useContrastText.md
+++ b/versioned_docs/version-3.2.0/useContrastText.md
@@ -65,7 +65,7 @@ const ButtonTemplate = ({ shade }: any) => {
key={`yellow.${shade}`}
bg={`yellow.${shade}`}
_text={{ color: colorContrast }}
- mb={1}
+ mb="1"
>
Save Changes
diff --git a/versioned_docs/version-3.2.0/usePopOver.md b/versioned_docs/version-3.2.0/usePopOver.md
deleted file mode 100644
index 35bdb98a6..000000000
--- a/versioned_docs/version-3.2.0/usePopOver.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-id: use-popOver
-title: usePopover
----
-
-`usePopover` is a custom hook which helps in mounting any children component in a popover at a position relative to the parent.
-
-## Import
-
-```jsx
-import { usePopover } from 'native-base';
-```
-
-## Example
-
-```SnackPlayer name=usePopover%20Usage
-import React from "react";
-import { Button, usePopover, Box, NativeBaseProvider, Center } from "native-base";
-
-function UsePopoverExample() {
- const { setPopover } = usePopover();
- let buttonRef = React.useRef(null);
- return (
-
- );
-}
-export default function () {
- return (
-
-
-
-
-
- );
-}
-```
-
-## Return value
-
-The `usePopover` hook returns an object with the following fields:
-
-`closePopover` : ( function ) Callback function to close the popover.
-
-`setPopover`: ( **function** ) Callback function to set the children of the popover.
-
-`parentComponentConfig`: ( Object ) Object that contains the configurations passed from parent prop to be available to children in popover
-
-## Configurations for setPopover
-
-`triggerRef`: ref of the parent element of the popover
-
-`animationDuration`: Time in ms for the popover to open and close
-
-`placeOverTriggerElement`: (boolean) Whether to place the popover element over parent of not
-
-`onClose`: (function) Callback for closing the popover
-
-`parentComponentConfig`: (object) The config which can be passed from parent to children
-
-`isKeyboardDismissable`: (boolean) Specifies whether popover can be closed using Escape key. Defaults to true
diff --git a/versioned_docs/version-3.2.0/utility-first.mdx b/versioned_docs/version-3.2.0/utility-first.mdx
index 9de7d2ddb..4b570c146 100644
--- a/versioned_docs/version-3.2.0/utility-first.mdx
+++ b/versioned_docs/version-3.2.0/utility-first.mdx
@@ -51,16 +51,16 @@ export default function App() {
const styles = StyleSheet.create({
container: {
backgroundColor: '#0891b2',
- paddingVertical: 16,
- paddingHorizontal: 12,
- borderRadius: 5,
+ paddingVertical: '16',
+ paddingHorizontal: '12',
+ borderRadius: '5',
alignSelf: 'center',
- width: 375,
+ width: '375',
maxWidth: '100%',
},
timings: {
color: '#fff',
- fontSize: 14,
+ fontSize: '14',
},
metaContainer: {
justifyContent: 'space-between',
@@ -70,27 +70,27 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
},
avatar: {
- height: 100,
- width: 100,
- borderRadius: 100,
+ height: '100',
+ width: '100',
+ borderRadius: '100',
},
description: {
color: 'white',
- marginTop: 5,
- fontSize: 20,
+ marginTop: '5',
+ fontSize: '20',
},
button: {
backgroundColor: '#22d3ee',
alignSelf: 'flex-start',
- paddingHorizontal: 10,
- paddingVertical: 5,
- borderRadius: 3,
+ paddingHorizontal: '10',
+ paddingVertical: '5',
+ borderRadius: '3',
},
buttonText: {
fontWeight: 'bold',
color: 'white',
textTransform: 'uppercase',
- fontSize: 14,
+ fontSize: '14',
},
});
```
@@ -126,8 +126,8 @@ export function UtilityFirstExample() {
-
+
Today @ 9PM
@@ -147,12 +147,12 @@ export function UtilityFirstExample() {
rounded="sm"
bg="primary.400"
alignSelf="flex-start"
- py={2}
- px={3}
+ py="4"
+ px="3"
>
@@ -165,9 +165,9 @@ export function UtilityFirstExample() {
uri: 'https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg',
}}
alt="Aang flying and surrounded by clouds"
- height={100}
+ height="100"
rounded="full"
- width={100}
+ width="100"
/>
diff --git a/versioned_docs/version-3.2.0/utilityProps.md b/versioned_docs/version-3.2.0/utilityProps.md
index 8cf57537b..f0ede0148 100644
--- a/versioned_docs/version-3.2.0/utilityProps.md
+++ b/versioned_docs/version-3.2.0/utilityProps.md
@@ -22,12 +22,12 @@ const Box = (props) => {
function Component() {
return (
<>
- { /* m={2} refers to the value of `theme.space[2]` */ }
-
+ { /* m="2" refers to the value of `theme.space[2]` */ }
+
{ /* You can also use custom values */ }
-
+
{ /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */ }
-
+
);
}
@@ -69,7 +69,7 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base';
const Box = (props) => {
- return ;
+ return ;
};
function Component() {
@@ -79,7 +79,7 @@ function Component() {
{/* picks up a nested color value using dot notation */}
{/* => `theme.colors.lightBlue[300]` */}
-
+
{/* using theme colors to set text color */}
{' '}
@@ -129,38 +129,38 @@ import React from "react"
import { HStack, Stack, Center, NativeBaseProvider } from "native-base"
export function Example() {
return (
-
-
+
+
Box 1
Box 2
Box 3
@@ -188,7 +188,7 @@ import React from 'react';
import { Text as NBText, NativeBaseProvider, Center } from 'native-base';
const Text = (props) => {
- return
+ return
}
function Component() {
@@ -239,24 +239,24 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
return (
<>
{ /* verbose */ }
-
+
{ /* shorthand */ }
{ /* use boxSizing */ }
-
+
{ /* width `50%` */ }
-
- { /* width `256px` h={8} */ }
-
- { /* width `'40px'` */ }
-
+
+ { /* width `256px` h="8" */ }
+
+ { /* width `"40px"` */ }
+
);
}
@@ -296,7 +296,7 @@ import React from 'react';
import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
@@ -353,15 +353,15 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return ;
+ return ;
};
function Component() {
return (
<>
-
-
-
+
+
+
);
}
@@ -410,7 +410,7 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
@@ -418,12 +418,12 @@ function Component() {
<>
{ /* picks up a nested radius value using dot notation */ }
{ /* => `theme.radius.md` */ }
-
-
+
+
{ /* partial border radius */ }
-
+
{ /* absolute value prop */ }
-
+
);
}
@@ -460,15 +460,15 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
return (
<>
-
-
-
+
+
+
);
}
@@ -502,18 +502,18 @@ import React from 'react';
import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
const Box = (props) => {
- return
+ return
}
function Component() {
return (
<>
{ /* => `theme.shadows.md` */ }
-
-
-
-
-
+
+
+
+
+
);
}
diff --git a/versioned_docs/version-3.2.0/utilityPropsSpecificity.md b/versioned_docs/version-3.2.0/utilityPropsSpecificity.md
index 70e42236a..9c7e1a053 100644
--- a/versioned_docs/version-3.2.0/utilityPropsSpecificity.md
+++ b/versioned_docs/version-3.2.0/utilityPropsSpecificity.md
@@ -6,17 +6,17 @@ title: Utility Props Specificity
- If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered.
```jsx
-
+
```
- In the above example, we have two similar props for the Input component, but as you might have noticed `px={2}` is more specific than `p={0}` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px={2}` will be applied when the Input component is rendered.
+ In the above example, we have two similar props for the Input component, but as you might have noticed `px="2"` is more specific than `p="0"` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px="2"` will be applied when the Input component is rendered.
- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle.
Let's take an example of `Input` to understand better.
```jsx
-
+
// baseStyle for Input component
return {
@@ -27,12 +27,12 @@ title: Utility Props Specificity
}
```
- As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p={0}` in the props of an Input, it will override the the baseStyle and apply `p={0}` to that component. **Similar happens with other utility props.**
+ As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p="0"` in the props of an Input, it will override the the baseStyle and apply `p="0"` to that component. **Similar happens with other utility props.**
Now, here is an example to analyze both the cases together:
```jsx
-
+
// baseStyle for Input component
return {
@@ -47,7 +47,7 @@ In the above example, what do you think should be the padding of the rendered In
Let's see.
-We have `p={0}` which will override the value of padding coming from the baseStyle of Input component, then we have `px={3}` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`.
+We have `p="0"` which will override the value of padding coming from the baseStyle of Input component, then we have `px="3"` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`.
diff --git a/versioned_sidebars/version-3.2.0-sidebars.json b/versioned_sidebars/version-3.2.0-sidebars.json
index 696584afe..03eea6f08 100644
--- a/versioned_sidebars/version-3.2.0-sidebars.json
+++ b/versioned_sidebars/version-3.2.0-sidebars.json
@@ -652,6 +652,10 @@
}
]
},
+ {
+ "type": "doc",
+ "id": "version-3.2.0/more-props"
+ },
{
"type": "doc",
"id": "version-3.2.0/install-expo"
