From 5d9743d82145b02666ce28b7351d95cb2154f267 Mon Sep 17 00:00:00 2001 From: amars29 Date: Thu, 21 Oct 2021 12:58:51 +0530 Subject: [PATCH] Updated ButtonGroup content and fixed DrawerNavigation example --- docs/buildingDrawerNavigation.md | 11 ++++------- docs/button.mdx | 10 ++++++++-- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/docs/buildingDrawerNavigation.md b/docs/buildingDrawerNavigation.md index 75fd6fe20..b72651053 100644 --- a/docs/buildingDrawerNavigation.md +++ b/docs/buildingDrawerNavigation.md @@ -9,7 +9,7 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f 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/stack@6.0.2,@react-navigation/drawer@6.1.3,@react-navigation/native@6.0.2,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.4.0,react-native-reanimated@~2.2.0 +```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.4.0,react-native-reanimated@~2.2.0 import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { @@ -34,12 +34,9 @@ import { const Drawer = createDrawerNavigator(); function Component(props) { return ( -
- {props.route.name} Screen - -
+
+ This is {props.route.name} page. +
); } diff --git a/docs/button.mdx b/docs/button.mdx index 9e25eaec8..e0fcee15c 100644 --- a/docs/button.mdx +++ b/docs/button.mdx @@ -10,11 +10,11 @@ The `Button` component is used to trigger an action or event. ## Import ```jsx -import { Button, ButtonGroup } from 'native-base'; +import { Button } from 'native-base'; ``` - **Button** : The button component with support for custom icons, spinners, etc. -- **ButtonGroup** : Used to group buttons whose actions are related, with an option to flush them together. +- **Button.Group** : Used to group buttons whose actions are related, with an option to flush them together. ## Examples @@ -50,6 +50,12 @@ import { Button, ButtonGroup } from 'native-base'; ### 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=primitives,ButtonGroup,basic.tsx ```