diff --git a/package.json b/package.json index 9de195205..2876ac3eb 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "clsx": "^1.1.1", "dedent": "^0.7.0", "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader", - "native-base": "3.2.1", + "native-base": "3.2.2", "object.fromentries": "^2.0.3", "patch-package": "^6.4.7", "postcss": "^7.0.34", diff --git a/versioned_docs/version-3.2.2/FAB.md b/versioned_docs/version-3.2.2/FAB.md new file mode 100644 index 000000000..67e233e73 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Fab,Basic.tsx + +``` + +### Placement + +```ComponentSnackPlayer path=components,composites,Fab,Placement.tsx + +``` + +### Custom Position + +```ComponentSnackPlayer path=components,composites,Fab,CustomPosition.tsx + +``` + +## Styling + + + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.2.2/VStack.md b/versioned_docs/version-3.2.2/VStack.md new file mode 100644 index 000000000..55de9baec --- /dev/null +++ b/versioned_docs/version-3.2.2/VStack.md @@ -0,0 +1,24 @@ +--- +id: v-stack +title: VStack / Column +--- + +`VStack` aligns items vertically.`Column` is also an alias for `VStack`. + +## Import + +```jsx +import { VStack } from 'native-base'; +``` + +## Usage + +```ComponentSnackPlayer path=components,primitives,VStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,VStack.tsx + +``` diff --git a/versioned_docs/version-3.2.2/ZStack.md b/versioned_docs/version-3.2.2/ZStack.md new file mode 100644 index 000000000..6ca6e145d --- /dev/null +++ b/versioned_docs/version-3.2.2/ZStack.md @@ -0,0 +1,28 @@ +--- +id: z-stack +title: ZStack +--- + +`ZStack` aligns items absolutely in the z-axis. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,ZStack,example.tsx + +``` + +### Items Centered + +You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children. + +```ComponentSnackPlayer path=components,primitives,ZStack,CenterStack.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,ZStack,index.tsx + +``` diff --git a/versioned_docs/version-3.2.2/accessibility.md b/versioned_docs/version-3.2.2/accessibility.md new file mode 100644 index 000000000..3ccb492bb --- /dev/null +++ b/versioned_docs/version-3.2.2/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://react-native-aria.geekyants.com/) 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.2.2/actionSheet.md b/versioned_docs/version-3.2.2/actionSheet.md new file mode 100644 index 000000000..a0d081076 --- /dev/null +++ b/versioned_docs/version-3.2.2/actionSheet.md @@ -0,0 +1,78 @@ +--- +id: action-sheet +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=components,composites,Actionsheet,Usage.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=components,composites,Actionsheet,Composition.tsx + +``` + +### DisableOverlay + +```ComponentSnackPlayer path=components,composites,Actionsheet,DisableOverlay.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=components,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.2.2/alert.md b/versioned_docs/version-3.2.2/alert.md new file mode 100644 index 000000000..885bff9ef --- /dev/null +++ b/versioned_docs/version-3.2.2/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. + + + +```jsx +import { Alert } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,Alert,usage.tsx + +``` + +### Status + +```ComponentSnackPlayer path=components,composites,Alert,status.tsx + +``` + +### Variant + +```ComponentSnackPlayer path=components,composites,Alert,variant.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=components,composites,Alert,composition.tsx + +``` + +### Action + +```ComponentSnackPlayer path=components,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.2.2/alertDialog.md b/versioned_docs/version-3.2.2/alertDialog.md new file mode 100644 index 000000000..c66f79502 --- /dev/null +++ b/versioned_docs/version-3.2.2/alertDialog.md @@ -0,0 +1,55 @@ +--- +id: alert-dialog +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 + +```ComponentSnackPlayer path=components,composites,AlertDialog,Basic.tsx + +``` + +## 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.2.2/appDrawer.md b/versioned_docs/version-3.2.2/appDrawer.md new file mode 100644 index 000000000..4001d9dda --- /dev/null +++ b/versioned_docs/version-3.2.2/appDrawer.md @@ -0,0 +1,73 @@ +--- +id: app-drawer +title: App drawer +--- + +Creating an app drawer like layout is very common using FlatList. Here is an example to illustrate it. + +```SnackPlayer name=AppDrawer +import React from 'react'; +import { + IconButton, + FlatList, + Icon, + NativeBaseProvider, + Box, +} from 'native-base'; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppDrawer() { + const icons = [ + { name: 'bolt', bg: 'amber.600' }, + { name: 'build', bg: 'emerald.600' }, + { name: 'cloud', bg: 'blue.600' }, + { name: 'delivery-dining', bg: 'orange.600' }, + { name: 'favorite', bg: 'rose.600' }, + { name: 'music-note', bg: 'violet.600' }, + { name: 'invert-colors-on', bg: 'lime.600' }, + { name: 'navigation', bg: 'indigo.600' }, + { name: 'settings', bg: 'pink.600' }, + { name: 'sports-esports', bg: 'coolGray.600' }, + { name: 'shield', bg: 'darkBlue.600' }, + { name: 'photo-camera', bg: 'fuchsia.600' }, + { name: 'network-wifi', bg: 'amber.500' }, + { name: 'nightlight-round', bg: 'violet.800' }, + { name: 'flight', bg: 'blue.800' }, + { name: 'extension', bg: 'indigo.600' }, + { name: 'duo', bg: 'orange.600' }, + { name: 'album', bg: 'rose.600' }, + { name: 'access-alarm', bg: 'emerald.600' }, + { name: 'forum', bg: 'indigo.600' }, + ]; + + return ( + { + return ( + + } + /> + ) + }} /> + ); +} + +export default function () { + return ( + + + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.2/avatar.md b/versioned_docs/version-3.2.2/avatar.md new file mode 100644 index 000000000..9055bbf42 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Avatar,usage.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,composites,Avatar,size.tsx + +``` + +### Fallbacks + +```ComponentSnackPlayer path=components,composites,Avatar,Fallback.tsx + +``` + +### Avatar Badge + +```ComponentSnackPlayer path=components,composites,Avatar,AvatarBadge.tsx + +``` + +### Avatar Group + +```ComponentSnackPlayer path=components,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.2.2/badge.md b/versioned_docs/version-3.2.2/badge.md new file mode 100644 index 000000000..33a08a72d --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Badge,usage.tsx + +``` + +### Color Scheme + +```ComponentSnackPlayer path=components,composites,Badge,color.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=components,composites,Badge,variants.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=components,composites,Badge,composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Badge,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/box.md b/versioned_docs/version-3.2.2/box.md new file mode 100644 index 000000000..46b5259f7 --- /dev/null +++ b/versioned_docs/version-3.2.2/box.md @@ -0,0 +1,139 @@ +--- +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=components,primitives,Box,basic.tsx + +``` + +
+ +### Composition + +```ComponentSnackPlayer path=components,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=components,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.2.2/breakpoints.md b/versioned_docs/version-3.2.2/breakpoints.md new file mode 100644 index 000000000..d30fb4cf1 --- /dev/null +++ b/versioned_docs/version-3.2.2/breakpoints.md @@ -0,0 +1,24 @@ +--- +id: breakpoints +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. + +```ComponentSnackPlayer path=hooks,useBreakpointValue,usage.tsx + +``` diff --git a/versioned_docs/version-3.2.2/buildingAppBar.md b/versioned_docs/version-3.2.2/buildingAppBar.md new file mode 100644 index 000000000..463c93df3 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingAppBar.md @@ -0,0 +1,48 @@ +--- +id: building-app-bar +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.2.2/buildingDrawerNavigation.md b/versioned_docs/version-3.2.2/buildingDrawerNavigation.md new file mode 100644 index 000000000..af34bc3d7 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingDrawerNavigation.md @@ -0,0 +1,180 @@ +--- +id: building-drawer-navigation +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/drawer,@react-navigation/native@6.0.6,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.8.0,react-native-reanimated@~2.2.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 ( +
+ This is {props.route.name} page. +
+ ); +} + +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.2.2/buildingFooterTabs.md b/versioned_docs/version-3.2.2/buildingFooterTabs.md new file mode 100644 index 000000000..a81d29f34 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingFooterTabs.md @@ -0,0 +1,131 @@ +--- +id: building-footer-tabs +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="sm" + /> + + Home + +
+ + setSelected(1)} + > +
+ } + color="white" + size="sm" + /> + + Search + +
+ + setSelected(2)} + > +
+ + } + color="white" + size="sm" + /> + + Cart + +
+ + setSelected(3)} + > +
+ + } + color="white" + size="sm" + /> + + Account + +
+ + + + + ); +} + + +``` diff --git a/versioned_docs/version-3.2.2/buildingSearchBar.md b/versioned_docs/version-3.2.2/buildingSearchBar.md new file mode 100644 index 000000000..ee8651d84 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingSearchBar.md @@ -0,0 +1,117 @@ +--- +id: building-search-bar +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, + Divider, + Heading, +} 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.2.2/buildingSwipeList.md b/versioned_docs/version-3.2.2/buildingSwipeList.md new file mode 100644 index 000000000..4e44901a3 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingSwipeList.md @@ -0,0 +1,195 @@ +--- +id: building-swipe-list +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, + VStack, + Spacer, +} from 'native-base'; +import { SwipeListView } from 'react-native-swipe-list-view'; +import { MaterialIcons, Ionicons, Entypo } from '@expo/vector-icons'; + +export default function App() { + const [mode, setMode] = useState('Basic'); + + return ( + + + + Inbox + + + + + ); +} + +function Basic() { + const data = [ + { + id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', + fullName: 'Afreen Khan', + timeStamp: '12:47 PM', + recentText: 'Good Day!', + avatarUrl: + 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', + }, + { + id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', + fullName: 'Sujita Mathur', + timeStamp: '11:11 PM', + recentText: 'Cheer up, there!', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU', + }, + { + id: '58694a0f-3da1-471f-bd96-145571e29d72', + fullName: 'Anci Barroco', + timeStamp: '6:22 PM', + recentText: 'Good Day!', + avatarUrl: 'https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg', + }, + { + id: '68694a0f-3da1-431f-bd56-142371e29d72', + fullName: 'Aniket Kumar', + timeStamp: '8:56 PM', + recentText: 'All the best', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU', + }, + { + id: '28694a0f-3da1-471f-bd96-142456e29d72', + fullName: 'Kiara', + timeStamp: '12:47 PM', + recentText: 'I will call today.', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU', + }, + ]; + + const [listData, setListData] = useState(data); + + 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')} bg="white"> + + + + + + {item.fullName} + + {item.recentText} + + + + {item.timeStamp} + + + + + + ); + + const renderHiddenItem = (data, rowMap) => ( + + closeRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } + size="xs" + color="coolGray.800" + /> + + More + + + + deleteRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } color="white" size="xs" /> + + Delete + + + + + ); + + return ( + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.2/buildingTabView.md b/versioned_docs/version-3.2.2/buildingTabView.md new file mode 100644 index 000000000..e6ce91847 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingTabView.md @@ -0,0 +1,106 @@ +--- +id: building-tab-view +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, Center } from 'native-base'; +import Constants from 'expo-constants'; + +const FirstRoute = () =>
This is Tab 1
; + +const SecondRoute = () =>
This is Tab 2
; + +const ThirdRoute = () =>
This is Tab 3
; + +const FourthRoute = () =>
This is Tab 4
; + +const initialLayout = { width: Dimensions.get('window').width }; + +const renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute, + third: ThirdRoute, + fourth: FourthRoute, +}); + +export default function TabViewExample() { + const [index, setIndex] = React.useState(0); + const [routes] = React.useState([ + { key: 'first', title: 'Tab 1' }, + { key: 'second', title: 'Tab 2' }, + { key: 'third', title: 'Tab 3' }, + { key: 'fourth', title: 'Tab 4' }, + ]); + + 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 + ), + }); + const color = index === i ? '#1f2937' : '#a1a1aa'; + const borderColor = index === i ? 'cyan.500' : 'coolGray.200'; + + return ( + + { + console.log(i); + setIndex(i); + }}> + {route.title} + + + ); + })} + + ); + }; + + return ( + + + + ); +} + + + +``` diff --git a/versioned_docs/version-3.2.2/builldingCard.md b/versioned_docs/version-3.2.2/builldingCard.md new file mode 100644 index 000000000..c99468b41 --- /dev/null +++ b/versioned_docs/version-3.2.2/builldingCard.md @@ -0,0 +1,18 @@ +--- +id: building-card +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. + +```ComponentSnackPlayer path=components,primitives,Box,composition.tsx + +``` diff --git a/versioned_docs/version-3.2.2/button.mdx b/versioned_docs/version-3.2.2/button.mdx new file mode 100644 index 000000000..c878a713d --- /dev/null +++ b/versioned_docs/version-3.2.2/button.mdx @@ -0,0 +1,90 @@ +--- +id: button +title: Button +--- + +import { ComponentTheme } from '../../src/components'; + +The `Button` component is used to trigger an action or event. + +## Import + +```jsx +import { Button } from 'native-base'; +``` + +- **Button** : The button component with support for custom icons, spinners, etc. +- **Button.Group** : Used to group buttons whose actions are related, with an option to flush them together. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Button,basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Button,sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=components,primitives,Button,variants.tsx + +``` + +### Loading + +```ComponentSnackPlayer path=components,primitives,Button,loading.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=components,primitives,Button,icons.tsx + +``` + +### ButtonGroup + +When you use the ButtonGroup component, it allows you to: + +- Set some common properties such as size & colorSchemes of all buttons within it. +- Add spacing between the buttons. +- Flush the buttons together by removing the border radius of the its children as needed. + +```ComponentSnackPlayer path=components,primitives,ButtonGroup,basic.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=components,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.2.2/center.md b/versioned_docs/version-3.2.2/center.md new file mode 100644 index 000000000..032cac0ea --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Center,Basic.tsx + +``` + +### Icon frames + +Center can be used to nicely position icons in the center and add frames around them. + +```ComponentSnackPlayer path=components,composites,Center,WithIcons.tsx + +``` + +### Square and Circle + +Square and Circle automatically centers their children. + +```ComponentSnackPlayer path=components,composites,Center,SquareCircle.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Center,Center.tsx + +``` diff --git a/versioned_docs/version-3.2.2/changelog.md b/versioned_docs/version-3.2.2/changelog.md new file mode 100644 index 000000000..417a3a41e --- /dev/null +++ b/versioned_docs/version-3.2.2/changelog.md @@ -0,0 +1,32 @@ +--- +id: changelog +title: Changelog +--- + +## Features + +TypeScript enhancement for custom theme tokens and variants - https://github.com/GeekyAnts/NativeBase/pull/4173 + +## Fixes + +Overlay press not closing ActionSheet - https://github.com/GeekyAnts/NativeBase/pull/4112 + +Background prop - https://github.com/GeekyAnts/NativeBase/pull/4115 + +Radio error message when not in Group - https://github.com/GeekyAnts/NativeBase/pull/4117 + +`theme[\_base.themePropertyMap[property]]` is not a function error - https://github.com/GeekyAnts/NativeBase/pull/4118 + +Button loading style not working - https://github.com/GeekyAnts/NativeBase/pull/4128 + +Select component height prop not working - https://github.com/GeekyAnts/NativeBase/pull/4129 + +Spinner size prop typings - https://github.com/GeekyAnts/NativeBase/pull/4141 + +Replace Clipboard with @react-native-clipboard/clipboard - https://github.com/GeekyAnts/NativeBase/pull/4148 + +Typing fixes on Stack and Modal - https://github.com/GeekyAnts/NativeBase/pull/4161 + +Select items appear behind keyboard - https://github.com/GeekyAnts/NativeBase/pull/4163 + +For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.2.1). diff --git a/versioned_docs/version-3.2.2/checkBox.md b/versioned_docs/version-3.2.2/checkBox.md new file mode 100644 index 000000000..e58984c1a --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Checkbox,basic.tsx + +``` + +### Controlled + +```ComponentSnackPlayer path=components,primitives,Checkbox,controlledCheckbox.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=components,primitives,Checkbox,uncontrolledCheckbox.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=components,primitives,Checkbox,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=components,primitives,Checkbox,invalid.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=components,primitives,Checkbox,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=components,primitives,Checkbox,customIcon.tsx + +``` + +### Size + +```ComponentSnackPlayer path=components,primitives,Checkbox,size.tsx + +``` + +### Checkbox Group + +```ComponentSnackPlayer path=components,primitives,Checkbox,checkboxGroup.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=components,primitives,Checkbox,FormControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=components,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.2.2/colorMode.md b/versioned_docs/version-3.2.2/colorMode.md new file mode 100644 index 000000000..a06ef175e --- /dev/null +++ b/versioned_docs/version-3.2.2/colorMode.md @@ -0,0 +1,128 @@ +--- +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. + +```ComponentSnackPlayer path=hooks,useColorModeValue,Basic.tsx + +``` + +## \_light and \_dark Pseudo props + +All components accepts \_light and \_dark props which applies the passed props on dark and light mode. + +```SnackPlayer name=PseudoProps%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + Text, + NativeBaseProvider, +} from 'native-base'; + +function PseudoPropsUsage() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {colorMode} + + + +
+ ); +} + +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.2.2/container.md b/versioned_docs/version-3.2.2/container.md new file mode 100644 index 000000000..9884d0d18 --- /dev/null +++ b/versioned_docs/version-3.2.2/container.md @@ -0,0 +1,30 @@ +--- +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 + +```ComponentSnackPlayer path=components,composites,Container,usage.tsx + +``` + +## 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.2.2/customizingComponents.md b/versioned_docs/version-3.2.2/customizingComponents.md new file mode 100644 index 000000000..3042b4c08 --- /dev/null +++ b/versioned_docs/version-3.2.2/customizingComponents.md @@ -0,0 +1,122 @@ +--- +id: customizing-components +title: Customizing 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.1.0/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.1.0/src/theme/components/button.ts#L201). + +```jsx + + ); +} +``` + +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 \_light 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.2.2/default-theme.md b/versioned_docs/version-3.2.2/default-theme.md new file mode 100644 index 000000000..5bfd6a1cb --- /dev/null +++ b/versioned_docs/version-3.2.2/default-theme.md @@ -0,0 +1,231 @@ +--- +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. +You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. +Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) + +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: { + 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', + '2xl': '2em', + '3xl': '2.5em', + '4xl': '3em', + '5xl': '4em', + }, + fontWeights: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + extrablack: 950, + }, + fonts: { + heading: undefined, + body: undefined, + mono: undefined, + }, + fontSizes: { + '2xs': 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. + + + +## Opacity + +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 = { + 0: 0, + 5: 0.05, + 10: 0.1, + 20: 0.2, + 25: 0.25, + 30: 0.3, + 40: 0.4, + 50: 0.5, + 60: 0.6, + 70: 0.7, + 75: 0.75, + 80: 0.8, + 90: 0.9, + 95: 0.95, + 100: 1, +}; +``` + +## 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/tree/master/src/theme/base). diff --git a/versioned_docs/version-3.2.2/design-tokens.md b/versioned_docs/version-3.2.2/design-tokens.md new file mode 100644 index 000000000..fd63b015c --- /dev/null +++ b/versioned_docs/version-3.2.2/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.md)**. diff --git a/versioned_docs/version-3.2.2/divider.md b/versioned_docs/version-3.2.2/divider.md new file mode 100644 index 000000000..74c8d24ae --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,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=components,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=components,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.2.2/faq.md b/versioned_docs/version-3.2.2/faq.md new file mode 100644 index 000000000..0dd5a4173 --- /dev/null +++ b/versioned_docs/version-3.2.2/faq.md @@ -0,0 +1,8 @@ +--- +id: faq +title: FAQ's +--- + +#### 1. (Web) Modal not appearing on center or ScrollView not working properly + +This can happen if the root element styles are not set as [recommended here](https://necolas.github.io/react-native-web/docs/setup/#root-element). Feel free to [open an issue](https://github.com/GeekyAnts/NativeBase/issues) in case it doesn't work. diff --git a/versioned_docs/version-3.2.2/flatList.md b/versioned_docs/version-3.2.2/flatList.md new file mode 100644 index 000000000..d0cd17068 --- /dev/null +++ b/versioned_docs/version-3.2.2/flatList.md @@ -0,0 +1,18 @@ +--- +id: flat-list +title: FlatList +--- + +A component for rendering performant scrollable lists. + +## Example + +```ComponentSnackPlayer path=components,basic,FlatList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,FlatList,FlatList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/flex.md b/versioned_docs/version-3.2.2/flex.md new file mode 100644 index 000000000..5609e9b80 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Flex,basic.tsx + +``` + +### Using the Spacer + +You can pass Spacer to add Space between Flex items. + +```ComponentSnackPlayer path=components,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.2.2/form.md b/versioned_docs/version-3.2.2/form.md new file mode 100644 index 000000000..6a078af67 --- /dev/null +++ b/versioned_docs/version-3.2.2/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%20and%20Submit) +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`](reactHooksForms.md) as well. For more details checkout Community Integration section of the docs. diff --git a/versioned_docs/version-3.2.2/formControl.md b/versioned_docs/version-3.2.2/formControl.md new file mode 100644 index 000000000..baf50076f --- /dev/null +++ b/versioned_docs/version-3.2.2/formControl.md @@ -0,0 +1,52 @@ +--- +id: form-control +title: FormControl +--- + +import { ComponentTheme } from '../../src/components'; + +`FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,FormControl,Usage.tsx + +``` + +### Custom Style + +```ComponentSnackPlayer path=components,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.2.2/getting-started.mdx b/versioned_docs/version-3.2.2/getting-started.mdx new file mode 100644 index 000000000..27701b6ee --- /dev/null +++ b/versioned_docs/version-3.2.2/getting-started.mdx @@ -0,0 +1,91 @@ +--- +id: getting-started +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.2.2/hStack.md b/versioned_docs/version-3.2.2/hStack.md new file mode 100644 index 000000000..de0d33d06 --- /dev/null +++ b/versioned_docs/version-3.2.2/hStack.md @@ -0,0 +1,24 @@ +--- +id: h-stack +title: HStack / Row +--- + +`HStack` aligns items horizontally. `Row` is also an alias for `HStack`. + +## Import + +```jsx +import { HStack } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=components,primitives,HStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,HStack.tsx + +``` diff --git a/versioned_docs/version-3.2.2/heading.md b/versioned_docs/version-3.2.2/heading.md new file mode 100644 index 000000000..380bb87d3 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Heading,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Heading,Sizes.tsx + +``` + +### Truncate + +```ComponentSnackPlayer path=components,primitives,Heading,Truncate.tsx + +``` + +### Override + +```ComponentSnackPlayer path=components,primitives,Heading,OverridenStyle.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=components,primitives,Heading,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Heading,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/hidden.md b/versioned_docs/version-3.2.2/hidden.md new file mode 100644 index 000000000..b030ed15b --- /dev/null +++ b/versioned_docs/version-3.2.2/hidden.md @@ -0,0 +1,65 @@ +--- +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 + +```ComponentSnackPlayer path=components,primitives,Hidden,hiddenOnColorModes.tsx + +``` + +## Hidden according to platform + +```jsx + + + This text will be hidden on android and web. + + +``` + +## Props + +```ComponentPropTable path=primitives,Hidden,index.tsx + +``` diff --git a/versioned_docs/version-3.2.2/icon.md b/versioned_docs/version-3.2.2/icon.md new file mode 100644 index 000000000..cb1996111 --- /dev/null +++ b/versioned_docs/version-3.2.2/icon.md @@ -0,0 +1,60 @@ +--- +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 + +### Basic + +```ComponentSnackPlayer path=components,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). + +### 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=components,primitives,Icon,AllIcons.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=components,primitives,Icon,CustomIcon.tsx + +``` + +### Create Icon + +```ComponentSnackPlayer path=components,primitives,Icon,CreateIcon.tsx + +``` + +### Integration with Third Party Icons + +```ComponentSnackPlayer path=components,primitives,Icon,ThirdPartyIcons.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.2.2/iconButton.md b/versioned_docs/version-3.2.2/iconButton.md new file mode 100644 index 000000000..74f6e7309 --- /dev/null +++ b/versioned_docs/version-3.2.2/iconButton.md @@ -0,0 +1,43 @@ +--- +id: icon-button +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=components,composites,IconButton,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,composites,IconButton,Sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=components,composites,IconButton,Variant.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.2.2/image.md b/versioned_docs/version-3.2.2/image.md new file mode 100644 index 000000000..7fb470c5b --- /dev/null +++ b/versioned_docs/version-3.2.2/image.md @@ -0,0 +1,75 @@ +--- +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=components,primitives,Image,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Image,Sizes.tsx + +``` + +### Border Radius + +```ComponentSnackPlayer path=components,primitives,Image,BorderRadius.tsx + +``` + +### Fallback + +```ComponentSnackPlayer path=components,primitives,Image,FallbackSupport.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=components,primitives,Image,WithRef.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Image,index.tsx showStylingProps=true + +``` + +## Note + +### With Next's require statement + +When using require statement from next for image keep this in mind. + +```jsx + + const img = require('/public/me.jpg'); + + // DO ✔ + + // DON'T ✘ + + + +``` diff --git a/versioned_docs/version-3.2.2/input.md b/versioned_docs/version-3.2.2/input.md new file mode 100644 index 000000000..5a60c07ae --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Input,Basic.tsx + +``` + +### Input Sizes + +```ComponentSnackPlayer path=components,primitives,Input,Size.tsx + +``` + +### Input Variants + +```ComponentSnackPlayer path=components,primitives,Input,Variant.tsx + +``` + +### Input Addons + +```ComponentSnackPlayer path=components,primitives,Input,Addons.tsx + +``` + +### Input Elements + +```ComponentSnackPlayer path=components,primitives,Input,Elements.tsx + +``` + +### Password Input + +```ComponentSnackPlayer path=components,primitives,Input,Masked.tsx + +``` + +### Controlled Input + +```ComponentSnackPlayer path=components,primitives,Input,Controlled.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=components,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.2.2/install-cra.mdx b/versioned_docs/version-3.2.2/install-cra.mdx new file mode 100644 index 000000000..4a582d19c --- /dev/null +++ b/versioned_docs/version-3.2.2/install-cra.mdx @@ -0,0 +1,133 @@ +--- +id: install-cra +title: Install in Create React App project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink, RNWebNote } 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 react-native-safe-area-context +``` + +
+ + + +
+ +```bash +npm install react-native-web native-base react-native-svg 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'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
+ + diff --git a/versioned_docs/version-3.2.2/install-expo.mdx b/versioned_docs/version-3.2.2/install-expo.mdx new file mode 100644 index 000000000..a1714763d --- /dev/null +++ b/versioned_docs/version-3.2.2/install-expo.mdx @@ -0,0 +1,140 @@ +--- +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 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 +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 +``` + + + + + +```bash +npm install native-base +``` + + + + + +```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'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + +
+ minions clapping +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.2/install-next.mdx b/versioned_docs/version-3.2.2/install-next.mdx new file mode 100644 index 000000000..4baea406b --- /dev/null +++ b/versioned_docs/version-3.2.2/install-next.mdx @@ -0,0 +1,264 @@ +--- +id: install-next +title: Install in Next.js project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink, RNWebNote } 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 react-native-safe-area-context +``` + +
+ + + + + +
+ +```bash +npm install react-native-web native-base react-native-svg 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', + '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.2.2/install-rn.mdx b/versioned_docs/version-3.2.2/install-rn.mdx new file mode 100644 index 000000000..97d529d50 --- /dev/null +++ b/versioned_docs/version-3.2.2/install-rn.mdx @@ -0,0 +1,138 @@ +--- +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 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 +cd AwesomeNativeBase +``` + +### Install dependencies + + + + + +```bash +yarn add native-base react-native-svg react-native-safe-area-context +``` + + + + + +```bash +npm install native-base react-native-svg 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'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.2/installation.mdx b/versioned_docs/version-3.2.2/installation.mdx new file mode 100644 index 000000000..91616aeed --- /dev/null +++ b/versioned_docs/version-3.2.2/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.2.2/interaction-styles.mdx b/versioned_docs/version-3.2.2/interaction-styles.mdx new file mode 100644 index 000000000..aa46c0a74 --- /dev/null +++ b/versioned_docs/version-3.2.2/interaction-styles.mdx @@ -0,0 +1,229 @@ +--- +id: pseudo-props +title: 'Pseudo props: Overview' +--- + +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 + + + + + +```jsx title="Hover example" + + + Hover me + + +``` + +## Pressed + +Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed. + + + + + + Pressed + + + + + +```jsx title="Pressed example" + + + Pressed + + +``` + +## Focus + +Using `_focus` pseudo prop, we can customize the style of Pressable component on focus. + + + + + + Focus + + + + + +```jsx title="Focus example" + + + Focus + + +``` + +## Platform specific styling + +Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms. + + + + + + + Save + + + Web + + + + + Save + + + Android + + + + + Save + + + iOS + + + + +```jsx title="Platform specific example" + + + + + Save + + + Web + + + + + Save + + + Android + + + + + Save + + + iOS + + +``` diff --git a/versioned_docs/version-3.2.2/keyboardAvoidingView.md b/versioned_docs/version-3.2.2/keyboardAvoidingView.md new file mode 100644 index 000000000..7433142e2 --- /dev/null +++ b/versioned_docs/version-3.2.2/keyboardAvoidingView.md @@ -0,0 +1,18 @@ +--- +id: keyboard-avoiding-view +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=components,basic,KeyboardAvoidingView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,KeyboardAvoidingView,KeyboardAvoidingView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/kitchen-sink.mdx b/versioned_docs/version-3.2.2/kitchen-sink.mdx new file mode 100644 index 000000000..7187d2c16 --- /dev/null +++ b/versioned_docs/version-3.2.2/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.2.2/link.md b/versioned_docs/version-3.2.2/link.md new file mode 100644 index 000000000..be14d5e7b --- /dev/null +++ b/versioned_docs/version-3.2.2/link.md @@ -0,0 +1,60 @@ +--- +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=components,primitives,Link,Basic.tsx + +``` + +### External Link + +```ComponentSnackPlayer path=components,primitives,Link,ExternalLink.tsx + +``` + +### Link with Underline + +```ComponentSnackPlayer path=components,primitives,Link,UnderlineLink.tsx + +``` + +### Link custom onPress + +```ComponentSnackPlayer path=components,primitives,Link,CustomOnPress.tsx + +``` + +### Link around containers + +```ComponentSnackPlayer path=components,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.2.2/loginsignupforms.md b/versioned_docs/version-3.2.2/loginsignupforms.md new file mode 100644 index 000000000..b0ebd4db9 --- /dev/null +++ b/versioned_docs/version-3.2.2/loginsignupforms.md @@ -0,0 +1,18 @@ +--- +id: login-signup-forms +title: Login/Signup Forms +--- + +## Example + +### Login Form + +```ComponentSnackPlayer path=examples,Signin.tsx + +``` + +### Signup Form + +```ComponentSnackPlayer path=examples,Signup.tsx + +``` diff --git a/versioned_docs/version-3.2.2/menu.md b/versioned_docs/version-3.2.2/menu.md new file mode 100644 index 000000000..0f6770f1f --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Menu,Basic.tsx + +``` + +### Group + +```ComponentSnackPlayer path=components,composites,Menu,Group.tsx + +``` + +### MenuOptionGroups + +```ComponentSnackPlayer path=components,composites,Menu,MenuOptionsGroup.tsx + +``` + +### Menu Placement + +```ComponentSnackPlayer path=components,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.2.2/migration/Actionsheet.md b/versioned_docs/version-3.2.2/migration/Actionsheet.md new file mode 100644 index 000000000..50e681848 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Actionsheet.md @@ -0,0 +1,107 @@ +--- +id: action-sheet +title: ActionSheet +--- + +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.2.2/migration/Badge.md b/versioned_docs/version-3.2.2/migration/Badge.md new file mode 100644 index 000000000..50dad69ac --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Badge.md @@ -0,0 +1,44 @@ +--- +id: badge +title: Badge +--- + +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.2.2/migration/Button.md b/versioned_docs/version-3.2.2/migration/Button.md new file mode 100644 index 000000000..a33b068df --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Button.md @@ -0,0 +1,196 @@ +--- +id: button +title: Button +--- + +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 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**. +- 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.2.2/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Card.md b/versioned_docs/version-3.2.2/migration/Card.md new file mode 100644 index 000000000..14a383239 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Card.md @@ -0,0 +1,91 @@ +--- +id: card +title: Card +--- + +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.2.2/migration/Checkbox.md b/versioned_docs/version-3.2.2/migration/Checkbox.md new file mode 100644 index 000000000..f63647256 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Checkbox.md @@ -0,0 +1,54 @@ +--- +id: checkbox +title: Checkbox +--- + +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.2.2/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/DatePicker.md b/versioned_docs/version-3.2.2/migration/DatePicker.md new file mode 100644 index 000000000..9d2dcf583 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/DatePicker.md @@ -0,0 +1,6 @@ +--- +id: date-picker +title: DatePicker +--- + +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.2.2/migration/DeckSwiper.md b/versioned_docs/version-3.2.2/migration/DeckSwiper.md new file mode 100644 index 000000000..9fd590f78 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/DeckSwiper.md @@ -0,0 +1,8 @@ +--- +id: deck-swiper +title: DeckSwiper +--- + +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.2.2/migration/Drawer.md b/versioned_docs/version-3.2.2/migration/Drawer.md new file mode 100644 index 000000000..1c4f74752 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Drawer.md @@ -0,0 +1,6 @@ +--- +id: drawer +title: Drawer +--- + +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.2.2/migration/FABs.md b/versioned_docs/version-3.2.2/migration/FABs.md new file mode 100644 index 000000000..7c7e20906 --- /dev/null +++ b/versioned_docs/version-3.2.2/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.2.2/migration/FooterTab.md b/versioned_docs/version-3.2.2/migration/FooterTab.md new file mode 100644 index 000000000..6262a397a --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/FooterTab.md @@ -0,0 +1,6 @@ +--- +id: footer-tab +title: FooterTab +--- + +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.2.2/migration/Form.md b/versioned_docs/version-3.2.2/migration/Form.md new file mode 100644 index 000000000..c7fe61675 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Form.md @@ -0,0 +1,72 @@ +--- +id: form +title: Form +--- + +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.2.2/migration/Header.md b/versioned_docs/version-3.2.2/migration/Header.md new file mode 100644 index 000000000..9ec9f0288 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Header.md @@ -0,0 +1,6 @@ +--- +id: header +title: Header +--- + +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.2.2/migration/Icon.md b/versioned_docs/version-3.2.2/migration/Icon.md new file mode 100644 index 000000000..e51c49acb --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Icon.md @@ -0,0 +1,80 @@ +--- +id: icon +title: Icon +--- + +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.2.2/migration/Layout.md b/versioned_docs/version-3.2.2/migration/Layout.md new file mode 100644 index 000000000..40ecc91a0 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Layout.md @@ -0,0 +1,77 @@ +--- +id: layout +title: Layout +--- + +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.2.2/migration/List.md b/versioned_docs/version-3.2.2/migration/List.md new file mode 100644 index 000000000..e69de29bb diff --git a/versioned_docs/version-3.2.2/migration/Picker.md b/versioned_docs/version-3.2.2/migration/Picker.md new file mode 100644 index 000000000..87dbb6037 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Picker.md @@ -0,0 +1,91 @@ +--- +id: picker +title: Picker +--- + +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.2.2/migration/Radio Button.md b/versioned_docs/version-3.2.2/migration/Radio Button.md new file mode 100644 index 000000000..b05b412b7 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Radio Button.md @@ -0,0 +1,95 @@ +--- +id: radio-button +title: Radio Button +--- + +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.2.2/migration/Searchbar.md b/versioned_docs/version-3.2.2/migration/Searchbar.md new file mode 100644 index 000000000..3f02a608a --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Searchbar.md @@ -0,0 +1,6 @@ +--- +id: search-bar +title: Search Bar +--- + +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.2.2/migration/Segment.md b/versioned_docs/version-3.2.2/migration/Segment.md new file mode 100644 index 000000000..1f80beece --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Segment.md @@ -0,0 +1,7 @@ +--- +id: segment +title: Segment +--- + +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.2.2/migration/Spinner.md b/versioned_docs/version-3.2.2/migration/Spinner.md new file mode 100644 index 000000000..9a6fbc31a --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Spinner.md @@ -0,0 +1,47 @@ +--- +id: spinner +title: Spinner +--- + +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.2.2/migration/SwipeList.md b/versioned_docs/version-3.2.2/migration/SwipeList.md new file mode 100644 index 000000000..7f7b0f37b --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/SwipeList.md @@ -0,0 +1,6 @@ +--- +id: swipe-list +title: SwipeList +--- + +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.2.2/migration/Tabs.md b/versioned_docs/version-3.2.2/migration/Tabs.md new file mode 100644 index 000000000..bcbe293cd --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Tabs.md @@ -0,0 +1,67 @@ +--- +id: tabs +title: Tabs +--- + +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.2.2/migration/Thumbnail.md b/versioned_docs/version-3.2.2/migration/Thumbnail.md new file mode 100644 index 000000000..d199a39ad --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Thumbnail.md @@ -0,0 +1,73 @@ +--- +id: thumbnail +title: Thumbnail +--- + +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.2.2/migration/Toast.md b/versioned_docs/version-3.2.2/migration/Toast.md new file mode 100644 index 000000000..3c1aec5ac --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Toast.md @@ -0,0 +1,84 @@ +--- +id: toast +title: Toast +--- + +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.2.2/migration/Typography.md b/versioned_docs/version-3.2.2/migration/Typography.md new file mode 100644 index 000000000..3f5f0e662 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Typography.md @@ -0,0 +1,39 @@ +--- +id: typography +title: Typography +--- + +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.2.2/migration/v3.md b/versioned_docs/version-3.2.2/migration/v3.md new file mode 100644 index 000000000..ced3b4587 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/v3.md @@ -0,0 +1,19 @@ +--- +id: migration-guide-three +title: Upgrading 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](../utility-first.mdx) +- [Features](../utilityProps.md) +- [Themes](../default-theme.md) + +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.2.2/migration/v3xtov32.mdx b/versioned_docs/version-3.2.2/migration/v3xtov32.mdx new file mode 100644 index 000000000..985e8e724 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/v3xtov32.mdx @@ -0,0 +1,293 @@ +--- +id: migration-guide-three-point-two +title: Upgrading to 3.2.0 from 3.x +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. + +To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: + +## Extend previous version's theme for backward compatibility + +You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. + +```jsx +import { NativeBaseProvider, extendTheme, v3CompatibleTheme } from "native-base"; + +// ... +const yourCustomTheme = { + // ... +} + + + +``` + +## Migrating in a NextJS Project + +If you are updating from 3.1.x to 3.2.x in a Next.js project, you might need to make some changes in configs. + +### Updating next.config.js/ts + +- Now need to include only react-native-web and native-base in transplie-modules +- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter) + + + + + +```jsx {5-22,27-40} +const withFonts = require('next-fonts'); +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', + 'react-native-vector-icons', +]); +module.exports = withPlugins( + [withTM, [withFonts, { projectRoot: __dirname }]], + { + 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; + }, + } +); +``` + + + + +```jsx {1,5,9,15,17} +const { withExpo } = require('@expo/next-adapter'); +const withFonts = require('next-fonts'); +const withPlugins = require('next-compose-plugins'); +const withTM = require('next-transpile-modules')([ + 'react-native-web', + 'native-base', +]); + +const nextConfig = {}; + +module.exports = withPlugins( + [ + withTM, + [withFonts, { projectRoot: __dirname }], + [withExpo, { projectRoot: __dirname }], + ], + nextConfig +); +``` + + + + +### Updating babel.config.js/ts + +- Add `presets: ["@expo/next-adapter/babel"]` and `plugins: [["@babel/plugin-proposal-class-properties"]]` + + + + + +```jsx {3,2} +module.exports = { + presets: ['next/babel'], + plugins: [['react-native-web', { commonjs: true }]], +}; +``` + + + + +```jsx {2,3} +module.exports = { + presets: ['@expo/next-adapter/babel'], + plugins: [['@babel/plugin-proposal-class-properties']], +}; +``` + + + + +### Updating \_document.js/ts + +- No need to import .ttf font files of Icons and add them into document style. + + + + + +```jsx {2-20,30} +import Document, { Html, Head, Main, NextScript } from 'next/document'; +import Ionicons from 'react-native-vector-icons/Fonts/Ionicons.ttf'; +import MaterialIcons from 'react-native-vector-icons/Fonts/MaterialIcons.ttf'; +import AntDesign from 'react-native-vector-icons/Fonts/AntDesign.ttf'; +import MaterialCommunityIcons from 'react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'; +// Generate required css +const iconFontStyles = `@font-face { + src: url(${Ionicons}); + font-family: Ionicons; +} +@font-face { + src: url(${MaterialIcons}); + font-family: MaterialIcons; +}@font-face { + src: url(${AntDesign}); + font-family: AntDesign; +}@font-face { + src: url(${MaterialCommunityIcons}); + font-family: MaterialCommunityIcons; +}`; +class MyDocument extends Document { + static async getInitialProps(ctx) { + const initialProps = await Document.getInitialProps(ctx); + return { ...initialProps }; + } + render() { + return ( + + + + + +
+ + + + ); + } +} +export default MyDocument; +``` + + + + +```jsx +import React from 'react'; +import { getInitialProps } from '@expo/next-adapter/document'; +import Document, { Html, Head, Main, NextScript } from 'next/document'; + +class CustomDocument extends Document { + render() { + return ( + + + + + +
+ + + + ); + } +} + +// Import the getInitialProps method and assign it to your component to ensure the react-native-web styles are used. +CustomDocument.getInitialProps = getInitialProps; + +export default CustomDocument; +``` + + + + +## Handling breaking changes + +Below is a rough account of the breaking API changes as well as the minimal change to migrate + +### Alert: + +- Removed `Alert.Title`. Use `Text` component instead. +- Removed `Alert.Description`. Use `Text` component instead. + +### Divider: + +- Removed `size`. Use `thickness` prop instead. + +## Strict Mode: + +We have introduced [strict mode](../strict-mode.md) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: + +1. All utility props which take theme tokens as values, now take only string values as a valid type + +This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. + +```js +// Incorrect Way to pass theme tokens to utility props + ❌ + +``` + +```js +// Correct Way to pass theme tokens to utility props + ✅ +``` + +2. Remove all non token values given to utility props which accept theme tokens. For example, `p="11"` is not supported with the [default theme](../default-theme.md). Pick up another value from default theme tokens or [define a new one yourself](../customizingTheme.md). +3. If you are using [Icon](../icon.md) with `as` prop, verify this + +```jsx + /* correct */ + + /* incorrect */ + } /> + /* incorrect */ + } name="md-checkmark-circle" /> + +``` + +```` + +``` + +``` +```` diff --git a/versioned_docs/version-3.2.2/modal.md b/versioned_docs/version-3.2.2/modal.md new file mode 100644 index 000000000..7a0b9bccf --- /dev/null +++ b/versioned_docs/version-3.2.2/modal.md @@ -0,0 +1,104 @@ +--- +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=components,composites,Modal,Basic.tsx + +``` + +### Multiple Modals + +```ComponentSnackPlayer path=components,composites,Modal,MultipleModal.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=components,composites,Modal,Size.tsx + +``` + +### intialFocusRef and finalFocusRef Example + +```ComponentSnackPlayer path=components,composites,Modal,ModalRefEg.tsx + +``` + +### Modal with avoidKeyboard + +```ComponentSnackPlayer path=components,composites,Modal,ModalWithAvoidKeyboard.tsx + +``` + +### Modal Placement + +```ComponentSnackPlayer path=components,composites,Modal,ModalPlacement.tsx + +``` + +### Custom Backdrop Modal + +```ComponentSnackPlayer path=components,composites,Modal,CustomBackdrop.tsx + +``` + +
+ +:::tip Development 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.2.2/more-props.md b/versioned_docs/version-3.2.2/more-props.md new file mode 100644 index 000000000..935c792be --- /dev/null +++ b/versioned_docs/version-3.2.2/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.2/nativebase-factory.md b/versioned_docs/version-3.2.2/nativebase-factory.md new file mode 100644 index 000000000..61a6e9730 --- /dev/null +++ b/versioned_docs/version-3.2.2/nativebase-factory.md @@ -0,0 +1,41 @@ +--- +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 + +```ComponentSnackPlayer path=components,composites,factory,usage.tsx + +``` + +## Defining component theme + +```ComponentSnackPlayer path=components,composites,factory,theme.tsx + +``` + +## Using mode in component theme + +```ComponentSnackPlayer path=components,composites,factory,modes.tsx + +``` + +## Using ref + +```ComponentSnackPlayer path=components,composites,factory,ref.tsx + +``` + +## 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.2.2/popOver.md b/versioned_docs/version-3.2.2/popOver.md new file mode 100644 index 000000000..ffd9ee1d0 --- /dev/null +++ b/versioned_docs/version-3.2.2/popOver.md @@ -0,0 +1,96 @@ +--- +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=components,composites,Popover,Basic.tsx + +``` + +### initialFocusRef + +```ComponentSnackPlayer path=components,composites,Popover,RefEg.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=components,composites,Popover,PopoverPositions.tsx + +``` + +
+ +:::tip Development 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.2.2/presence-transition.md b/versioned_docs/version-3.2.2/presence-transition.md new file mode 100644 index 000000000..123d1ec63 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Transitions,Fade.tsx + +``` + +### ScaleFade + +```ComponentSnackPlayer path=components,composites,Transitions,ScaleFade.tsx + +``` + +## Props + +```ComponentPropTable path=components,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.2.2/pressable.md b/versioned_docs/version-3.2.2/pressable.md new file mode 100644 index 000000000..4064425c5 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,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=components,primitives,Pressable,Events.tsx + +``` + +## Props + +### Pressable + +```ComponentPropTable path=primitives,Pressable,Pressable.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/progress.md b/versioned_docs/version-3.2.2/progress.md new file mode 100644 index 000000000..ca5e27524 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Progress,Basic.tsx + +``` + +### Progress colorScheme + +```ComponentSnackPlayer path=components,composites,Progress,ColorScheme.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,composites,Progress,Sizes.tsx + +``` + +### Flat Progress + +```ComponentSnackPlayer path=components,composites,Progress,Flat.tsx + +``` + +### Custom Track Color + +```ComponentSnackPlayer path=components,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.2.2/pseudoProps.md b/versioned_docs/version-3.2.2/pseudoProps.md new file mode 100644 index 000000000..36baacf27 --- /dev/null +++ b/versioned_docs/version-3.2.2/pseudoProps.md @@ -0,0 +1,82 @@ +--- +id: pseudo-props-101 +title: 'Pseudo props: Do’s & Dont’s' +--- + +Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. + +## Nesting pseudo props: + +In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind. + +Example: So assume you want to change the text color of a button on its hover state. + +### Do's + +```jsx + +``` + +### Dont's + +```jsx + +``` + +The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . + +## Precedence Order for Pseudo Props: + +Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence. + +| Pseudo Props | Precedence Value | +| -------------- | ---------------- | +| \_disabled | 100 | +| \_pressed | 70 | +| \_hover | 60 | +| \_focus | 50 | +| \_focusVisible | 55 | +| \_active | 30 | +| \_checked | 30 | +| \_readOnly | 40 | +| \_invalid | 40 | +| \_web | 10 | +| \_android | 10 | +| \_ios | 10 | +| \_light | 10 | +| \_dark | 10 | + +```SnackPlayer name=Pseudo%20Props%20Precedence +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Component() { + return ( + // Here you can see _hover will be overrided by _pressed + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.2/radio.md b/versioned_docs/version-3.2.2/radio.md new file mode 100644 index 000000000..f03bd8b09 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Radio,controlledRadio.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=components,primitives,Radio,uncontrolledRadio.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=components,primitives,Radio,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=components,primitives,Radio,invalid.tsx + +``` + +### Size + +```ComponentSnackPlayer path=components,primitives,Radio,size.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=components,primitives,Radio,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=components,primitives,Radio,customIcon.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=components,primitives,Radio,formControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=components,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.2.2/responsive.md b/versioned_docs/version-3.2.2/responsive.md new file mode 100644 index 000000000..af755933b --- /dev/null +++ b/versioned_docs/version-3.2.2/responsive.md @@ -0,0 +1,173 @@ +--- +id: responsive-style +title: Responsive +--- + +NativeBase v3 supports responsive styles out of the box. Instead of manually adding responsiveness to your apps, NativeBase v3 allows you provide object and array values to add responsive styles. + +Responsive syntax relies on the breakpoints defined in the theme object. + +```jsx +const breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +To make styles responsive, you can use either the array or object syntax. + +## The Array syntax + +All style props that arrays as values for responsive styles. + +For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: + +```SnackPlayer name=Responsive%20Usage +import React from 'react'; +import { NativeBaseProvider, Center } from 'native-base'; +function BreakpointExample () { + return ( +
+ This is a box +
+ ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## The Object syntax + +You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value. + +For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do: + +```SnackPlayer name=Responsive%20ObjectSyntax +import React from 'react'; +import { Text, NativeBaseProvider, Center } from 'native-base'; +function BreakpointExample () { + return ( + + This is responsive text + + ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Demo + +Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens. + +```SnackPlayer name=Responsive%20Demo +import React from 'react'; +import { + useToken, + NativeBaseProvider, + Center, + Text, + Box, + HStack, + Image, + Stack, + Heading, +} from 'native-base'; + +function Example() { + return ( + + + image +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's high-tech + industry. The city is also known for its parks and nightlife. + + + + + 6 mins ago + + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + + +``` diff --git a/versioned_docs/version-3.2.2/safe-area-view-props.md b/versioned_docs/version-3.2.2/safe-area-view-props.md new file mode 100644 index 000000000..180188b90 --- /dev/null +++ b/versioned_docs/version-3.2.2/safe-area-view-props.md @@ -0,0 +1,99 @@ +--- +id: safe-area-view-props +title: SafeAreaView Props +--- + +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. + +- `safeArea`: Apply safe padding to all edges. +- `safeAreaX`: Apply safe padding to x direction. +- `safeAreaY`: Apply safe padding to y direction. +- `safeAreaTop`: Apply safe padding to top. +- `safeAreaBottom`: Apply safe padding to bottom. +- `safeAreaLeft`: Apply safe padding to left. +- `safeAreaRight`: Apply safe padding to right. + +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). + +:::info +SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +::: + +## Examples + +### Flexible SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look different on devices with different insets + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} +``` + +### Fixed SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` + +### Using Hook + +If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +function MyComponent() { + const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.2/scrollview.md b/versioned_docs/version-3.2.2/scrollview.md new file mode 100644 index 000000000..99e5e443b --- /dev/null +++ b/versioned_docs/version-3.2.2/scrollview.md @@ -0,0 +1,18 @@ +--- +id: scrollview +title: Scrollview +--- + +Provides a scrolling container that can host multiple components and views. + +## Example + +```ComponentSnackPlayer path=components,basic,ScrollView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,ScrollView,ScrollView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/sectionList.md b/versioned_docs/version-3.2.2/sectionList.md new file mode 100644 index 000000000..aea7b93d3 --- /dev/null +++ b/versioned_docs/version-3.2.2/sectionList.md @@ -0,0 +1,18 @@ +--- +id: section-list +title: SectionList +--- + +A performant interface for rendering sectioned lists. + +## Example + +```ComponentSnackPlayer path=components,basic,SectionList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,SectionList,SectionList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/select.md b/versioned_docs/version-3.2.2/select.md new file mode 100644 index 000000000..a82f05da7 --- /dev/null +++ b/versioned_docs/version-3.2.2/select.md @@ -0,0 +1,54 @@ +--- +id: select +title: Select +--- + +import { ComponentTheme } from '../../src/components'; + +import { AndroidBadge } from "../../src/components"; + +Select creates a dropdown list of items with the selected item in closed view. + +## Import + +```jsx +import { Select } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Select,Basic.tsx + +``` + +### FormControlled + +```ComponentSnackPlayer path=components,primitives,Select,FormControlled.tsx + +``` + +### Select + +## Props + +```ComponentPropTable path=primitives,Select,Select.tsx + +``` + +### Select.Item + +## Props + +```ComponentPropTable path=primitives,Select,SelectItem.tsx + +``` + +## Styling + + + +## Accessibility + +- use `native` variant. Accessibility improvements on styled variant is in-progress. diff --git a/versioned_docs/version-3.2.2/setup-provider.md b/versioned_docs/version-3.2.2/setup-provider.md new file mode 100644 index 000000000..91ab8c8b7 --- /dev/null +++ b/versioned_docs/version-3.2.2/setup-provider.md @@ -0,0 +1,129 @@ +--- +id: setup-provider +title: Setup NativeBase Provider +--- + +NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows: + +**App.js** + +```jsx +import React from 'react'; +// 1. import `NativeBaseProvider` component +import { NativeBaseProvider, Text, Box } from 'native-base'; + +export default function App() { + // 2. Use at the root of your app + return ( + + + Open up App.js to start working on your app! + + + ); +} +``` + +## **Add custom theme (Optional)** + +If you need to customize the default theme to match your design requirements, you can extend the `theme` from `native-base`. + +NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations. + +```jsx +// 1. Import the extendTheme function +import { extendTheme, NativeBaseProvider } from 'native-base'; +// 2. Extend the theme to include custom colors, fonts, etc +const newColorTheme = { + brand: { + 900: '#8287af', + 800: '#7c83db', + 700: '#b3bef6', + }, +}; +const theme = extendTheme({ colors: newColorTheme }); +// 3. Pass the `theme` prop to the `NativeBaseProvider` +function App() { + return ( + + + + ); +} +``` + +## Add colorModeManager (Optional) + +If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. + +In the below example we will show how to store the active ColorMode in a async storage, so it can be consistent all around our app. + +```tsx +import React from 'react'; +import { NativeBaseProvider, ColorMode } from 'native-base'; +import type { StorageManager } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +export default ({ children, theme }: any) => { + const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@my-app-color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + console.log(e); + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@my-app-color-mode', value); + } catch (e) { + console.log(e); + } + }, + }; + return ( + + {/* Your App Goes Here */} + + ); +}; +``` + +## Add external dependencies (Optional) + +If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) + +```jsx +import React from 'react'; +import { NativeBaseProvider } from 'native-base'; + +const config = { + dependencies: { + // For Expo projects (Bare or managed workflow) + 'linear-gradient': require('expo-linear-gradient').LinearGradient, + // For non expo projects + // 'linear-gradient': require('react-native-linear-gradient').default, + }, +}; + +export default () => { + return ( + +
+ +
+ + ); +}; +``` + +## NativeBaseProvider Props + +| Name | Type | Description | Default | +| -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | +| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | +| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | +| theme | Object | use custom theme in your app | NativeBase Default Theme | +| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/versioned_docs/version-3.2.2/slide.md b/versioned_docs/version-3.2.2/slide.md new file mode 100644 index 000000000..885488982 --- /dev/null +++ b/versioned_docs/version-3.2.2/slide.md @@ -0,0 +1,38 @@ +--- +id: slide +title: Slide +--- + +Slide component provides a declarative API to add sliding transitions. + +## Import + +## Examples + +### Slide + +```ComponentSnackPlayer path=components,composites,Transitions,Slide.tsx + +``` + +### Slide wrapped inside parent + +```ComponentSnackPlayer path=components,composites,Transitions,SlideWrapped.tsx + +``` + +### Slide Composition + +```ComponentSnackPlayer path=components,composites,Transitions,SlideComposition.tsx + +``` + +## Props + +### 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`, `left`, `right` | The direction to slide drawer from. | `bottom` | diff --git a/versioned_docs/version-3.2.2/slider.md b/versioned_docs/version-3.2.2/slider.md new file mode 100644 index 000000000..1e1d34811 --- /dev/null +++ b/versioned_docs/version-3.2.2/slider.md @@ -0,0 +1,86 @@ +--- +id: slider +title: Slider +--- + +import { ComponentTheme } from '../../src/components'; + +The `Slider` is used to allow users to make selections from a range of values. + +## Import + +NativeBase exports 4 slider-related components: + +- `Slider`: The wrapper that provides context and functionality for all children. +- `Slider.Track`: The empty part of the slider that shows the track. +- `Slider.FilledTrack`: The filled part of the slider. +- `Slider.Thumb`: The handle that's used to change the slider value. + +```jsx +import { Slider } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=components,primitives,Slider,usage.tsx + +``` + +### Color + +```ComponentSnackPlayer path=components,primitives,Slider,color.tsx + +``` + +### Value + +```ComponentSnackPlayer path=components,primitives,Slider,Value.tsx + +``` + +### Size + +```ComponentSnackPlayer path=components,primitives,Slider,Size.tsx + +``` + +### Customised + +```ComponentSnackPlayer path=components,primitives,Slider,Customized.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=components,primitives,Slider,FormControlled.tsx + +``` + +## Props + +### Slider + +```ComponentPropTable path=primitives,Slider,Slider.tsx + +``` + +### Children components + +- `Slider.Track`, `Slider.FilledTrack`, and `Slider.Thumb` composes the [`Box`](box.md) component. + +## Styling + + + +## Accessibility + +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) + +### 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. | diff --git a/versioned_docs/version-3.2.2/spinner.md b/versioned_docs/version-3.2.2/spinner.md new file mode 100644 index 000000000..3ceaeef0f --- /dev/null +++ b/versioned_docs/version-3.2.2/spinner.md @@ -0,0 +1,32 @@ +--- +id: spinner +title: Spinner +--- + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Spinner,usage.tsx + +``` + +### Colors + +```ComponentSnackPlayer path=components,primitives,Spinner,color.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Spinner,size.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Spinner,index.tsx + +``` + +Spinner composes [`ActivityIndicator`](https://reactnative.dev/docs/activityindicator) so all `ActivityIndicator` Props can be passed to Spinner. diff --git a/versioned_docs/version-3.2.2/stack.md b/versioned_docs/version-3.2.2/stack.md new file mode 100644 index 000000000..bf058ead7 --- /dev/null +++ b/versioned_docs/version-3.2.2/stack.md @@ -0,0 +1,18 @@ +--- +id: stack +title: Stack +--- + +`Stack` aligns items vertically or horizontally based on the `direction` prop. + +## Example + +```ComponentSnackPlayer path=components,primitives,Stack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,Stack.tsx + +``` diff --git a/versioned_docs/version-3.2.2/stagger.md b/versioned_docs/version-3.2.2/stagger.md new file mode 100644 index 000000000..ed4adb704 --- /dev/null +++ b/versioned_docs/version-3.2.2/stagger.md @@ -0,0 +1,54 @@ +--- +id: stagger +title: Stagger +--- + +Stagger component provides a declarative API to add Staggered Transitions. + +## Example + +```ComponentSnackPlayer path=components,composites,Transitions,Stagger.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,Stagger.tsx showStylingProps=true + +``` + +## IStaggerStyleProps + +```js +interface IStaggerStyleProps extends ISupportedTransition { + transition?: { + stagger?: { + /** + * Delay to add to each child + */ + offset: number, + /** + * When true, delay is added from the last child + */ + reverse?: boolean, + }, + + 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.2.2/statusBar.md b/versioned_docs/version-3.2.2/statusBar.md new file mode 100644 index 000000000..3f7b3c687 --- /dev/null +++ b/versioned_docs/version-3.2.2/statusBar.md @@ -0,0 +1,18 @@ +--- +id: status-bar +title: StatusBar +--- + +Component to control the app status bar. + +## Example + +```ComponentSnackPlayer path=components,basic,StatusBar,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,StatusBar,StatusBar.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/strict-mode.md b/versioned_docs/version-3.2.2/strict-mode.md new file mode 100644 index 000000000..690cb14fc --- /dev/null +++ b/versioned_docs/version-3.2.2/strict-mode.md @@ -0,0 +1,39 @@ +--- +id: strict-mode +title: Strict Mode +--- + +NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices through out your codebase. + +## What it does? + +Strict Mode is a config that you pass into NativeBase config. It takes 3 values `error`, `warn` and `off` by default it is set to `warn`. Based on your chosen option it checks for every prop in your project if you have used proper `token values` from theme and you are only passing `string values` to the props and if not then it throws an error or warning or does nothing. + +## Levels of Strictness + +- **error** - Choosing this mode will throw an error indicating the cause of the error. +- **warn** - Choosing this mode will show a warning indicating the issue. +- **off** - Choosing this mode simply means you want to go rogue and not follow the design system and best practices. + +## How to change the mode? + +To change the `strictMode` create a `config object` like below and choose you `strictMode` value from `error`,`warn` and `off` which ever suits your use-case : + +```jsx +import { INativebaseConfig, NativeBaseProvider } from 'native-base'; + +// ignore the INativebaseConfig if you are not using typescript + +const config: INativebaseConfig = { + // rest of the config keys like dependencies can go here + strictMode: 'warn', +}; +``` + +and pass this as a prop in your App `NativeBaseProvider` + +```jsx + + + +``` diff --git a/versioned_docs/version-3.2.2/switch.md b/versioned_docs/version-3.2.2/switch.md new file mode 100644 index 000000000..40e762475 --- /dev/null +++ b/versioned_docs/version-3.2.2/switch.md @@ -0,0 +1,49 @@ +--- +id: switch +title: Switch +--- + +The `Switch` component is an alternative to the Checkbox component. You can switch between enabled or disabled states. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Switch,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Switch,Sizes.tsx + +``` + +### Track & Thumb Color + +```ComponentSnackPlayer path=components,primitives,Switch,SwitchBgColor.tsx + +``` + +### Color Schemes + +```ComponentSnackPlayer path=components,primitives,Switch,ColorSchemes.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Switch,index.tsx showStylingProps=true + +``` + +## Accessibility + +- On mobile, uses native switch which is fully accessible. +- On web, it uses checkbox with a [role](https://www.w3.org/TR/wai-aria-1.2/#switch) set to `switch`. + +### Keyboard Interactions + +| Name | Description | +| ----- | ------------------------------ | +| Space | Toggles the component's state. | diff --git a/versioned_docs/version-3.2.2/testing.md b/versioned_docs/version-3.2.2/testing.md new file mode 100644 index 000000000..cfd5b0139 --- /dev/null +++ b/versioned_docs/version-3.2.2/testing.md @@ -0,0 +1,25 @@ +--- +id: testing +title: Testing +--- + +NativeBase works with react-native's jest preset or expo's jest-expo preset. However, there's one thing you'll need to do for it to work as expected. + +### Adding initialWindowMetrics in NativeBaseProvider. + +- NativeBaseProvider uses [SafeAreaContext](https://github.com/th3rdwave/react-native-safe-area-context#testing) which needs initialWindowMetrics to be passed to the Provider while testing. + +Not following the above may lead to an error related to SafeAreaProvider while running `yarn test`. + +To fix the above issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests. + +```jsx +const inset = { + frame: { x: 0, y: 0, width: 0, height: 0 }, + insets: { top: 0, left: 0, right: 0, bottom: 0 }, +}; + + + {children} +; +``` diff --git a/versioned_docs/version-3.2.2/text.md b/versioned_docs/version-3.2.2/text.md new file mode 100644 index 000000000..c072de924 --- /dev/null +++ b/versioned_docs/version-3.2.2/text.md @@ -0,0 +1,44 @@ +--- +id: text +title: Text +--- + +import { ComponentTheme } from '../../src/components'; + +`Text` is used to render text and paragraphs within an interface. + +## Examples + +### ChangingFontSize + +```ComponentSnackPlayer path=components,primitives,Text,ChangingFontSize.tsx + +``` + +### Truncated + +```ComponentSnackPlayer path=components,primitives,Text,Truncated.tsx + +``` + +### Nested + +```ComponentSnackPlayer path=components,primitives,Text,Nested.tsx + +``` + +### Overridden + +```ComponentSnackPlayer path=components,primitives,Text,Overriden.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Text,index.tsx showStylingProps=true + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/textArea.md b/versioned_docs/version-3.2.2/textArea.md new file mode 100644 index 000000000..36efe2942 --- /dev/null +++ b/versioned_docs/version-3.2.2/textArea.md @@ -0,0 +1,38 @@ +--- +id: textarea +title: TextArea +--- + +import { ComponentTheme } from '../../src/components'; + +The `Textarea` component allows you to easily create multi-line text inputs. + +## Examples + +### Usage + +```ComponentSnackPlayer path=components,primitives,TextArea,basic.tsx + +``` + +### Invalid and Disabled TextArea + +```ComponentSnackPlayer path=components,primitives,TextArea,invalid.tsx + +``` + +### Value Controlled TextArea + +```ComponentSnackPlayer path=components,primitives,TextArea,value.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,TextArea,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/theme.md b/versioned_docs/version-3.2.2/theme.md new file mode 100644 index 000000000..45d079afd --- /dev/null +++ b/versioned_docs/version-3.2.2/theme.md @@ -0,0 +1,205 @@ +--- +id: theme +title: Using Theme +--- + +NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/useTheme.md), which you can use to access the values from the current theme. + +## useTheme + +```SnackPlayer name=useTheme%20Demo +import React from 'react'; +import { + NativeBaseProvider, + useTheme, + FlatList, + Center, + Box, +} from 'native-base'; + +function ColorPalete() { + const { colors } = useTheme(); + return ( + + } + /> + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## useToken + +You can also get specific values from the theme with [`useToken`](/useToken.md) hook. + +```SnackPlayer name=useToken%20Demo +import React from 'react'; +import { useToken, NativeBaseProvider, Center, Text } from 'native-base'; + +function Tokens() { + const [contrastThreshold, lightText] = useToken('colors', [ + 'contrastThreshold', + 'lightText', + ]); + return ( +
+ Contrast threshold is:{' '} + + {contrastThreshold} + +
+ ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +## useContrastText + +If you are defining the background yourself and pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). + +```SnackPlayer name=useContrastText + +import React from 'react'; +import { + Button, + Stack, + useContrastText, + NativeBaseProvider, + Center, +} from 'native-base'; +function UseContrastingTextHook() { + const bgDark = 'primary.600'; + const bgLight = 'primary.200'; + const colorContrastDark = useContrastText(bgDark); + const colorContrastLight = useContrastText(bgLight); + + return ( + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## useColorMode + +If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](useColorMode.md). + +```SnackPlayer name=useColorMode +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, +} from 'native-base'; + +function UseColorMode() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {colorMode} + + + +
+ ); +} + +export default Example = () => { + return ( + + + + ); +}; + +``` + +## useColorModeValue + +If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use [useColorModeValue](useColorModeValue.md) hook. It takes two parameters, light mode value as the first and dark mode value as second. + +```SnackPlayer name=useColorModeValue +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, + useColorModeValue, +} from 'native-base'; + +function UseColorMode() { + const { toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} + + + +
+ ); +} + +export default Example = () => { + return ( + + + + ); +}; + +``` diff --git a/versioned_docs/version-3.2.2/toast.md b/versioned_docs/version-3.2.2/toast.md new file mode 100644 index 000000000..686740b74 --- /dev/null +++ b/versioned_docs/version-3.2.2/toast.md @@ -0,0 +1,88 @@ +--- +id: toast +title: Toast +--- + +import { ComponentTheme } from '../../src/components'; + +`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. + +Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time. + +## Import + +```jsx +import { useToast } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,Toast,Basic.tsx + +``` + +### Position + +```ComponentSnackPlayer path=components,composites,Toast,ToastPositions.tsx + +``` + +### Custom component + +Display a custom component instead of the default Toast UI. + +```ComponentSnackPlayer path=components,composites,Toast,CustomComponent.tsx + +``` + +### Closing Toasts + +Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). + +```ComponentSnackPlayer path=components,composites,Toast,CloseToast.tsx + +``` + +### Status + +You can use status to change the color of your toasts. +`Toast` uses the same variants as the [Alert](alert.md) component. + +```ComponentSnackPlayer path=components,composites,Toast,ToastStatus.tsx + +``` + +### Preventing Duplicate Toast + +In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). + +```ComponentSnackPlayer path=components,composites,Toast,PreventDuplicate.tsx + +``` + +### Standalone Toast + +You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. + +```ComponentSnackPlayer path=components,composites,Toast,StandaloneToast.tsx + +``` + +## Props + +Below props can be passed while calling toast.show. + +```ComponentPropTable path=composites,Toast,ToastDummy.tsx + +``` + +## Accessibility + +- On Android and Web, Toast renders under a View with accessibilityLiveRegion which announces the content rendered inside it to screen reader devices. +- On iOS, accessibilityLiveRegion is not supported yet, so we use the [accessibilityAnnouncement](https://reactnative.dev/docs/accessibilityinfo#announceforaccessibility) to announce the content. + +## Styling + + diff --git a/versioned_docs/version-3.2.2/todo-list.md b/versioned_docs/version-3.2.2/todo-list.md new file mode 100644 index 000000000..70010dc0e --- /dev/null +++ b/versioned_docs/version-3.2.2/todo-list.md @@ -0,0 +1,10 @@ +--- +id: todo-example +title: Todo-List +--- + +A simple To Do App made using NativeBase 3.0. + +```ComponentSnackPlayer path=examples,TodoApp.tsx + +``` diff --git a/versioned_docs/version-3.2.2/tooltip.md b/versioned_docs/version-3.2.2/tooltip.md new file mode 100644 index 000000000..d304b7052 --- /dev/null +++ b/versioned_docs/version-3.2.2/tooltip.md @@ -0,0 +1,65 @@ +--- +id: tooltip +title: Tooltip +--- + +import { ComponentTheme } from '../../src/components'; + +A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. + +## Import + +```jsx +import { Tooltip } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,Tooltip,Basic.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=components,composites,Tooltip,TooltipPositions.tsx + +``` + +### Customizing tooltip + +Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props. + +```ComponentSnackPlayer path=components,composites,Tooltip,CustomTooltip.tsx + +``` + +
+ +:::tip Development Tip +You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Tooltip. +::: + +## Props + +```ComponentPropTable path=composites,Tooltip,Tooltip.tsx + +``` + +## Styling + + + +## Accessibility + +Adheres to the [Tooltip WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-1.1/#tooltip) + +### Keyboard Interactions + +| Name | Description | +| ----- | ------------------------------------------ | +| Space | If open, closes the tooltip without delay. | +| Enter | If open, closes the tooltip without delay. | +| Tab | Moves focus to the next focusable element. | +| Esc | If open, closes the tooltip without delay. | diff --git a/versioned_docs/version-3.2.2/typescript.md b/versioned_docs/version-3.2.2/typescript.md new file mode 100644 index 000000000..33601937b --- /dev/null +++ b/versioned_docs/version-3.2.2/typescript.md @@ -0,0 +1,40 @@ +--- +id: typescript +title: Typescript +--- + +To enable typescript for custom theme tokens or variants, we'll follow two simple steps. + +Below, in the [extendTheme](http://localhost:3002/customizing-theme) function, we're adding a space token and a custom variant for the Button. + +```jsx +import { extendTheme } from 'native-base'; + +const customTheme = extendTheme({ + space: { + 'space-2': '29px', + }, + components: { + Button: { + variants: { + brand: { + p: '10', + bg: 'brand.500', + }, + }, + }, + }, +}); + +// 2. Get the type of the CustomTheme +type CustomThemeType = typeof customTheme; + +// 3. Extend the internal NativeBase Theme +declare module 'native-base' { + interface ICustomTheme extends CustomThemeType {} +} +``` + +## Result + +Typescript intellisense with custom theme tokens diff --git a/versioned_docs/version-3.2.2/useAccessibleColors.md b/versioned_docs/version-3.2.2/useAccessibleColors.md new file mode 100644 index 000000000..0be36b4fb --- /dev/null +++ b/versioned_docs/version-3.2.2/useAccessibleColors.md @@ -0,0 +1,22 @@ +--- +id: use-accessible-colors +title: useAccessibleColors +--- + +`useAccessibleColors` is a custom hook used to get the setting for using color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are turned off to get better color matching the theme of the app. You can use this hook if you always want to use accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](setup-provider.md#add-custom-theme-optional). + +## Import + +```jsx +import { useAccessibleColors } from 'native-base'; +``` + +## Example + +```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx + +``` + +## Return value + +Returns an array with values `accessibleColors`, `setAccessibleColors`, `toggleAccessibleColors`. diff --git a/versioned_docs/version-3.2.2/useBreakPointValue.md b/versioned_docs/version-3.2.2/useBreakPointValue.md new file mode 100644 index 000000000..2bd43393b --- /dev/null +++ b/versioned_docs/version-3.2.2/useBreakPointValue.md @@ -0,0 +1,22 @@ +--- +id: use-breakPoint-value +title: useBreakpointValue +--- + +`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. + +## **Import** + +```jsx +import { useBreakpointValue } from 'native-base'; +``` + +## **Return value** + +The `useBreakpointValue` hook returns the value for the current breakpoint. + +## Usage + +```ComponentSnackPlayer path=hooks,useBreakpointValue,usage.tsx + +``` diff --git a/versioned_docs/version-3.2.2/useClipboard.md b/versioned_docs/version-3.2.2/useClipboard.md new file mode 100644 index 000000000..ec93f3358 --- /dev/null +++ b/versioned_docs/version-3.2.2/useClipboard.md @@ -0,0 +1,26 @@ +--- +id: use-clipboard +title: useClipboard +--- + +`useClipboard` is a custom hook that handles copying content to clipboard. + +## Return Value + +The `useClipboard` hook returns an object with the following fields: + +- `value` : ( **string** ) The copied value. +- `onCopy` : ( **Function** ) Callback function to copy content. +- `hasCopied` : ( **boolean** ) If **true**, the content has been copied. + +## Import + +```jsx +import { useClipboard } from 'native-base'; +``` + +## Usage + +```ComponentSnackPlayer path=hooks,useClipboard,Usage.tsx + +``` diff --git a/versioned_docs/version-3.2.2/useColorMode.md b/versioned_docs/version-3.2.2/useColorMode.md new file mode 100644 index 000000000..3226a6437 --- /dev/null +++ b/versioned_docs/version-3.2.2/useColorMode.md @@ -0,0 +1,26 @@ +--- +id: use-color-mode +title: useColorMode +--- + +`useColorMode` is a custom hook used to get and set the color mode. + +## Import + +```jsx +import { useColorMode } from 'native-base'; +``` + +## Example + +```ComponentSnackPlayer path=hooks,useColorMode,Basic.tsx + +``` + +## Return + +| Name | Type | Description | Default | +| --------------- | --------------- | ------------------------------------------ | ------- | +| colorMode | `light`, `dark` | The active color mode | `light` | +| setColorMode | function | Use to set color mode. | - | +| toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/versioned_docs/version-3.2.2/useColorModeValue.md b/versioned_docs/version-3.2.2/useColorModeValue.md new file mode 100644 index 000000000..d48d39db3 --- /dev/null +++ b/versioned_docs/version-3.2.2/useColorModeValue.md @@ -0,0 +1,22 @@ +--- +id: use-color-mode-value +title: useColorModeValue +--- + +`useColorModeValue` is a custom hook used to get a value from either of the parameters passed based on active color mode value. + +## Import + +```jsx +import { useColorModeValue } from 'native-base'; +``` + +## Example + +```ComponentSnackPlayer path=hooks,useColorModeValue,Basic.tsx + +``` + +## Return value + +Accepts 2 parameters and returns either of the two, based on current color-mode (first parameter for light mode and second parameter for dark mode). diff --git a/versioned_docs/version-3.2.2/useContrastText.md b/versioned_docs/version-3.2.2/useContrastText.md new file mode 100644 index 000000000..f11f89129 --- /dev/null +++ b/versioned_docs/version-3.2.2/useContrastText.md @@ -0,0 +1,32 @@ +--- +id: use-contrast-text +title: useContrastText +--- + +`useContrastText` is a custom hook used to get a contrasting color (either `lightText` or `darkText`) to the color passed as a parameter. + +## Import + +```jsx +import { useContrastText } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=hooks,useContrastText,Basic.tsx + +``` + +### Using Accessible Colors + +By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](useAccessibleColors.md) hook. + +```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx + +``` + +## Return value + +Accepts and returns a color defined in the theme. diff --git a/versioned_docs/version-3.2.2/useDisclosure.md b/versioned_docs/version-3.2.2/useDisclosure.md new file mode 100644 index 000000000..07b15d678 --- /dev/null +++ b/versioned_docs/version-3.2.2/useDisclosure.md @@ -0,0 +1,30 @@ +--- +id: use-disclosure +title: useDisclose +--- + +`useDisclose` is a custom hook used to help handle common `open`, `close`, or `toggle` scenarios. It can be used to control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc. + +## Import + +```jsx +import { useDisclose } from 'native-base'; +``` + +## Example + +```ComponentSnackPlayer path=hooks,useDisclose,Usage.tsx + +``` + +## Return value + +The `useDisclosure` hook returns an object with the following fields: + +`isOpen`: ( **boolean** ) Show the component; triggers the enter or exit states. + +`onClose`: ( **function** ) Callback function to set a falsy value for the `isOpen` parameter. + +`onOpen`: ( **function** ) Callback function to set a truthy value for the `isOpen` parameter. + +`onToggle`: ( **function** ) Callback function to toggle the value of the `isOpen` parameter. diff --git a/versioned_docs/version-3.2.2/useMediaQuery.md b/versioned_docs/version-3.2.2/useMediaQuery.md new file mode 100644 index 000000000..ff9a86dcb --- /dev/null +++ b/versioned_docs/version-3.2.2/useMediaQuery.md @@ -0,0 +1,38 @@ +--- +id: use-media-query +title: useMediaQuery +--- + +`useMediaQuery` is a custom hook used to help detect whether a single media query or multiple media queries individually match. React Native does not natively support media queries, so `useMediaQuery` is still limited. + +## Import + +```jsx +import { useMediaQuery } from 'native-base'; +``` + +## Example + +### max-height + +```ComponentSnackPlayer path=hooks,useMediaQuery,max-height.tsx + +``` + +### min-width + +```ComponentSnackPlayer path=hooks,useMediaQuery,min-width.tsx + +``` + +### orientation + +```ComponentSnackPlayer path=hooks,useMediaQuery,orientation.tsx + +``` + +## Return value + +The `useMediaQuery` hook returns an array of booleans, indicating whether the given query matches or queries match. + +Why an array? `useMediaQuery` accepts both an object and an array of object, but will always return an array. This way, you can combine multiple media queries which will be individually matched in a single call. The options to use are still limited to `maxWidth`, `minWidth`, `maxHeight`, `minHeight`, `orientation`. diff --git a/versioned_docs/version-3.2.2/useTheme.md b/versioned_docs/version-3.2.2/useTheme.md new file mode 100644 index 000000000..71ac99174 --- /dev/null +++ b/versioned_docs/version-3.2.2/useTheme.md @@ -0,0 +1,22 @@ +--- +id: use-theme +title: useTheme +--- + +`useTheme` is a custom hook used to get the theme object from context. + +## Import + +```jsx +import { useTheme } from "native-base"; +``` + +## Example + +```jsx +function Example() { + const theme = useTheme(); + + return {/* Do something with the theme */}; +} +``` diff --git a/versioned_docs/version-3.2.2/useToken.md b/versioned_docs/version-3.2.2/useToken.md new file mode 100644 index 000000000..29b824ec2 --- /dev/null +++ b/versioned_docs/version-3.2.2/useToken.md @@ -0,0 +1,51 @@ +--- +id: use-token +title: useToken +--- + +`useToken` is a custom hook used to resolve design tokens from the theme. + +## Import + +```jsx +import { useToken } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useToken%20Example +import React from "react"; +import { Box, Text, useToken, NativeBaseProvider, Center, HStack , VStack} from "native-base"; + +function UseTokenHookExample() { + const [colorPick1, colorPick2] = useToken( + // the key within the theme, in this case `theme.colors` + "colors", + // the subkey(s), resolving to `theme.colors.warning.1` + ["yellow.500", "cyan.500"] + // a single fallback or fallback array matching the length of the previous arg + ); + + return ( + + + + {colorPick1} + + + + {colorPick2} + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.2/utility-first.mdx b/versioned_docs/version-3.2.2/utility-first.mdx new file mode 100644 index 000000000..27f409d0f --- /dev/null +++ b/versioned_docs/version-3.2.2/utility-first.mdx @@ -0,0 +1,218 @@ +--- +id: utility-first +title: Utility First +--- + +import { UtilityFirstExample } from '../../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; + +React Native has a great StyleSheet API which is optimal for component-based systems. NativeBase leverages it and adds a layer of utility props and constraint based designed tokens on top of it. + +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. + +
+ +```jsx +import * as React from 'react'; +import { Text, View, StyleSheet, Image, Pressable } from 'react-native'; + +export default function App() { + return ( + + + + + Today @ 9PM + Let's talk about avatar! + + + Remind me + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: '#0891b2', + paddingVertical: '16', + paddingHorizontal: '12', + borderRadius: '5', + alignSelf: 'center', + width: '375', + maxWidth: '100%', + }, + timings: { + color: '#fff', + fontSize: '14', + }, + metaContainer: { + justifyContent: 'space-between', + }, + topContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + avatar: { + height: '100', + width: '100', + borderRadius: '100', + }, + description: { + color: 'white', + marginTop: '5', + fontSize: '20', + }, + button: { + backgroundColor: '#22d3ee', + alignSelf: 'flex-start', + paddingHorizontal: '10', + paddingVertical: '5', + borderRadius: '3', + }, + buttonText: { + fontWeight: 'bold', + color: 'white', + textTransform: 'uppercase', + fontSize: '14', + }, +}); +``` + +
+ + + +
+ +## 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. + +
+ +```jsx +import * as React from 'react'; +import { + NativeBaseProvider, + Box, + HStack, + VStack, + Text, + Pressable, + Image, +} from 'native-base'; + +export function UtilityFirstExample() { + return ( + + + + + + + Today @ 9PM + + + Let's talk about avatar! + + + + + Remind me + + + + Aang flying and surrounded by clouds + + + + ); +} +``` + +
+ +The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](v-stack), [HStack](h-stack) components. This approach allows us to style components without using StyleSheet API. + +Apart from productivity boost and saving time there are other benefits by styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming them. + +Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. + +Once you start writing styles this way, any other way will feel cumbersome. + +> Put simply, utility first approach opens up the Avatar state within developers. + +
+ aang transitioning to avatar state +
+ +
+ +Once you had a cup of tea, let's proceed to the next section! + +
+
+ +
+ uncle iroh holding cup of tea + +
diff --git a/versioned_docs/version-3.2.2/utilityProps.md b/versioned_docs/version-3.2.2/utilityProps.md new file mode 100644 index 000000000..adefc73eb --- /dev/null +++ b/versioned_docs/version-3.2.2/utilityProps.md @@ -0,0 +1,675 @@ +--- +id: utility-props +title: Utility Props +--- + +Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components. + +## Style Props + +The following table shows a list of every style prop and the properties within each group. + +### Margin and padding + +```SnackPlayer name=Margin%20and%20padding +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* 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 */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Key | +| ----------------- | ------------------------------ | --------- | +| m, margin | margin | space | +| mt, marginTop | margin-top | space | +| mr, marginRight | margin-right | space | +| mb, marginBottom | margin-bottom | space | +| ml, marginLeft | margin-left | space | +| mx | margin-left and margin-right | space | +| my | margin-top and margin-bottom | space | +| p, padding | padding | space | +| pt, paddingTop | padding-top | space | +| pr, paddingRight | padding-right | space | +| pb, paddingBottom | padding-bottom | space | +| pl, paddingLeft | padding-left | space | +| px | padding-left and padding-right | space | +| py | padding-top and padding-bottom | space | + +### Color and background color + +```SnackPlayer name=Color%20and%20background%20COolor +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + <> + {/* raw CSS color value */} + + {/* picks up a nested color value using dot notation */} + {/* => `theme.colors.lightBlue[300]` */} + + {/* using theme colors to set text color */} + + {' '} + I love NativeBase + + + {/* verbose prop */} + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| -------------- | ---------------- | --------- | +| color | color | colors | +| bg, background | background | colors | +| bgColor | background-color | colors | +| opacity | opacity | - | + +

+ +:::tip Note + +Above props can be written in the format: {color}:alpha.{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) + +::: + +
+ +```SnackPlayer name=Alpha%20Opacity%20Usage + +import React from "react" +import { HStack, Stack, Center, NativeBaseProvider } from "native-base" +export function Example() { + return ( + + +
+ Box 1 +
+
+ Box 2 +
+
+ Box 3 +
+ + + ) +} + +export default () => { + return ( + +
+ +
+ + ) +} + +``` + +### Typography + +```SnackPlayer name=Typography +import React from 'react'; +import { Text as NBText, NativeBaseProvider, Center } from 'native-base'; + +const Text = (props) => { + return +} + +function Component() { + return ( + <> + { /* font-size of `theme.fontSizes.2xl` */ } + Thank You + { /* text decoration `underline` */ } + Merci Beaucoup + { /* font-size `'2em'` */ } + { /* font-weight of `theme.fontWeights.semibold i.e. 600` */ } + Danke sehr + { /* letter-spacing `0.1 em` */ } + Arigatou + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| -------------- | --------------- | -------------- | +| fontFamily | font-family | fonts | +| fontSize | font-size | fontSizes | +| fontWeight | font-weight | fontWeights | +| lineHeight | line-height | lineHeights | +| letterSpacing | letter-spacing | letterSpacings | +| textAlign | text-align | - | +| fontStyle | font-style | - | +| textTransform | text-transform | - | +| textDecoration | text-decoration | - | + +### Layout, width and height + +```SnackPlayer name=Layout,%20width%20and%20height +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* verbose */ } + + { /* shorthand */ } + + { /* use boxSizing */ } + + { /* width `50%` */ } + + { /* width `256px` h="8" */ } + + { /* width `"40px"` */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| --------------- | --------------- | --------- | +| w, width | width | sizes | +| h, height | height | sizes | +| minW, minWidth | min-width | sizes | +| maxW, maxWidth | max-width | sizes | +| minH, minHeight | min-height | sizes | +| maxH, maxHeight | max-height | sizes | +| d, display | display | - | +| boxSize | width, height | sizes | +| verticalAlign | vertical-align | - | +| overflow | overflow | - | +| overflowX | overflowX | - | +| overflowY | overflowY | - | + +### Flexbox + +```SnackPlayer name=Flexbox +import React from 'react'; +import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* verbose */ } + + + + + + { /* shorthand using the `Flex` component */ } + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| ----------------------------------- | --------------- | --------- | +| alignItems, \*align | align-items | - | +| alignContent | align-content | - | +| justifyItems | justify-items | - | +| justifyContent, \*justify | justify-content | - | +| flexWrap, \*wrap | flex-wrap | - | +| flexDirection, flexDir, \*direction | flex-direction | - | +| flex | flex | - | +| flexGrow | flex-grow | - | +| flexShrink | flex-shrink | - | +| flexBasis | flex-basis | - | +| justifySelf | justify-self | - | +| alignSelf | align-self | - | +| order | order | - | + +### Borders + +```SnackPlayer name=Borders +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + <> + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eququivalent | Theme Field | +| ----------------- | ------------------- | ------------ | +| borderWidth | border-width | borderWidths | +| borderStyle | border-style | borderStyles | +| borderColor | border-color | colors | +| borderTop | border-top | borders | +| borderTopWidth | border-top-width | borderWidths | +| borderTopStyle | border-top-style | borderStyles | +| borderTopColor | border-top-color | colors | +| borderRight | border-right | borders | +| borderRightWidth | border-right-width | borderWidths | +| borderRightStyle | border-right-style | borderStyles | +| borderRightColor | border-right-color | colors | +| borderBottom | border-bottom | borders | +| borderBottomWidth | border-bottom-width | borderWidths | +| borderBottomStyle | border-bottom-style | borderStyles | +| borderBottomColor | border-bottom-color | colors | +| borderLeft | border-left | borders | +| borderLeftWidth | border-left-width | borderWidths | +| borderLeftStyle | border-left-style | borderStyles | +| borderLeftColor | border-left-color | colors | + +### Borders Radius + +```SnackPlayer name=Borders%20Radius +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* picks up a nested radius value using dot notation */ } + { /* => `theme.radius.md` */ } + + + { /* partial border radius */ } + + { /* absolute value prop */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eququivalent | Theme Field | +| ----------------------- | ------------------------------------------------------ | ----------- | +| borderRadius | border-radius | radii | +| borderTopLeftRadius | border-top-left-radius | radii | +| borderTopRightRadius | border-top-right-radius | radii | +| borderBottomRightRadius | border-bottom-right-radius | radii | +| borderBottomLeftRadius | border-bottom-left-radius | radii | +| borderTopRadius | border-top-left-radius & border-top-right-radius | radii | +| borderRightRadius | border-top-right-radius & border-bottom-right-radius | radii | +| borderBottomRadius | border-bottom-left-radius & border-bottom-right-radius | radii | +| borderLeftRadius | border-top-left-radius & border-bottom-left-radius | radii | + +### Position + +```SnackPlayer name=Position +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +
+ +| Prop | CSS Equivalent | Theme Field | +| ------------ | -------------- | ----------- | +| pos,position | position | - | +| zIndex | z-index | zIndices | +| top | top | space | +| right | right | space | +| bottom | bottom | space | +| left | left | space | + +### Shadow + +```SnackPlayer name=Shadow +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* => `theme.shadows.md` */ } + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Field | +| ------ | -------------- | ----------- | +| shadow | box-shadow | shadows | + +## Underscore Props + +### Internal Props + +Provides a way to pass props to child components inside Composite componets. + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| ------- | -------------------------- | -------------------------------------------------------- | +| \_stack | [IStackProps](stack#props) | Passed props will be provided to [`Stack`](stack) child. | +| \_text | [ITextProps](text#props) | Passed props will be provided to [`Text`](text) child. | + +### Interaction Props + +Provides a way to pass props on certain interaction. + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| ---------- | ----------------------- | ----------------------------------------------- | +| \_disabled | _Same as the component_ | Passed props will be applied on disabled state. | +| \_focus | _Same as the component_ | Passed props will be applied on focused state. | +| \_hover | _Same as the component_ | Passed props will be applied on hovered state. | +| \_invalid | _Same as the component_ | Passed props will be applied on invalid state. | +| \_pressed | _Same as the component_ | Passed props will be applied on pressed state. | + +### Platform Props + +Provides a way to pass props bassed on Platform (_android, ios or web_). + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| --------- | ----------------------- | ---------------------------------------- | +| \_android | _Same as the component_ | Passed props will be applied on android. | +| \_ios | _Same as the component_ | Passed props will be applied on ios. | +| \_web | _Same as the component_ | Passed props will be applied on web. | diff --git a/versioned_docs/version-3.2.2/utilityPropsSpecificity.md b/versioned_docs/version-3.2.2/utilityPropsSpecificity.md new file mode 100644 index 000000000..9c7e1a053 --- /dev/null +++ b/versioned_docs/version-3.2.2/utilityPropsSpecificity.md @@ -0,0 +1,55 @@ +--- +id: utility-props-specificity +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. + +- 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 { + ... + px: 4, + py: 2, + ... + } + ``` + + 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 { + ... + px: 4, + py: 2, + ... + } + +``` +In the above example, what do you think should be the padding of the rendered Input component? + +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 }`. + + + + + diff --git a/versioned_docs/version-3.2.2/view.md b/versioned_docs/version-3.2.2/view.md new file mode 100644 index 000000000..8f1a9f415 --- /dev/null +++ b/versioned_docs/version-3.2.2/view.md @@ -0,0 +1,18 @@ +--- +id: view +title: View +--- + +The most fundamental component for building a UI. + +## Example + +```ComponentSnackPlayer path=components,basic,View,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,View,View.tsx showStylingProps=true + +``` diff --git a/versioned_sidebars/version-3.2.2-sidebars.json b/versioned_sidebars/version-3.2.2-sidebars.json new file mode 100644 index 000000000..6071a1a77 --- /dev/null +++ b/versioned_sidebars/version-3.2.2-sidebars.json @@ -0,0 +1,680 @@ +{ + "version-3.2.2/componentsSidebar": [ + { + "collapsed": false, + "type": "category", + "label": "Introduction", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/getting-started" + }, + { + "type": "doc", + "id": "version-3.2.2/installation" + }, + { + "type": "doc", + "id": "version-3.2.2/setup-provider" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Core concepts", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/utility-first" + }, + { + "type": "doc", + "id": "version-3.2.2/utility-props-specificity" + }, + { + "type": "doc", + "id": "version-3.2.2/design-tokens" + }, + { + "type": "doc", + "id": "version-3.2.2/pseudo-props" + }, + { + "type": "doc", + "id": "version-3.2.2/pseudo-props-101" + }, + { + "type": "doc", + "id": "version-3.2.2/responsive-style" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Features", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/utility-props" + }, + { + "type": "doc", + "id": "version-3.2.2/color-mode" + }, + { + "type": "doc", + "id": "version-3.2.2/nativebase-factory" + }, + { + "type": "doc", + "id": "version-3.2.2/safe-area-view-props" + }, + { + "type": "doc", + "id": "version-3.2.2/strict-mode" + }, + { + "type": "doc", + "id": "version-3.2.2/accessibility" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Theme", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/default-theme" + }, + { + "type": "doc", + "id": "version-3.2.2/customizing-theme" + }, + { + "type": "doc", + "id": "version-3.2.2/customizing-fonts" + }, + { + "type": "doc", + "id": "version-3.2.2/customizing-components" + }, + { + "type": "doc", + "id": "version-3.2.2/dark-mode" + }, + { + "type": "doc", + "id": "version-3.2.2/breakpoints" + }, + { + "type": "doc", + "id": "version-3.2.2/theme" + }, + { + "type": "doc", + "id": "version-3.2.2/typescript" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Layout", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/box" + }, + { + "type": "doc", + "id": "version-3.2.2/center" + }, + { + "type": "doc", + "id": "version-3.2.2/container" + }, + { + "type": "doc", + "id": "version-3.2.2/flex" + }, + { + "type": "doc", + "id": "version-3.2.2/h-stack" + }, + { + "type": "doc", + "id": "version-3.2.2/stack" + }, + { + "type": "doc", + "id": "version-3.2.2/v-stack" + }, + { + "type": "doc", + "id": "version-3.2.2/z-stack" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Forms", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/button" + }, + { + "type": "doc", + "id": "version-3.2.2/pressable" + }, + { + "type": "doc", + "id": "version-3.2.2/checkbox" + }, + { + "type": "doc", + "id": "version-3.2.2/form-control" + }, + { + "type": "doc", + "id": "version-3.2.2/icon-button" + }, + { + "type": "doc", + "id": "version-3.2.2/input" + }, + { + "type": "doc", + "id": "version-3.2.2/link" + }, + { + "type": "doc", + "id": "version-3.2.2/radio" + }, + { + "type": "doc", + "id": "version-3.2.2/select" + }, + { + "type": "doc", + "id": "version-3.2.2/slider" + }, + { + "type": "doc", + "id": "version-3.2.2/switch" + }, + { + "type": "doc", + "id": "version-3.2.2/textarea" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Data Display", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/badge" + }, + { + "type": "doc", + "id": "version-3.2.2/divider" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Feedback", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/alert" + }, + { + "type": "doc", + "id": "version-3.2.2/progress" + }, + { + "type": "doc", + "id": "version-3.2.2/spinner" + }, + { + "type": "doc", + "id": "version-3.2.2/toast" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Typography", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/text" + }, + { + "type": "doc", + "id": "version-3.2.2/heading" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Overlay", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/alert-dialog" + }, + { + "type": "doc", + "id": "version-3.2.2/menu" + }, + { + "type": "doc", + "id": "version-3.2.2/modal" + }, + { + "type": "doc", + "id": "version-3.2.2/popover" + }, + { + "type": "doc", + "id": "version-3.2.2/tooltip" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Disclosure", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/action-sheet" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Media and Icons", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/avatar" + }, + { + "type": "doc", + "id": "version-3.2.2/icon" + }, + { + "type": "doc", + "id": "version-3.2.2/image" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Transition", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/presence-transition" + }, + { + "type": "doc", + "id": "version-3.2.2/slide" + }, + { + "type": "doc", + "id": "version-3.2.2/stagger" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Others", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/FAB" + }, + { + "type": "doc", + "id": "version-3.2.2/hidden" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "ReactNative Components", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/scrollview" + }, + { + "type": "doc", + "id": "version-3.2.2/view" + }, + { + "type": "doc", + "id": "version-3.2.2/keyboard-avoiding-view" + }, + { + "type": "doc", + "id": "version-3.2.2/status-bar" + }, + { + "type": "doc", + "id": "version-3.2.2/flat-list" + }, + { + "type": "doc", + "id": "version-3.2.2/section-list" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Hooks", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/use-disclosure" + }, + { + "type": "doc", + "id": "version-3.2.2/use-breakPoint-value" + }, + { + "type": "doc", + "id": "version-3.2.2/use-clipboard" + }, + { + "type": "doc", + "id": "version-3.2.2/use-media-query" + }, + { + "type": "doc", + "id": "version-3.2.2/use-theme" + }, + { + "type": "doc", + "id": "version-3.2.2/use-token" + }, + { + "type": "doc", + "id": "version-3.2.2/use-color-mode" + }, + { + "type": "doc", + "id": "version-3.2.2/use-color-mode-value" + }, + { + "type": "doc", + "id": "version-3.2.2/use-contrast-text" + }, + { + "type": "doc", + "id": "version-3.2.2/use-accessible-colors" + } + ] + }, + { + "type": "doc", + "id": "version-3.2.2/testing" + }, + { + "collapsed": false, + "type": "category", + "label": "Examples", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/todo-example" + }, + { + "type": "doc", + "id": "version-3.2.2/kitchen-sink" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Recipes", + "items": [ + { + "collapsed": true, + "type": "category", + "label": "Designs", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/building-app-bar" + }, + { + "type": "doc", + "id": "version-3.2.2/building-card" + }, + { + "type": "doc", + "id": "version-3.2.2/building-drawer-navigation" + }, + { + "type": "doc", + "id": "version-3.2.2/building-tab-view" + }, + { + "type": "doc", + "id": "version-3.2.2/building-swipe-list" + } + ] + }, + { + "collapsed": true, + "type": "category", + "label": "Forms", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/form" + }, + { + "type": "doc", + "id": "version-3.2.2/login-signup-forms" + }, + { + "type": "doc", + "id": "version-3.2.2/building-search-bar" + } + ] + }, + { + "collapsed": true, + "type": "category", + "label": "Layout", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/app-drawer" + }, + { + "type": "doc", + "id": "version-3.2.2/building-footer-tabs" + } + ] + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Migration", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/migration/migration-guide-three" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/migration-guide-three-point-two" + }, + { + "collapsed": true, + "type": "category", + "label": "Components Migration", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/migration/action-sheet" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/badge" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/button" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/card" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/checkbox" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/date-picker" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/deck-swiper" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/drawer" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/FABs" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/footer-tab" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/form" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/header" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/icon" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/layout" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/picker" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/radio-button" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/search-bar" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/segment" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/spinner" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/swipe-list" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/tabs" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/thumbnail" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/toast" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/typography" + } + ] + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "More", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/changelog" + }, + { + "type": "doc", + "id": "version-3.2.2/faq" + } + ] + }, + { + "type": "doc", + "id": "version-3.2.2/more-props" + }, + { + "type": "doc", + "id": "version-3.2.2/install-expo" + }, + { + "type": "doc", + "id": "version-3.2.2/install-rn" + }, + { + "type": "doc", + "id": "version-3.2.2/install-cra" + }, + { + "type": "doc", + "id": "version-3.2.2/install-next" + } + ] +} diff --git a/versions.json b/versions.json index f5878ada0..570fd2613 100644 --- a/versions.json +++ b/versions.json @@ -1,4 +1,5 @@ [ + "3.2.2", "3.2.1", "3.1.0", "3.0.7", diff --git a/yarn.lock b/yarn.lock index 043b018e8..fb0045ebd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1454,6 +1454,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.8.7": + version "7.16.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5" + integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4", "@babel/template@^7.12.7": version "7.12.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc" @@ -1972,6 +1979,45 @@ url "^0.11.0" webpack-sources "^1.4.3" +"@formatjs/ecma402-abstract@1.10.0": + version "1.10.0" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.10.0.tgz#f51b9167535c9463113c24644de90262aa5d31a7" + integrity sha512-WNkcUHC6xw12rWY87TUw6KXzb1LnOooYBLLqtyn1kW2j197rcwpqmUOJMBED56YcLzaJPfVw1L2ShiDhL5pVnQ== + dependencies: + "@formatjs/intl-localematcher" "0.2.21" + tslib "^2.1.0" + +"@formatjs/fast-memoize@1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.0.tgz#1123bfcc5d21d761f15d8b1c32d10e1b6530355d" + integrity sha512-fObitP9Tlc31SKrPHgkPgQpGo4+4yXfQQITTCNH8AZdEqB7Mq4nPrjpUL/tNGN3lEeJcFxDbi0haX8HM7QvQ8w== + dependencies: + tslib "^2.1.0" + +"@formatjs/icu-messageformat-parser@2.0.14": + version "2.0.14" + resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.14.tgz#d794af24e4896f4d2b400e28c25b1ba72604c106" + integrity sha512-M79MdUMLnfLK8eMrznUwke6afH9G/eOQeYvMUJ7uElXIL+//PyyjOzb42hAYfDAGYsAcKA2TsUo33Yuy2lE4AQ== + dependencies: + "@formatjs/ecma402-abstract" "1.10.0" + "@formatjs/icu-skeleton-parser" "1.3.1" + tslib "^2.1.0" + +"@formatjs/icu-skeleton-parser@1.3.1": + version "1.3.1" + resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.1.tgz#02ad3209cb518096b830582068a322fee050adcf" + integrity sha512-WdPNjhv9e7EfyrIVYk6hN6/mC9YF+PcfFViDI2kATwoi1uKHr+AkQCMoNrWyCDdUQ+Dn50mQOlrEkCBXoLrkPQ== + dependencies: + "@formatjs/ecma402-abstract" "1.10.0" + tslib "^2.1.0" + +"@formatjs/intl-localematcher@0.2.21": + version "0.2.21" + resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.21.tgz#39ef33d701fe8084f3d693cd3ff7cbe03cdd3a49" + integrity sha512-JTJeLiNwexN4Gy0cMxoUPvJbKhXdnSuo5jPrDafEZpnDWlJ5VDYta8zUVVozO/pwzEmFVHEUpgiEDj+39L4oMg== + dependencies: + tslib "^2.1.0" + "@fullhuman/postcss-purgecss@^3.1.3": version "3.1.3" resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339" @@ -1999,6 +2045,14 @@ "@babel/runtime" "^7.6.2" intl-messageformat "^2.2.0" +"@internationalized/message@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.0.2.tgz#c3db2b6b7f75af815819f77da11f8424381416e3" + integrity sha512-ZZ8FQDCsri3vUB2mfDD76Vbf97DH361AiZUXKHV4BqwCtYyaNYiZqIr8KXrcMCxJvrIYVQLSn8+jeIQRO3bvtw== + dependencies: + "@babel/runtime" "^7.6.2" + intl-messageformat "^9.6.12" + "@internationalized/number@^3.0.0": version "3.0.0" resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.0.0.tgz#aa3618ddb82ab0e9a09e8dcc3d5359a6935e6db2" @@ -2006,6 +2060,13 @@ dependencies: "@babel/runtime" "^7.6.2" +"@internationalized/number@^3.0.2": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.0.3.tgz#d29003dffdff54ca6f2287ec0cb77ff3d045478f" + integrity sha512-ewFoVvsxSyd9QZnknvOWPjirYqdMQhXTeDhJg3hM6C/FeZt0banpGH1nZ0SGMZXHz8NK9uAa2KVIq+jqAIOg4w== + dependencies: + "@babel/runtime" "^7.6.2" + "@mdx-js/mdx@^1.6.21": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba" @@ -2155,6 +2216,18 @@ "@react-aria/utils" "^3.8.0" "@react-types/shared" "^3.6.0" +"@react-aria/i18n@^3.3.2": + version "3.3.2" + resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.3.2.tgz#891902938333c6ab5491b7acb7581f8567045dbc" + integrity sha512-a4AptbWLPVMJfjPdyW60TFtT4gvKAputx9YaUrIywoV/5p900AcOOc3uuL43+vuCKBzMkGUeTa1a4eL1HstDUA== + dependencies: + "@babel/runtime" "^7.6.2" + "@internationalized/message" "^3.0.2" + "@internationalized/number" "^3.0.2" + "@react-aria/ssr" "^3.0.3" + "@react-aria/utils" "^3.8.2" + "@react-types/shared" "^3.8.0" + "@react-aria/interactions@^3.3.2", "@react-aria/interactions@^3.4.0": version "3.4.0" resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.4.0.tgz#0243947c962811314852399ebc0d9f663eb3b762" @@ -2164,6 +2237,15 @@ "@react-aria/utils" "^3.8.0" "@react-types/shared" "^3.6.0" +"@react-aria/interactions@^3.5.1": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.6.0.tgz#63c16e6179e8ae38221e26256d9a7639d7f9b24e" + integrity sha512-dMEGYIIhJ3uxDd19Z/rxuqQp9Rx9c46AInrfzAiOijQj/fTmb4ubCsuFOAQrc0sy1HCY1/ntnRZQuRgT/iS74w== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/utils" "^3.9.0" + "@react-types/shared" "^3.9.0" + "@react-aria/label@^3.1.1", "@react-aria/label@^3.1.2": version "3.1.2" resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.1.2.tgz#3ed367f1e7fcf67304eaefc5202ec027bea27a1b" @@ -2215,7 +2297,7 @@ "@react-types/menu" "^3.1.1" "@react-types/shared" "^3.6.0" -"@react-aria/overlays@^3.6.0", "@react-aria/overlays@^3.6.1", "@react-aria/overlays@^3.6.3": +"@react-aria/overlays@^3.6.1", "@react-aria/overlays@^3.6.3": version "3.6.3" resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.6.3.tgz#e739bf1f3ed03762bb78701ad74faafac9ddce03" integrity sha512-7Czpl8UHwWLtwvBysrtlTK271+0mmr3GiBDA1mvG7XwAQiliYxHhvFhXn7tUa8tUneU5YhtVrAyiovja58sa3A== @@ -2230,6 +2312,21 @@ "@react-types/overlays" "^3.4.0" dom-helpers "^3.3.1" +"@react-aria/overlays@^3.7.0": + version "3.7.2" + resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.7.2.tgz#dca7693c0ec31371b19c2f51b482f03819b8c391" + integrity sha512-KAurJ5MJRnXCPRrO1OdAaXz253cwO5VOOp8wx3/40Zm05o5FBA15ZJZT6BD8rZQOKMCAjkI76tiZQeMQtDULcQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/i18n" "^3.3.2" + "@react-aria/interactions" "^3.5.1" + "@react-aria/utils" "^3.8.2" + "@react-aria/visually-hidden" "^3.2.3" + "@react-stately/overlays" "^3.1.3" + "@react-types/button" "^3.4.1" + "@react-types/overlays" "^3.5.1" + dom-helpers "^3.3.1" + "@react-aria/radio@^3.1.2": version "3.1.4" resolved "https://registry.yarnpkg.com/@react-aria/radio/-/radio-3.1.4.tgz#ea2ba8a5275c15a7ba7cb6c91fae4fe2397a223d" @@ -2274,6 +2371,13 @@ "@react-types/radio" "^3.1.1" "@react-types/slider" "^3.0.1" +"@react-aria/ssr@^3.0.1", "@react-aria/ssr@^3.0.3", "@react-aria/ssr@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.0.tgz#b7163e6224725c30121932a8d1422ef91d1fab22" + integrity sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/ssr@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.0.2.tgz#f96a41a7314a60324b6de871cb872039b63be5c0" @@ -2322,6 +2426,17 @@ "@react-types/shared" "^3.6.0" "@react-types/switch" "^3.1.1" +"@react-aria/utils@^3.3.0", "@react-aria/utils@^3.8.2", "@react-aria/utils@^3.9.0": + version "3.9.0" + resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.9.0.tgz#c5446f807091a744311d4d559fa8a42e7448824d" + integrity sha512-P0dEOMHGHHJ5KC8iCpaMxAtgdUdeISAm4FZnmoD5fK3JxlKEC046hUxlad83RkNOBZkT2dDvF4HeDCUqdMWHKQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/ssr" "^3.1.0" + "@react-stately/utils" "^3.2.2" + "@react-types/shared" "^3.9.0" + clsx "^1.1.1" + "@react-aria/utils@^3.4.1", "@react-aria/utils@^3.6.0", "@react-aria/utils@^3.8.0": version "3.8.0" resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.8.0.tgz#57bdc7cc967773c7f55b29847b187ec45031a620" @@ -2343,6 +2458,16 @@ "@react-aria/utils" "^3.8.0" clsx "^1.1.1" +"@react-aria/visually-hidden@^3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.2.3.tgz#4779df0a468873550afb42a7f5fcb2411d82db8d" + integrity sha512-iAe5EFI7obEOwTnIdAwWrKq+CrIJFGTw85v8fXnQ7CIVGRDblX85GOUww9bzQNPDLLRYWS4VF702ii8kV4+JCw== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/interactions" "^3.5.1" + "@react-aria/utils" "^3.8.2" + clsx "^1.1.1" + "@react-native-aria/button@^0.2.4": version "0.2.4" resolved "https://registry.yarnpkg.com/@react-native-aria/button/-/button-0.2.4.tgz#ce0c994449011f4b852a222afd90e027fb839de0" @@ -2407,15 +2532,17 @@ "@react-types/listbox" "^3.1.1" "@react-types/shared" "^3.4.0" -"@react-native-aria/overlays@^0.2.9": - version "0.2.11" - resolved "https://registry.yarnpkg.com/@react-native-aria/overlays/-/overlays-0.2.11.tgz#6dbffef9fa83f72b702c56238feba25bd9351c08" - integrity sha512-wLCTXeVRkMNKJZIadLVpEI2TGV/iVPM0sby9HCovovC/TVs7avEccpNvaU3qL9//GRkLKwTVWcfG9BQ4sf8QPA== +"@react-native-aria/overlays@^0.3.2": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@react-native-aria/overlays/-/overlays-0.3.2.tgz#fe3fb983b197738237493c3e5af6b30f6da6be9d" + integrity sha512-sc2attCn+stKugBF8ZBz+EIdGoEHU/+NbJc5agS6lZWeemXL5LcgomNf6Tn7RUlpLfWOTEGBQOAiOZxjZnIQmQ== dependencies: - "@react-aria/overlays" "^3.6.0" + "@react-aria/interactions" "^3.3.2" + "@react-aria/overlays" "^3.7.0" "@react-native-aria/utils" "^0.2.6" "@react-stately/overlays" "^3.1.1" "@react-types/overlays" "^3.4.0" + dom-helpers "^5.0.0" "@react-native-aria/radio@^0.2.4": version "0.2.5" @@ -2469,6 +2596,24 @@ resolved "https://registry.yarnpkg.com/@react-native-aria/utils/-/utils-0.2.7.tgz#53d1f4a44cad382bd9d1a6b5af6cb86624e70f76" integrity sha512-mozajHovHHYjNY28j5lrIzUQ3p3mQ7EnaKlukd0EuSaAwBboPQ1sVK9ToxPLyyixkxGe4pxy+br5ahzd6wlf5Q== +"@react-native-aria/utils@^0.2.8": + version "0.2.8" + resolved "https://registry.yarnpkg.com/@react-native-aria/utils/-/utils-0.2.8.tgz#da433606506125483080f18dbcd97b526ca46fd5" + integrity sha512-x375tG1itv3irLFRnURLsdK2djuvhFJHizSDUtLCo8skQwfjslED5t4sUkQ49di4G850gaVJz0fCcCx/pHX7CA== + dependencies: + "@react-aria/ssr" "^3.0.1" + "@react-aria/utils" "^3.3.0" + +"@react-stately/checkbox@^3.0.1": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.0.3.tgz#18ee6bd3b544334b6f853bb5c5f7017ac3bb9c37" + integrity sha512-amT889DTLdbjAVjZ9j9TytN73PszynGIspKi1QSUCvXeA2OVyCwShxhV0Pn7yYX8cMinvGXrjhWdhn0nhYeMdg== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/toggle" "^3.2.3" + "@react-stately/utils" "^3.2.2" + "@react-types/checkbox" "^3.2.3" + "@react-stately/checkbox@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.0.2.tgz#e42943365e5082c121a36df5b1dc6f367cabc3ec" @@ -2479,6 +2624,14 @@ "@react-stately/utils" "^3.2.1" "@react-types/checkbox" "^3.2.1" +"@react-stately/collections@^3.3.0", "@react-stately/collections@^3.3.3": + version "3.3.4" + resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.3.4.tgz#ca9e481d2769dbebb593d5a1ed4bcc54013aef9d" + integrity sha512-HnlQip9RH+3nGNh8U2U1YkCdA+zGSedQLWVCdR53w/n6To7kIp7yDLby5dkmP+9VGQEkyfsoSjwGJ1NF94CCZg== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-types/shared" "^3.8.0" + "@react-stately/collections@^3.3.2": version "3.3.2" resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.3.2.tgz#35faeb24671a4782603ba9a6403ac36836d5a34a" @@ -2522,6 +2675,17 @@ "@react-stately/utils" "^3.2.1" "@react-types/shared" "^3.6.0" +"@react-stately/list@^3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@react-stately/list/-/list-3.3.0.tgz#64ab3a507aa3ef03a8f3afc9f8d0bde0c79efd81" + integrity sha512-vp/+5C6ZTy6an0WqR/o0tr3wEbRFeFnZZcGseQps036Ir3XzWMs6CvdwfXCIWiZ03nOQPRvy8GbF8j1Qj4voYQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/collections" "^3.3.3" + "@react-stately/selection" "^3.7.0" + "@react-stately/utils" "^3.2.2" + "@react-types/shared" "^3.8.0" + "@react-stately/menu@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-stately/menu/-/menu-3.2.2.tgz#2f3e4dc65f32d7464fb09d9cbb68e05366ba029f" @@ -2542,6 +2706,15 @@ "@react-stately/utils" "^3.2.1" "@react-types/overlays" "^3.2.1" +"@react-stately/overlays@^3.1.3": + version "3.1.3" + resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.1.3.tgz#b0bb4061c1b20e712dfc32c933ae4bb23e5ccc0e" + integrity sha512-X8H/h9F8ZjevwJ7P8ak7v500qQd5x4Y76LsXUXrR6LtcO8FXfp2I+W8sGmBtLZwLQpTJiF1U0WMQqXLE1g6eLA== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/utils" "^3.2.2" + "@react-types/overlays" "^3.5.1" + "@react-stately/radio@^3.2.1", "@react-stately/radio@^3.3.1": version "3.3.1" resolved "https://registry.yarnpkg.com/@react-stately/radio/-/radio-3.3.1.tgz#8a2dbaf3b462644348d16cc1957983f7e3c676a2" @@ -2575,6 +2748,16 @@ "@react-stately/utils" "^3.2.1" "@react-types/shared" "^3.6.0" +"@react-stately/selection@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@react-stately/selection/-/selection-3.7.0.tgz#a1bab8e7bc589ce20d8160ce2eb77cc606ded581" + integrity sha512-SfYFCBx8VAEvo24tUp738bl12NiFKg8M+VUy9UeI/M5uJSScXB/F8NLGPjaDpkRD2qGJ5BEYGzD39I3eBu3EcQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/collections" "^3.3.3" + "@react-stately/utils" "^3.2.2" + "@react-types/shared" "^3.8.0" + "@react-stately/slider@^3.0.1", "@react-stately/slider@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@react-stately/slider/-/slider-3.0.2.tgz#11be662c71cf82ad5727b188ea51d16e67a874c9" @@ -2606,6 +2789,16 @@ "@react-stately/utils" "^3.2.0" "@react-types/tabs" "3.0.0-alpha.2" +"@react-stately/tabs@^3.0.0-alpha.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@react-stately/tabs/-/tabs-3.0.1.tgz#7df000f8c5c14b3bf973348c491e12bcfcafe49d" + integrity sha512-XhF/5mt8eme3mu0+4nC7Du+e5OWSu0W8SeKfbH9JmTWTCayZpPtui68nRStJK6OkgHs28gA+j55RSsTqT/N1Fg== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/list" "^3.3.0" + "@react-stately/utils" "^3.2.2" + "@react-types/tabs" "^3.0.1" + "@react-stately/toggle@^3.2.1", "@react-stately/toggle@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.2.2.tgz#d5ee9494eb23a937dee3399af007d7d058585cb0" @@ -2616,6 +2809,16 @@ "@react-types/checkbox" "^3.2.1" "@react-types/shared" "^3.6.0" +"@react-stately/toggle@^3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.2.3.tgz#a4de6edc16982990492c6c557e5194f46dacc809" + integrity sha512-p5eVjXwNo4y4CeybxfjYmbTzNMNiI67uspbRAJnawWBVWw8X+yIvRfpjYAsqmvsJ+DsvwybSTlQDT6taGoWEsA== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/utils" "^3.2.2" + "@react-types/checkbox" "^3.2.3" + "@react-types/shared" "^3.8.0" + "@react-stately/tree@^3.1.4": version "3.1.4" resolved "https://registry.yarnpkg.com/@react-stately/tree/-/tree-3.1.4.tgz#58b55af38743fa1d903a07e16684c8df8fb2d011" @@ -2634,6 +2837,13 @@ dependencies: "@babel/runtime" "^7.6.2" +"@react-stately/utils@^3.2.2": + version "3.2.2" + resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.2.2.tgz#468eafa60740c6b0b847a368215dfaa55e87f505" + integrity sha512-7NCpRMAexDdgVqbrB9uDrkDpM4Tdw5BU6Gu6IKUXmKsoDYziE6mAjaGkCZBitsrln1Cezc6euI5YPa1JqxgpJg== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/virtualizer@^3.1.4": version "3.1.4" resolved "https://registry.yarnpkg.com/@react-stately/virtualizer/-/virtualizer-3.1.4.tgz#d6dccbb3f82b719a77cf8484fa397f7fb93a6c8c" @@ -2650,6 +2860,13 @@ dependencies: "@react-types/shared" "^3.4.0" +"@react-types/button@^3.4.1": + version "3.4.1" + resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.4.1.tgz#715ac9d4997c79233be4d9020b58f85936b8252b" + integrity sha512-B54M84LxdEppwjXNlkBEJyMfe9fd+bvFV7R6+NJvupGrZm/LuFNYjFcHk7yjMKWTdWm6DbpIuQz54n5qTW7Vlg== + dependencies: + "@react-types/shared" "^3.8.0" + "@react-types/checkbox@^3.2.1", "@react-types/checkbox@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.2.2.tgz#7182d44a533e2ffd2c9118372cbc2c33b006eb18" @@ -2657,6 +2874,13 @@ dependencies: "@react-types/shared" "^3.4.0" +"@react-types/checkbox@^3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.2.3.tgz#2b9d529c55c9884519c7f626f0fe8be7d0f18be1" + integrity sha512-YqeAFyrpaxI/eW6zQ7tVkKIASgzpywRrc6C/rV6Mw0zzGGSSvmYvdOBx9yHOEvpts7dLgaGlmLK6CeG7s4yGKg== + dependencies: + "@react-types/shared" "^3.8.0" + "@react-types/combobox@3.0.0-beta.1": version "3.0.0-beta.1" resolved "https://registry.yarnpkg.com/@react-types/combobox/-/combobox-3.0.0-beta.1.tgz#d41715115e4b0c4ec8882fefceda06e4889f4f00" @@ -2700,6 +2924,13 @@ dependencies: "@react-types/shared" "^3.3.0" +"@react-types/overlays@^3.5.1": + version "3.5.1" + resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.5.1.tgz#35350dfca639d04a8fbd973de59b141450df1b46" + integrity sha512-T3o6wQ5NNm1rSniIa01bIa6fALC8jbwpYxFMaQRrdEpIvwktt0Fi5Xo6/97+oe4HvzzU0JMhtwWDTdRySvgeZw== + dependencies: + "@react-types/shared" "^3.8.0" + "@react-types/radio@^3.1.1": version "3.1.1" resolved "https://registry.yarnpkg.com/@react-types/radio/-/radio-3.1.1.tgz#5b1b11ff3043ac902e8970e49260f2664da80e5e" @@ -2719,6 +2950,11 @@ resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.6.0.tgz#e3f32bdef168de9245648e9f0357930b13795bc2" integrity sha512-oa8m+GP881IUQmi+L0UoM5aC5t/6L6QIEA2I1FUMgwMeJn24qPAcEqYrTWeJzX2S+gAfa5r9qbzcVEgpQorEUw== +"@react-types/shared@^3.8.0", "@react-types/shared@^3.9.0": + version "3.9.0" + resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.9.0.tgz#d834f3e6e2c992089192f3c83fb7963e3a6f5207" + integrity sha512-YYksINfR6q92P10AhPEGo47Hd7oz1hrnZ6Vx8Gsrq62IbqDdv1XOTzPBaj17Z1ymNY2pitLUSEXsLmozt4wxxQ== + "@react-types/slider@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@react-types/slider/-/slider-3.0.1.tgz#b663c06765c5517f5d433e6158ad29d12eeaac4e" @@ -2749,6 +2985,13 @@ dependencies: "@react-types/shared" "^3.2.1" +"@react-types/tabs@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@react-types/tabs/-/tabs-3.0.1.tgz#a32931e95303d4442e51d4c687d4e154654014f6" + integrity sha512-GvPVU9GAqImHFhU+Do+pdGK/vZA4kqA699Gly1V95DUmtdG3GSwTnwlvM/Sy80/F9fKZDGokZnQmBFo8MFZyIw== + dependencies: + "@react-types/shared" "^3.8.0" + "@react-types/textfield@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-types/textfield/-/textfield-3.2.2.tgz#2f310c125df7c4a64a19d7c5064537218f909d38" @@ -3086,13 +3329,6 @@ resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9" integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA== -"@types/styled-system@^5.1.9": - version "5.1.11" - resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.11.tgz#158849f3b14cdf8bf27a10f0cf87a2c3a89eb680" - integrity sha512-R+JxEZYa5T0HD2urViR/mdklVaGhwbNOtDoWWGQ1+z1CGs/gF1UAKCaS//YwsUwterEKpyaKxgaXyFNKF04GCA== - dependencies: - csstype "^3.0.2" - "@types/tapable@*", "@types/tapable@^1.0.5": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74" @@ -5363,6 +5599,14 @@ dom-helpers@^3.3.1: dependencies: "@babel/runtime" "^7.1.2" +dom-helpers@^5.0.0: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-iterator@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad" @@ -7081,6 +7325,15 @@ intl-messageformat@^2.2.0: dependencies: intl-messageformat-parser "1.4.0" +intl-messageformat@^9.6.12: + version "9.9.5" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.9.5.tgz#3a00b93a6830aa09649b37d5ef2d995393b358f5" + integrity sha512-pdKpqhiD0P8yqblu1qetOOL8SnJ62SGdvxwYPvSmuYMN3BawEV5UnJuRcsIwwXYJAGYoICiOJl3gexuuH+RLXw== + dependencies: + "@formatjs/fast-memoize" "1.2.0" + "@formatjs/icu-messageformat-parser" "2.0.14" + tslib "^2.1.0" + ip-regex@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9" @@ -8500,10 +8753,10 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" -native-base@3.2.1: - version "3.2.1" - resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.2.1.tgz#315a1620d5ce5d31f6ae10f7ffa3e0ca28404a0c" - integrity sha512-u39DLFOEh9akDEpCrNZ/uPDZWROffXXxmw6eaqGJ/VmjVv3wjbK6OYf7+4yXWYEU8u1KJ/edZ2iRHQL0KuL8Fg== +native-base@3.2.2: + version "3.2.2" + resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.2.2.tgz#a802875ac68884b4dbd2ad29c341f3f64f1fc3c5" + integrity sha512-QcCjCAHeTXSMlXm9tCc1iYyqPVVvP5hij2VNgFo79GmMjNN6mYHqiiCz0tWKMQM+T4soRXlvrqWWTpo8AlUvQg== dependencies: "@react-aria/focus" "^3.2.3" "@react-aria/utils" "^3.6.0" @@ -8514,15 +8767,19 @@ native-base@3.2.1: "@react-native-aria/focus" "^0.2.4" "@react-native-aria/interactions" "^0.2.2" "@react-native-aria/listbox" "^0.2.4-alpha.3" - "@react-native-aria/overlays" "^0.2.9" + "@react-native-aria/overlays" "^0.3.2" "@react-native-aria/radio" "^0.2.4" "@react-native-aria/slider" "^0.2.5-alpha.1" "@react-native-aria/tabs" "^0.2.7" - "@react-native-aria/utils" "^0.2.7" + "@react-native-aria/utils" "^0.2.8" + "@react-stately/checkbox" "^3.0.1" + "@react-stately/collections" "^3.3.0" "@react-stately/combobox" "^3.0.0-alpha.1" "@react-stately/radio" "^3.2.1" + "@react-stately/slider" "^3.0.1" + "@react-stately/tabs" "^3.0.0-alpha.1" + "@react-stately/toggle" "^3.2.1" "@types/lodash.has" "^4.5.6" - "@types/styled-system" "^5.1.9" lodash.clonedeep "^4.5.0" lodash.get "^4.4.2" lodash.has "^4.5.2" @@ -11993,6 +12250,11 @@ tslib@^2.0.3: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a" integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A== +tslib@^2.1.0: + version "2.3.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" + integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw== + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"