├── .editorconfig
├── .eslintrc.json
├── .github
├── ISSUE_TEMPLATE
│ ├── bug_report.yml
│ ├── config.yml
│ └── feature_request.yml
├── auto_assign.yml
├── pull_request_template.md
└── workflows
│ └── build.yml
├── .gitignore
├── .npmignore
├── .nvmrc
├── .prettierrc
├── .vscode
└── settings.json
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── RNBareExample
├── .buckconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .prettierrc.js
├── .watchmanconfig
├── App.tsx
├── _editorconfig
├── android
│ ├── app
│ │ ├── _BUCK
│ │ ├── build.gradle
│ │ ├── build_defs.bzl
│ │ ├── debug.keystore
│ │ ├── proguard-rules.pro
│ │ └── src
│ │ │ ├── debug
│ │ │ ├── AndroidManifest.xml
│ │ │ └── java
│ │ │ │ └── com
│ │ │ │ └── rnbareexample
│ │ │ │ └── ReactNativeFlipper.java
│ │ │ └── main
│ │ │ ├── AndroidManifest.xml
│ │ │ ├── assets
│ │ │ └── fonts
│ │ │ │ ├── Merriweather-Regular.ttf
│ │ │ │ ├── Roboto-Bold.ttf
│ │ │ │ ├── Roboto-Italic.ttf
│ │ │ │ ├── Roboto-Light.ttf
│ │ │ │ ├── Roboto-Medium.ttf
│ │ │ │ └── Roboto-Regular.ttf
│ │ │ ├── java
│ │ │ └── com
│ │ │ │ └── rnbareexample
│ │ │ │ ├── MainActivity.java
│ │ │ │ └── MainApplication.java
│ │ │ └── res
│ │ │ ├── mipmap-hdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ ├── mipmap-mdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ ├── mipmap-xhdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ ├── mipmap-xxhdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ ├── mipmap-xxxhdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ └── values
│ │ │ ├── strings.xml
│ │ │ └── styles.xml
│ ├── build.gradle
│ ├── gradle.properties
│ ├── gradle
│ │ └── wrapper
│ │ │ ├── gradle-wrapper.jar
│ │ │ └── gradle-wrapper.properties
│ ├── gradlew
│ ├── gradlew.bat
│ └── settings.gradle
├── app.json
├── assets
│ └── fonts
│ │ ├── Merriweather-Regular.ttf
│ │ ├── Roboto-Bold.ttf
│ │ ├── Roboto-Italic.ttf
│ │ ├── Roboto-Light.ttf
│ │ ├── Roboto-Medium.ttf
│ │ └── Roboto-Regular.ttf
├── babel.config.js
├── index.js
├── ios
│ ├── Podfile
│ ├── Podfile.lock
│ ├── RNBareExample.xcodeproj
│ │ ├── project.pbxproj
│ │ └── xcshareddata
│ │ │ └── xcschemes
│ │ │ └── RNBareExample.xcscheme
│ ├── RNBareExample.xcworkspace
│ │ ├── contents.xcworkspacedata
│ │ └── xcshareddata
│ │ │ └── IDEWorkspaceChecks.plist
│ ├── RNBareExample
│ │ ├── AppDelegate.h
│ │ ├── AppDelegate.m
│ │ ├── Images.xcassets
│ │ │ ├── AppIcon.appiconset
│ │ │ │ └── Contents.json
│ │ │ └── Contents.json
│ │ ├── Info.plist
│ │ ├── LaunchScreen.storyboard
│ │ └── main.m
│ └── RNBareExampleTests
│ │ ├── Info.plist
│ │ └── RNBareExampleTests.m
├── metro.config.js
├── package.json
├── react-native.config.js
├── tsconfig.json
└── yarn.lock
├── babel.config.js
├── cli.js
├── example
├── .eslintrc.json
├── .nvmrc
├── App.tsx
├── __mocks__
│ ├── @react-native-async-storage
│ │ └── async-storage.js
│ └── globalMock.js
├── app.json
├── assets
│ └── fonts
│ │ ├── Montserrat-Black.ttf
│ │ ├── Montserrat-BlackItalic.ttf
│ │ ├── Montserrat-Bold.ttf
│ │ ├── Montserrat-BoldItalic.ttf
│ │ ├── Montserrat-ExtraBold.ttf
│ │ ├── Montserrat-ExtraBoldItalic.ttf
│ │ ├── Montserrat-Italic.ttf
│ │ ├── Montserrat-Light.ttf
│ │ ├── Montserrat-LightItalic.ttf
│ │ ├── Montserrat-Medium.ttf
│ │ ├── Montserrat-MediumItalic.ttf
│ │ ├── Montserrat-Regular.ttf
│ │ ├── Montserrat-SemiBold.ttf
│ │ ├── Montserrat-SemiBoldItalic.ttf
│ │ ├── Roboto-Bold.ttf
│ │ ├── Roboto-Italic.ttf
│ │ ├── Roboto-Light.ttf
│ │ ├── Roboto-Medium.ttf
│ │ └── Roboto-Regular.ttf
├── babel.config.js
├── jest-android.config.js
├── jest-ios.config.js
├── jest.config.js
├── metro.config.js
├── nativebase.config.ts
├── package.json
├── patches
│ └── core-js+3.6.5.patch
├── scripts
│ └── test.sh
├── storybook
│ ├── addons.ts
│ ├── index.ts
│ ├── rn-addons.ts
│ └── stories
│ │ ├── community-integrations
│ │ ├── Formik
│ │ │ ├── Basic.tsx
│ │ │ └── index.tsx
│ │ └── ReactHookForm
│ │ │ ├── DemoForm.tsx
│ │ │ ├── NumberInput.tsx
│ │ │ ├── PinInput.tsx
│ │ │ ├── RadioAndCheckbox.tsx
│ │ │ ├── Select.tsx
│ │ │ ├── Slider.tsx
│ │ │ ├── Switch.tsx
│ │ │ ├── Textarea.tsx
│ │ │ ├── Usage.tsx
│ │ │ └── index.tsx
│ │ ├── components
│ │ ├── Allcomponents.tsx
│ │ ├── Wrapper.tsx
│ │ ├── basic
│ │ │ ├── FlatList
│ │ │ │ ├── Basic.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── KeyboardAvoidingView
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Kitchensink-Basic.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── ScrollView
│ │ │ │ ├── Basic.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── SectionList
│ │ │ │ ├── Basic.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── StatusBar
│ │ │ │ ├── Basic.tsx
│ │ │ │ └── index.tsx
│ │ │ └── View
│ │ │ │ ├── Basic.tsx
│ │ │ │ └── index.tsx
│ │ ├── composites
│ │ │ ├── Accordion
│ │ │ │ ├── AccessingInternalState.tsx
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── DefaultIndex.tsx
│ │ │ │ ├── ExpandedStyle.tsx
│ │ │ │ ├── Multiple.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── Toggle.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Actionsheet
│ │ │ │ ├── Composition.tsx
│ │ │ │ ├── CustomBackdrop.tsx
│ │ │ │ ├── DisableOverlay.tsx
│ │ │ │ ├── Icon.tsx
│ │ │ │ ├── Usage.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Alert
│ │ │ │ ├── action.tsx
│ │ │ │ ├── basic.tsx
│ │ │ │ ├── colorScheme.tsx
│ │ │ │ ├── composition.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── knobEnabled.tsx
│ │ │ │ ├── status.tsx
│ │ │ │ ├── usage.tsx
│ │ │ │ └── variant.tsx
│ │ │ ├── AlertDialog
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Transition.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── AppBar
│ │ │ │ ├── AppBarExamples.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── AspectRatio
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── EmbedImage.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Avatar
│ │ │ │ ├── AvatarBadge.tsx
│ │ │ │ ├── AvatarGroup.tsx
│ │ │ │ ├── Fallback.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── knobEnabled.tsx
│ │ │ │ ├── size.tsx
│ │ │ │ └── usage.tsx
│ │ │ ├── Badge
│ │ │ │ ├── color.tsx
│ │ │ │ ├── composition.tsx
│ │ │ │ ├── icons.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── knobEnabled.tsx
│ │ │ │ ├── usage.tsx
│ │ │ │ └── variants.tsx
│ │ │ ├── Breadcrumb
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Collapsible.tsx
│ │ │ │ ├── ComponentSeparator.tsx
│ │ │ │ ├── Composition.tsx
│ │ │ │ ├── Separators.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Card
│ │ │ │ ├── Basic.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Center
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── SquareCircle.tsx
│ │ │ │ ├── WithIcons.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── CircularProgress
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── ColorScheme.tsx
│ │ │ │ ├── Colors.tsx
│ │ │ │ ├── Indeterminate.tsx
│ │ │ │ ├── Label.tsx
│ │ │ │ ├── MinMax.tsx
│ │ │ │ ├── Sizes.tsx
│ │ │ │ ├── Thickness.tsx
│ │ │ │ ├── TrackColor.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── CloseButton
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Sizes.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Code
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── colors.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Collapse
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Callback.tsx
│ │ │ │ ├── Duration.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Container
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── centeringChildren.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── usage.tsx
│ │ │ ├── Divider
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Composition.tsx
│ │ │ │ ├── Orientation.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Drawer
│ │ │ │ ├── Basic.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Fab
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── CustomPosition.tsx
│ │ │ │ ├── DocsBasic.tsx
│ │ │ │ ├── DocsCustomPosition.tsx
│ │ │ │ ├── DocsPlacement.tsx
│ │ │ │ ├── Kitchensink-Basic.tsx
│ │ │ │ ├── Kitchensink-CustomPosition.tsx
│ │ │ │ ├── Kitchensink-Placement.tsx
│ │ │ │ ├── Placement.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── FormControl
│ │ │ │ ├── CustomStyle.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── Usage.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── IconButton
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── SVGIcon.tsx
│ │ │ │ ├── Sizes.tsx
│ │ │ │ ├── Variant.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Kbd
│ │ │ │ ├── Basic.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Menu
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Group.tsx
│ │ │ │ ├── MenuOptionsGroup.tsx
│ │ │ │ ├── MenuPositions.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Modal
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── CustomBackdrop.tsx
│ │ │ │ ├── ModalPlacement.tsx
│ │ │ │ ├── ModalRefEg.tsx
│ │ │ │ ├── ModalWithAvoidKeyboard.tsx
│ │ │ │ ├── MultipleModal.tsx
│ │ │ │ ├── Size.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── NumberInput
│ │ │ │ ├── Combination.tsx
│ │ │ │ ├── DefaultValue.tsx
│ │ │ │ ├── FormControlled.tsx
│ │ │ │ ├── MinMax.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── Steps.tsx
│ │ │ │ ├── Usage.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── PinInput
│ │ │ │ ├── DefaultValue.tsx
│ │ │ │ ├── FormControlled.tsx
│ │ │ │ ├── ManageFocus.tsx
│ │ │ │ ├── Placeholder.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── Size.tsx
│ │ │ │ ├── Usage.tsx
│ │ │ │ ├── Variants.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Popover
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── PopoverPositions.tsx
│ │ │ │ ├── RefEg.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Progress
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── ColorScheme.tsx
│ │ │ │ ├── Composition.tsx
│ │ │ │ ├── CustomBgColor.tsx
│ │ │ │ ├── Flat.tsx
│ │ │ │ ├── Sizes.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── SimpleGrid
│ │ │ │ ├── MinWidthColumns.tsx
│ │ │ │ ├── NumberOfColumns.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Skeleton
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Color.tsx
│ │ │ │ ├── Composition.tsx
│ │ │ │ ├── FadeDuration.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── isLoaded.tsx
│ │ │ ├── Stat
│ │ │ │ ├── Example.tsx
│ │ │ │ ├── Indicator.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Tabs
│ │ │ │ ├── Colors.tsx
│ │ │ │ ├── Composition.tsx
│ │ │ │ ├── Controlled.tsx
│ │ │ │ ├── FittedTab.tsx
│ │ │ │ ├── IconTabs.tsx
│ │ │ │ ├── Size.tsx
│ │ │ │ ├── TabAlignment.tsx
│ │ │ │ ├── TabBarOnly.tsx
│ │ │ │ ├── Usage.tsx
│ │ │ │ ├── Variants.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Tag
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Custom.tsx
│ │ │ │ ├── Size.tsx
│ │ │ │ ├── Variants.tsx
│ │ │ │ ├── WithIcon.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── TextField
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Invalid.tsx
│ │ │ │ ├── Select.tsx
│ │ │ │ ├── Textarea.tsx
│ │ │ │ ├── WithIcon.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Toast
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── CloseToast.tsx
│ │ │ │ ├── CustomComponent.tsx
│ │ │ │ ├── CustomComponentWithCustomId.tsx
│ │ │ │ ├── PreventDuplicate.tsx
│ │ │ │ ├── StandaloneToast.tsx
│ │ │ │ ├── StatusRecipies.tsx
│ │ │ │ ├── ToastPositions.tsx
│ │ │ │ ├── VariantRecipies.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── CustomTooltip.tsx
│ │ │ │ ├── TooltipPositions.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Transitions
│ │ │ │ ├── Fade.tsx
│ │ │ │ ├── ScaleFade.tsx
│ │ │ │ ├── Slide.tsx
│ │ │ │ ├── SlideComposition.tsx
│ │ │ │ ├── SlideFade.tsx
│ │ │ │ ├── SlideWrapped.tsx
│ │ │ │ ├── Stagger.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Typeahead
│ │ │ │ ├── UsingComponent.tsx
│ │ │ │ ├── UsingComponentWithRenderItem.tsx
│ │ │ │ ├── UsingControlledInput.tsx
│ │ │ │ ├── UsingHook.tsx
│ │ │ │ ├── UsingWithAPI.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Wrap
│ │ │ │ ├── AlignmentAlign.tsx
│ │ │ │ ├── AlignmentJustify.tsx
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Spacing.tsx
│ │ │ │ └── index.tsx
│ │ │ └── factory
│ │ │ │ ├── index.tsx
│ │ │ │ ├── modes.tsx
│ │ │ │ ├── ref.tsx
│ │ │ │ ├── theme.tsx
│ │ │ │ └── usage.tsx
│ │ ├── perf
│ │ │ ├── NBButton.tsx
│ │ │ ├── RNButton.tsx
│ │ │ └── index.tsx
│ │ └── primitives
│ │ │ ├── Box
│ │ │ ├── LinearGrad.tsx
│ │ │ ├── WithRef.tsx
│ │ │ ├── basic.tsx
│ │ │ ├── composition-card.tsx
│ │ │ ├── composition-card1.tsx
│ │ │ ├── composition-card2.tsx
│ │ │ ├── composition-card3.tsx
│ │ │ ├── composition-shoes-card.tsx
│ │ │ ├── composition.tsx
│ │ │ └── index.tsx
│ │ │ ├── Button
│ │ │ ├── Composition.tsx
│ │ │ ├── WithRef.tsx
│ │ │ ├── basic.tsx
│ │ │ ├── icons.tsx
│ │ │ ├── index.tsx
│ │ │ ├── loading.tsx
│ │ │ ├── sizes.tsx
│ │ │ └── variants.tsx
│ │ │ ├── ButtonGroup
│ │ │ ├── basic.tsx
│ │ │ ├── direction.tsx
│ │ │ ├── index.tsx
│ │ │ ├── isAttached.tsx
│ │ │ ├── sizes.tsx
│ │ │ └── variants.tsx
│ │ │ ├── Checkbox
│ │ │ ├── FormControlled.tsx
│ │ │ ├── basic.tsx
│ │ │ ├── checkboxGroup.tsx
│ │ │ ├── controlledCheckbox.tsx
│ │ │ ├── customColor.tsx
│ │ │ ├── customIcon.tsx
│ │ │ ├── disabled.tsx
│ │ │ ├── index.tsx
│ │ │ ├── invalid.tsx
│ │ │ ├── playground.tsx
│ │ │ ├── size.tsx
│ │ │ ├── uncontrolledCheckbox.tsx
│ │ │ └── withRef.tsx
│ │ │ ├── Column
│ │ │ ├── Basic.tsx
│ │ │ └── index.tsx
│ │ │ ├── Flex
│ │ │ ├── basic.tsx
│ │ │ ├── index.tsx
│ │ │ └── spacer.tsx
│ │ │ ├── HStack
│ │ │ ├── basic.tsx
│ │ │ └── index.tsx
│ │ │ ├── Heading
│ │ │ ├── Basic.tsx
│ │ │ ├── Composition.tsx
│ │ │ ├── OverridenStyle.tsx
│ │ │ ├── Sizes.tsx
│ │ │ ├── Truncate.tsx
│ │ │ └── index.tsx
│ │ │ ├── Hidden
│ │ │ ├── basic.tsx
│ │ │ ├── hiddenFromAndToBreakpoints.tsx
│ │ │ ├── hiddenOnColorModes.tsx
│ │ │ ├── hiddenOnPlatforms.tsx
│ │ │ ├── hiddenOnlyOnBreakPoints.tsx
│ │ │ └── index.tsx
│ │ │ ├── Icon
│ │ │ ├── AllIcons.tsx
│ │ │ ├── Basic.tsx
│ │ │ ├── CreateIcon.tsx
│ │ │ ├── CustomIcon.tsx
│ │ │ ├── Sizes.tsx
│ │ │ ├── ThirdPartyIcons.tsx
│ │ │ └── index.tsx
│ │ │ ├── Image
│ │ │ ├── Basic.tsx
│ │ │ ├── BorderRadius.tsx
│ │ │ ├── FallbackElement.tsx
│ │ │ ├── FallbackSupport.tsx
│ │ │ ├── Sizes.tsx
│ │ │ ├── WithRef.tsx
│ │ │ └── index.tsx
│ │ │ ├── Input
│ │ │ ├── Addons.tsx
│ │ │ ├── Basic.tsx
│ │ │ ├── Controlled.tsx
│ │ │ ├── Elements.tsx
│ │ │ ├── FormControlled.tsx
│ │ │ ├── Masked.tsx
│ │ │ ├── Size.tsx
│ │ │ ├── Variant.tsx
│ │ │ └── index.tsx
│ │ │ ├── Link
│ │ │ ├── Basic.tsx
│ │ │ ├── CompositeLink.tsx
│ │ │ ├── CustomOnPress.tsx
│ │ │ ├── ExternalLink.tsx
│ │ │ ├── UnderlineLink.tsx
│ │ │ └── index.tsx
│ │ │ ├── List
│ │ │ ├── Basic.tsx
│ │ │ ├── ListWithIcon.tsx
│ │ │ ├── OrderedList.tsx
│ │ │ ├── PressableList.tsx
│ │ │ ├── StylingList.tsx
│ │ │ ├── UnorderedList.tsx
│ │ │ ├── VirtualizedList.tsx
│ │ │ └── index.tsx
│ │ │ ├── Pressable
│ │ │ ├── Basic.tsx
│ │ │ ├── Events.tsx
│ │ │ └── index.tsx
│ │ │ ├── Radio
│ │ │ ├── controlledRadio.tsx
│ │ │ ├── customColor.tsx
│ │ │ ├── customIcon.tsx
│ │ │ ├── disabled.tsx
│ │ │ ├── formControlled.tsx
│ │ │ ├── index.tsx
│ │ │ ├── invalid.tsx
│ │ │ ├── playground.tsx
│ │ │ ├── size.tsx
│ │ │ ├── uncontrolledRadio.tsx
│ │ │ └── withRef.tsx
│ │ │ ├── Row
│ │ │ ├── Basic.tsx
│ │ │ └── index.tsx
│ │ │ ├── Select
│ │ │ ├── Basic.tsx
│ │ │ ├── FormControlled.tsx
│ │ │ ├── SelectLongList.tsx
│ │ │ └── index.tsx
│ │ │ ├── Slider
│ │ │ ├── Customized.tsx
│ │ │ ├── FormControlled.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── Size.tsx
│ │ │ ├── Value.tsx
│ │ │ ├── Vertical.tsx
│ │ │ ├── color.tsx
│ │ │ ├── index.tsx
│ │ │ ├── isDisabled.tsx
│ │ │ ├── isReadOnly.tsx
│ │ │ └── usage.tsx
│ │ │ ├── Spinner
│ │ │ ├── color.tsx
│ │ │ ├── duration.tsx
│ │ │ ├── index.tsx
│ │ │ ├── size.tsx
│ │ │ ├── usage.tsx
│ │ │ ├── variant.tsx
│ │ │ └── withKnob.tsx
│ │ │ ├── Stack
│ │ │ ├── basic.tsx
│ │ │ ├── divider.tsx
│ │ │ └── index.tsx
│ │ │ ├── Switch
│ │ │ ├── Accessibility.tsx
│ │ │ ├── Basic.tsx
│ │ │ ├── ColorSchemes.tsx
│ │ │ ├── Sizes.tsx
│ │ │ ├── SwitchBgColor.tsx
│ │ │ ├── example.tsx
│ │ │ └── index.tsx
│ │ │ ├── Text
│ │ │ ├── Basic.tsx
│ │ │ ├── ChangingFontSize.tsx
│ │ │ ├── Nested.tsx
│ │ │ ├── Overriden.tsx
│ │ │ ├── Truncated.tsx
│ │ │ └── index.tsx
│ │ │ ├── TextArea
│ │ │ ├── basic.tsx
│ │ │ ├── index.tsx
│ │ │ ├── invalid.tsx
│ │ │ ├── size-kitchensink.tsx
│ │ │ ├── size.tsx
│ │ │ └── value.tsx
│ │ │ ├── VStack
│ │ │ ├── basic.tsx
│ │ │ └── index.tsx
│ │ │ ├── View
│ │ │ ├── Basic.tsx
│ │ │ └── index.tsx
│ │ │ └── ZStack
│ │ │ ├── CenterStack.tsx
│ │ │ ├── example.tsx
│ │ │ └── index.tsx
│ │ ├── examples
│ │ ├── Signin.tsx
│ │ ├── Signup.tsx
│ │ ├── TodoApp.tsx
│ │ └── index.tsx
│ │ ├── hooks
│ │ ├── useAccessibleColors
│ │ │ ├── Basic.tsx
│ │ │ └── index.tsx
│ │ ├── useBreakpointValue
│ │ │ ├── index.tsx
│ │ │ └── usage.tsx
│ │ ├── useClipboard
│ │ │ ├── Usage.tsx
│ │ │ └── index.tsx
│ │ ├── useColorMode
│ │ │ ├── Basic.tsx
│ │ │ └── index.tsx
│ │ ├── useColorModeValue
│ │ │ ├── Basic.tsx
│ │ │ └── index.tsx
│ │ ├── useContrastText
│ │ │ ├── Basic.tsx
│ │ │ ├── Variations.tsx
│ │ │ └── index.tsx
│ │ ├── useDisclose
│ │ │ ├── Usage.tsx
│ │ │ └── index.tsx
│ │ ├── useMediaQuery
│ │ │ ├── index.tsx
│ │ │ ├── max-height.tsx
│ │ │ ├── min-width.tsx
│ │ │ └── orientation.tsx
│ │ ├── useSafeArea
│ │ │ ├── Fixed.tsx
│ │ │ ├── Flexible.tsx
│ │ │ ├── Hook.tsx
│ │ │ └── index.tsx
│ │ └── useSx
│ │ │ ├── Basic.tsx
│ │ │ └── index.tsx
│ │ ├── index.ts
│ │ └── theme
│ │ ├── Custom
│ │ ├── Basic.tsx
│ │ ├── Content.tsx
│ │ ├── CustomizingBase.tsx
│ │ ├── CustomizingComponents.tsx
│ │ ├── CustomizingTheme.tsx
│ │ ├── CustomizingVariant.tsx
│ │ └── index.tsx
│ │ ├── Mode
│ │ ├── Basic.tsx
│ │ ├── Content.tsx
│ │ ├── DefaultMode.tsx
│ │ ├── Persistence.tsx
│ │ └── index.tsx
│ │ └── Responsive
│ │ ├── Basic.tsx
│ │ ├── Demo.tsx
│ │ ├── Direction.tsx
│ │ ├── FontSize.tsx
│ │ ├── More.tsx
│ │ └── index.tsx
├── tests
│ ├── storybook.test.js
│ ├── storybook.test.js.snap.android
│ ├── storybook.test.js.snap.ios
│ ├── storybook.test.js.snap.node
│ └── storybook.test.js.snap.web
├── tsconfig.json
├── web-build
│ └── register-service-worker.js
├── webpack.config.js
└── yarn.lock
├── expo-example
├── App.tsx
├── app.json
├── assets
│ ├── adaptive-icon.png
│ ├── favicon.png
│ ├── icon.png
│ └── splash.png
├── babel.config.js
├── components
│ ├── button.tsx
│ └── index.ts
├── custompressablescreen.tsx
├── metro.config.js
├── nativebase.tsx
├── package-lock.json
├── package.json
├── reactnativescreen.tsx
├── test-babel 11.40.04 AM.js
├── tsconfig.json
├── webpack.config.js
└── yarn.lock
├── img
├── feature.png
├── header.png
├── header1_old.png
├── header_new.png
├── kitchensink.gif
├── qr.png
├── qr_new.png
├── scan_kitchensink.png
└── theme.png
├── next-example
├── .eslintrc.json
├── .gitignore
├── README.md
├── babel.config.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│ ├── _app.tsx
│ ├── _document.js
│ ├── api
│ │ └── hello.ts
│ └── index.tsx
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── styles
│ ├── Home.module.css
│ └── globals.css
├── tsconfig.json
└── yarn.lock
├── package.json
├── sonar-project.properties
├── src
├── components
│ ├── basic
│ │ ├── FlatList
│ │ │ ├── FlatList.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── KeyboardAvoidingView
│ │ │ ├── KeyboardAvoidingView.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── ScrollView
│ │ │ ├── ScrollView.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── SectionList
│ │ │ ├── SectionList.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── StatusBar
│ │ │ ├── StatusBar.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── View
│ │ │ ├── View.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ └── index.tsx
│ ├── composites
│ │ ├── Accordion
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionDetails.tsx
│ │ │ ├── AccordionIcon.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionSummary.tsx
│ │ │ ├── Context.ts
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Actionsheet
│ │ │ ├── ActionSheetContext.ts
│ │ │ ├── Actionsheet.tsx
│ │ │ ├── ActionsheetContent.tsx
│ │ │ ├── ActionsheetFooter.tsx
│ │ │ ├── ActionsheetHeader.tsx
│ │ │ ├── ActionsheetItem.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Alert
│ │ │ ├── Alert.tsx
│ │ │ ├── AlertIcon.tsx
│ │ │ ├── Context.ts
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── AlertDialog
│ │ │ ├── AlertDialog.tsx
│ │ │ ├── AlertDialogBody.tsx
│ │ │ ├── AlertDialogCloseButton.tsx
│ │ │ ├── AlertDialogContent.tsx
│ │ │ ├── AlertDialogFooter.tsx
│ │ │ ├── AlertDialogHeader.tsx
│ │ │ ├── Context.ts
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── AppBar
│ │ │ ├── AppBar.tsx
│ │ │ ├── AppBarContent.tsx
│ │ │ ├── AppBarLeft.tsx
│ │ │ ├── AppBarRight.tsx
│ │ │ ├── index.tsx
│ │ │ ├── types.tsx
│ │ │ └── utils.ts
│ │ ├── AspectRatio
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Avatar
│ │ │ ├── Avatar.tsx
│ │ │ ├── Badge.tsx
│ │ │ ├── Group.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Backdrop
│ │ │ └── index.tsx
│ │ ├── Badge
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Breadcrumb
│ │ │ ├── Breadcrumb.tsx
│ │ │ ├── BreadcrumbIcon.tsx
│ │ │ ├── BreadcrumbItem.tsx
│ │ │ ├── BreadcrumbLink.tsx
│ │ │ ├── BreadcrumbText.tsx
│ │ │ ├── Context.ts
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Card
│ │ │ ├── Card.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Center
│ │ │ ├── Center.tsx
│ │ │ ├── Circle.tsx
│ │ │ ├── Square.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── CircularProgress
│ │ │ ├── CircularProgress.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Code
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Collapse
│ │ │ └── index.tsx
│ │ ├── Container
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Divider
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Drawer
│ │ │ └── index.tsx
│ │ ├── Fab
│ │ │ ├── Fab.tsx
│ │ │ ├── FabItem.tsx
│ │ │ ├── FabList.tsx
│ │ │ ├── context.ts
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── FormControl
│ │ │ ├── FormControl.tsx
│ │ │ ├── FormControlErrorMessage.tsx
│ │ │ ├── FormControlHelperText.tsx
│ │ │ ├── FormControlLabel.tsx
│ │ │ ├── index.tsx
│ │ │ ├── test
│ │ │ │ └── FormControl.test.tsx
│ │ │ ├── types.tsx
│ │ │ └── useFormControl.tsx
│ │ ├── IconButton
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── KBD
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Menu
│ │ │ ├── Menu.tsx
│ │ │ ├── MenuContext.ts
│ │ │ ├── MenuGroup.tsx
│ │ │ ├── MenuItem.tsx
│ │ │ ├── MenuItemOption.tsx
│ │ │ ├── MenuOptionGroup.tsx
│ │ │ ├── index.tsx
│ │ │ ├── types.ts
│ │ │ └── useMenu.tsx
│ │ ├── Modal
│ │ │ ├── Context.ts
│ │ │ ├── Modal.tsx
│ │ │ ├── ModalBody.tsx
│ │ │ ├── ModalCloseButton.tsx
│ │ │ ├── ModalContent.tsx
│ │ │ ├── ModalFooter.tsx
│ │ │ ├── ModalHeader.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── NumberInput
│ │ │ ├── Context.ts
│ │ │ ├── NumberDecrementStepper.tsx
│ │ │ ├── NumberIncrementStepper.tsx
│ │ │ ├── NumberInput.tsx
│ │ │ ├── NumberInputField.tsx
│ │ │ ├── NumberInputStepper.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── PinInput
│ │ │ ├── Context.ts
│ │ │ ├── PinInput.tsx
│ │ │ ├── PinInputField.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Popover
│ │ │ ├── Popover.tsx
│ │ │ ├── PopoverArrow.tsx
│ │ │ ├── PopoverBody.tsx
│ │ │ ├── PopoverCloseButton.tsx
│ │ │ ├── PopoverContent.tsx
│ │ │ ├── PopoverContext.ts
│ │ │ ├── PopoverFooter.tsx
│ │ │ ├── PopoverHeader.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Popper
│ │ │ ├── Popper.tsx
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── Progress
│ │ │ └── index.tsx
│ │ ├── SimpleGrid
│ │ │ ├── SimpleGrid.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Skeleton
│ │ │ ├── Skeleton.tsx
│ │ │ ├── SkeletonText.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Stat
│ │ │ └── index.tsx
│ │ ├── Tabs
│ │ │ ├── Context.ts
│ │ │ ├── Tab.tsx
│ │ │ ├── TabBar.tsx
│ │ │ ├── TabIcon.tsx
│ │ │ ├── TabView.tsx
│ │ │ ├── TabViews.tsx
│ │ │ ├── Tabs.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Tag
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── TextField
│ │ │ ├── TextField.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Toast
│ │ │ ├── Toast.tsx
│ │ │ ├── ToastDummy.tsx
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ ├── Tooltip
│ │ │ ├── Tooltip.tsx
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── Transitions
│ │ │ ├── Fade.tsx
│ │ │ ├── PresenceTransition.tsx
│ │ │ ├── ScaleFade.tsx
│ │ │ ├── Slide.tsx
│ │ │ ├── SlideFade.tsx
│ │ │ ├── Stagger.tsx
│ │ │ ├── Transition.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Typeahead
│ │ │ ├── Typeahead.tsx
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── useTypeahead
│ │ │ │ ├── index.ts
│ │ │ │ ├── reducer.tsx
│ │ │ │ ├── types.tsx
│ │ │ │ ├── useTypeahead.ts
│ │ │ │ └── utils.ts
│ │ ├── Wrap
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ └── index.ts
│ ├── primitives
│ │ ├── Box
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Button
│ │ │ ├── Button.tsx
│ │ │ ├── ButtonGroup.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Checkbox
│ │ │ ├── Checkbox.tsx
│ │ │ ├── Checkbox.web.tsx
│ │ │ ├── CheckboxGroup.tsx
│ │ │ ├── SizedIcon.tsx
│ │ │ ├── index.tsx
│ │ │ ├── test
│ │ │ │ └── checkbox.test.tsx
│ │ │ └── types.tsx
│ │ ├── Column
│ │ │ └── index.tsx
│ │ ├── Flex
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── GridItem
│ │ │ └── props.ts
│ │ ├── Heading
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Hidden
│ │ │ ├── HiddenSSR.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Icon
│ │ │ ├── Icon.tsx
│ │ │ ├── Icons
│ │ │ │ ├── Add.tsx
│ │ │ │ ├── Arrow.tsx
│ │ │ │ ├── Check.tsx
│ │ │ │ ├── Chevron.tsx
│ │ │ │ ├── Circle.tsx
│ │ │ │ ├── Close.tsx
│ │ │ │ ├── Delete.tsx
│ │ │ │ ├── Favourite.tsx
│ │ │ │ ├── Hamburger.tsx
│ │ │ │ ├── Info.tsx
│ │ │ │ ├── Minus.tsx
│ │ │ │ ├── Moon.tsx
│ │ │ │ ├── Play.tsx
│ │ │ │ ├── Question.tsx
│ │ │ │ ├── Search.tsx
│ │ │ │ ├── Share.tsx
│ │ │ │ ├── Sun.tsx
│ │ │ │ ├── ThreeDots.tsx
│ │ │ │ ├── Warning.tsx
│ │ │ │ ├── WarningOutline.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── questionIconPath.tsx
│ │ │ ├── SVGIcon.tsx
│ │ │ ├── createIcon.tsx
│ │ │ ├── index.tsx
│ │ │ ├── nbSvg.tsx
│ │ │ ├── nbSvg.web.tsx
│ │ │ └── types.ts
│ │ ├── Image
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Input
│ │ │ ├── Input.tsx
│ │ │ ├── InputAddons.tsx
│ │ │ ├── InputAdvanced.tsx
│ │ │ ├── InputBase.tsx
│ │ │ ├── InputGroup.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Link
│ │ │ ├── index.tsx
│ │ │ ├── types.ts
│ │ │ └── useLink.ts
│ │ ├── List
│ │ │ ├── List.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── ListItem.tsx
│ │ │ ├── Ordered.tsx
│ │ │ ├── Unordered.tsx
│ │ │ ├── index.tsx
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ ├── Overlay
│ │ │ ├── ExitAnimationContext.ts
│ │ │ ├── Overlay.tsx
│ │ │ └── index.ts
│ │ ├── Pressable
│ │ │ ├── Pressable.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Radio
│ │ │ ├── Radio.tsx
│ │ │ ├── Radio.web.tsx
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── index.tsx
│ │ │ ├── test
│ │ │ │ └── radio.test.tsx
│ │ │ └── types.tsx
│ │ ├── Row
│ │ │ └── index.tsx
│ │ ├── Select
│ │ │ ├── Select.tsx
│ │ │ ├── SelectItem.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── Slider
│ │ │ ├── Context.ts
│ │ │ ├── Slider.tsx
│ │ │ ├── SliderFilledTrack.tsx
│ │ │ ├── SliderThumb.tsx
│ │ │ ├── SliderTrack.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── Spinner
│ │ │ ├── index.tsx
│ │ │ ├── types.tsx
│ │ │ ├── useSpinner.tsx
│ │ │ └── variants
│ │ │ │ ├── default.tsx
│ │ │ │ ├── dotted.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── multiColorDotted.tsx
│ │ │ │ ├── squareDotted.tsx
│ │ │ │ └── stroked.tsx
│ │ ├── Stack
│ │ │ ├── HStack.tsx
│ │ │ ├── Stack.tsx
│ │ │ ├── VStack.tsx
│ │ │ └── index.tsx
│ │ ├── Switch
│ │ │ ├── index.tsx
│ │ │ ├── test
│ │ │ │ └── switch.test.tsx
│ │ │ └── types.ts
│ │ ├── Text
│ │ │ ├── __test__
│ │ │ │ └── Text.test.tsx
│ │ │ ├── index.tsx
│ │ │ └── types.tsx
│ │ ├── TextArea
│ │ │ └── index.tsx
│ │ ├── TouchableItem
│ │ │ └── index.tsx
│ │ ├── View
│ │ │ ├── index.tsx
│ │ │ └── types.ts
│ │ ├── VisuallyHidden
│ │ │ └── index.tsx
│ │ ├── ZStack
│ │ │ └── index.tsx
│ │ └── index.ts
│ └── types
│ │ ├── ExtraProps.ts
│ │ ├── PlatformProps.ts
│ │ ├── index.tsx
│ │ ├── responsiveValue.ts
│ │ └── utils.ts
├── core
│ ├── NativeBaseContext.ts
│ ├── NativeBaseProvider.tsx
│ ├── RobotoSlab.otf
│ ├── StrictMode.ts
│ ├── color-mode
│ │ ├── hooks.tsx
│ │ ├── index.tsx
│ │ └── types.ts
│ ├── extendTheme.tsx
│ ├── hybrid-overlay
│ │ ├── Context.ts
│ │ ├── HybridProvider.tsx
│ │ ├── index.ts
│ │ └── types.ts
│ └── index.ts
├── factory
│ ├── component.tsx
│ ├── index.tsx
│ └── types.ts
├── hooks
│ ├── index.ts
│ ├── tests
│ │ └── useBreakpointValue.test.tsx
│ ├── useBreakpointResolvedProps.ts
│ ├── useBreakpointValue.ts
│ ├── useClipboard.ts
│ ├── useColorModeProps.ts
│ ├── useContrastText.ts
│ ├── useControllableProp.ts
│ ├── useDisclose.ts
│ ├── useHasResponsiveProps.ts
│ ├── useKeyboardDismissable.ts
│ ├── useLayout.tsx
│ ├── useMediaQuery.ts
│ ├── useNativeBase.tsx
│ ├── usePlatformProps.ts
│ ├── useResolvedFontFamily.ts
│ ├── useResponsiveSSRProps.ts
│ ├── useSafeArea
│ │ ├── index.ts
│ │ └── utils.ts
│ ├── useScreenReaderEnabled.ts
│ ├── useStyledSystemPropsResolver.ts
│ ├── useSx
│ │ └── index.ts
│ ├── useTheme.ts
│ ├── useThemeProps
│ │ ├── index.ts
│ │ ├── propsFlattener.tsx
│ │ ├── propsFlattenerTest.tsx
│ │ ├── useProps.tsx
│ │ ├── usePropsResolution.test.tsx
│ │ ├── usePropsResolution.tsx
│ │ ├── usePropsResolutionTest.tsx
│ │ ├── usePropsWithComponentTheme.ts
│ │ └── utils.ts
│ └── useToken.ts
├── index.tsx
├── jest
│ └── mock.ts
├── theme
│ ├── base
│ │ ├── borders.ts
│ │ ├── breakpoints.ts
│ │ ├── colors.ts
│ │ ├── index.ts
│ │ ├── opacity.ts
│ │ ├── radius.ts
│ │ ├── shadows.ts
│ │ ├── sizes.ts
│ │ ├── space.ts
│ │ ├── types.ts
│ │ └── typography.ts
│ ├── components
│ │ ├── accordion.ts
│ │ ├── actionsheet.ts
│ │ ├── alert-dialog.ts
│ │ ├── alert.ts
│ │ ├── app-bar.ts
│ │ ├── aspect-ratio.ts
│ │ ├── avatar-badge.ts
│ │ ├── avatar-group.ts
│ │ ├── avatar.ts
│ │ ├── badge.ts
│ │ ├── box.ts
│ │ ├── breadcrumb.ts
│ │ ├── button.ts
│ │ ├── card.ts
│ │ ├── center.ts
│ │ ├── checkbox-group.ts
│ │ ├── checkbox.ts
│ │ ├── circle.ts
│ │ ├── circular-progress.ts
│ │ ├── code.ts
│ │ ├── container.ts
│ │ ├── divider.ts
│ │ ├── fab.ts
│ │ ├── flatList.ts
│ │ ├── flex.ts
│ │ ├── form-control.ts
│ │ ├── heading.ts
│ │ ├── hstack.ts
│ │ ├── icon-button.ts
│ │ ├── icon.ts
│ │ ├── image.ts
│ │ ├── index.ts
│ │ ├── input.ts
│ │ ├── inputleftaddon.ts
│ │ ├── inputrightaddon.ts
│ │ ├── kbd.ts
│ │ ├── keyboardAvoidingView.ts
│ │ ├── link.ts
│ │ ├── list.ts
│ │ ├── menu.ts
│ │ ├── modal.ts
│ │ ├── number-input.ts
│ │ ├── pin-input.ts
│ │ ├── popover.ts
│ │ ├── pressable.ts
│ │ ├── progress.ts
│ │ ├── radio-group.ts
│ │ ├── radio.ts
│ │ ├── scrollView.ts
│ │ ├── sectionList.ts
│ │ ├── select.ts
│ │ ├── simple-grid.ts
│ │ ├── skeleton.ts
│ │ ├── slider.ts
│ │ ├── spinner.ts
│ │ ├── square.ts
│ │ ├── stack.ts
│ │ ├── stat.ts
│ │ ├── statusBar.ts
│ │ ├── switch.ts
│ │ ├── tabs.ts
│ │ ├── tag.ts
│ │ ├── text.ts
│ │ ├── textField.ts
│ │ ├── textarea.ts
│ │ ├── toast.ts
│ │ ├── tooltip.ts
│ │ ├── transitions.ts
│ │ ├── typeahead.ts
│ │ ├── view.ts
│ │ ├── vstack.ts
│ │ ├── wrap.ts
│ │ └── zstack.ts
│ ├── index.ts
│ ├── styled-system.ts
│ ├── tests
│ │ ├── findLastValidBreakpoint.test.tsx
│ │ ├── getClosestBreakpoint.test.tsx
│ │ ├── hasValidBreakpointFormat.test.tsx
│ │ └── mode.test.tsx
│ ├── tools
│ │ ├── colors.ts
│ │ ├── index.ts
│ │ ├── platformUnits.test.js
│ │ └── utils.ts
│ ├── types.ts
│ ├── v3-compatible-theme
│ │ └── index.ts
│ └── v33x-theme
│ │ ├── base
│ │ ├── borders.ts
│ │ ├── breakpoints.ts
│ │ ├── colors.ts
│ │ ├── index.ts
│ │ ├── opacity.ts
│ │ ├── radius.ts
│ │ ├── shadows.ts
│ │ ├── sizes.ts
│ │ ├── space.ts
│ │ ├── types.ts
│ │ └── typography.ts
│ │ ├── components
│ │ ├── accordion.ts
│ │ ├── actionsheet.ts
│ │ ├── alert-dialog.ts
│ │ ├── alert.ts
│ │ ├── app-bar.ts
│ │ ├── aspect-ratio.ts
│ │ ├── avatar-badge.ts
│ │ ├── avatar-group.ts
│ │ ├── avatar.ts
│ │ ├── badge.ts
│ │ ├── box.ts
│ │ ├── breadcrumb.ts
│ │ ├── button.ts
│ │ ├── card.ts
│ │ ├── center.ts
│ │ ├── checkbox-group.ts
│ │ ├── checkbox.ts
│ │ ├── circle.ts
│ │ ├── circular-progress.ts
│ │ ├── code.ts
│ │ ├── container.ts
│ │ ├── divider.ts
│ │ ├── fab.ts
│ │ ├── flatList.ts
│ │ ├── flex.ts
│ │ ├── form-control.ts
│ │ ├── heading.ts
│ │ ├── hstack.ts
│ │ ├── icon-button.ts
│ │ ├── icon.ts
│ │ ├── image.ts
│ │ ├── index.ts
│ │ ├── input.ts
│ │ ├── inputleftaddon.ts
│ │ ├── inputrightaddon.ts
│ │ ├── kbd.ts
│ │ ├── keyboardAvoidingView.ts
│ │ ├── link.ts
│ │ ├── list.ts
│ │ ├── menu.ts
│ │ ├── modal.ts
│ │ ├── number-input.ts
│ │ ├── pin-input.ts
│ │ ├── popover.ts
│ │ ├── pressable.ts
│ │ ├── progress.ts
│ │ ├── radio-group.ts
│ │ ├── radio.ts
│ │ ├── scrollView.ts
│ │ ├── sectionList.ts
│ │ ├── select.ts
│ │ ├── simple-grid.ts
│ │ ├── skeleton.ts
│ │ ├── slider.ts
│ │ ├── spinner.ts
│ │ ├── square.ts
│ │ ├── stack.ts
│ │ ├── stat.ts
│ │ ├── statusBar.ts
│ │ ├── switch.ts
│ │ ├── tabs.ts
│ │ ├── tag.ts
│ │ ├── text.ts
│ │ ├── textField.ts
│ │ ├── textarea.ts
│ │ ├── toast.ts
│ │ ├── tooltip.ts
│ │ ├── transitions.ts
│ │ ├── typeahead.ts
│ │ ├── view.ts
│ │ ├── vstack.ts
│ │ ├── wrap.ts
│ │ └── zstack.ts
│ │ ├── index.ts
│ │ └── tools
│ │ ├── colors.ts
│ │ ├── index.ts
│ │ ├── platformUnits.test.js
│ │ └── utils.ts
└── utils
│ ├── accessibilityTypes.ts
│ ├── accessibilityUtils.ts
│ ├── addTextAndPropsToStrings.tsx
│ ├── canUseDom.ts
│ ├── combineContextAndProps.ts
│ ├── convertStringNumberToNumber.ts
│ ├── createContext.tsx
│ ├── filterShadowProps.ts
│ ├── getAbsoluteChildren.ts
│ ├── getAttachedChildren.ts
│ ├── getIndexedChildren.ts
│ ├── getRNKeyAndStyleValue.ts
│ ├── getSpacedChildren.tsx
│ ├── getStyledFromProps.ts
│ ├── getStyledSystemPropsAndRestProps.ts
│ ├── getUnit.ts
│ ├── index.ts
│ ├── isEmptyObj.ts
│ ├── mergeRefs.ts
│ ├── react-native-web-fucntions
│ ├── atomic.ts
│ ├── createReactDOMStyle.ts
│ ├── hyphenateStyleName.ts
│ ├── normalizeColor.ts
│ ├── normalizeValueWithProperty.ts
│ ├── prefixStyles.ts
│ ├── preprocess.ts
│ ├── staticData.ts
│ └── unitlessNumbers.ts
│ ├── resolveStackStyleInput.ts
│ ├── styled.tsx
│ ├── test-utils.tsx
│ ├── tests
│ └── filterShadow.test.tsx
│ ├── useKeyboardBottomInset.ts
│ ├── useResponsiveQuery
│ ├── ResponsiveQueryProvider.tsx
│ ├── common.ts
│ ├── hash.ts
│ ├── index.ts
│ ├── types.ts
│ ├── useResponsiveQuery.tsx
│ ├── useResponsiveQuery.web.tsx
│ └── useStableMemo.ts
│ └── wrapStringChild.tsx
├── tsconfig.json
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | indent_style = space
10 | indent_size = 2
11 |
12 | end_of_line = lf
13 | charset = utf-8
14 | trim_trailing_whitespace = true
15 | insert_final_newline = true
16 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["@react-native-community", "prettier"],
3 | "rules": {
4 | "prettier/prettier": [
5 | "error",
6 | {
7 | "quoteProps": "preserve",
8 | "singleQuote": true,
9 | "tabWidth": 2,
10 | "trailingComma": "es5",
11 | "useTabs": false
12 | }
13 | ],
14 | "no-bitwise": 0,
15 | "prefer-const": "warn",
16 | "no-console": ["error", { "allow": ["warn", "error"] }]
17 | },
18 | "plugins": ["prettier"]
19 | }
20 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | contact_links:
3 | - name: Join us on Discord
4 | url: https://discord.gg/kcbuQWQv
5 | about: Be the part of the community
6 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | # Dotfiles
2 | .babelrc
3 | .eslintignore
4 | .eslintrc.json
5 | .gitattributes
6 | _config.yml
7 |
8 | # Documents
9 | CONTRIBUTING.md
10 | ISSUE_TEMPLATE.txt
11 | img
12 |
13 | # Test cases
14 | __tests__
15 | dist/__tests__
16 |
17 | # Example
18 | example/
19 | expo-example/
20 | next-example/
21 | RNBareExample/
22 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v16.13.0
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "jsxBracketSameLine": false,
4 | "useTabs": false,
5 | "eslintIntegration": false,
6 | "tslintIntegration": true,
7 | "parser": "typescript",
8 | "requireConfig": false,
9 | "stylelintIntegration": false
10 | }
--------------------------------------------------------------------------------
/RNBareExample/.buckconfig:
--------------------------------------------------------------------------------
1 |
2 | [android]
3 | target = Google Inc.:Google APIs:23
4 |
5 | [maven_repositories]
6 | central = https://repo1.maven.org/maven2
7 |
--------------------------------------------------------------------------------
/RNBareExample/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: '@react-native-community',
4 | };
5 |
--------------------------------------------------------------------------------
/RNBareExample/.gitattributes:
--------------------------------------------------------------------------------
1 | # Windows files should use crlf line endings
2 | # https://help.github.com/articles/dealing-with-line-endings/
3 | *.bat text eol=crlf
4 |
--------------------------------------------------------------------------------
/RNBareExample/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | bracketSpacing: false,
3 | jsxBracketSameLine: true,
4 | singleQuote: true,
5 | trailingComma: 'all',
6 | arrowParens: 'avoid',
7 | };
8 |
--------------------------------------------------------------------------------
/RNBareExample/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/RNBareExample/_editorconfig:
--------------------------------------------------------------------------------
1 | # Windows files
2 | [*.bat]
3 | end_of_line = crlf
4 |
--------------------------------------------------------------------------------
/RNBareExample/android/app/debug.keystore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/debug.keystore
--------------------------------------------------------------------------------
/RNBareExample/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/debug/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/assets/fonts/Merriweather-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/assets/fonts/Merriweather-Regular.ttf
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/assets/fonts/Roboto-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/assets/fonts/Roboto-Bold.ttf
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/assets/fonts/Roboto-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/assets/fonts/Roboto-Italic.ttf
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/assets/fonts/Roboto-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/assets/fonts/Roboto-Light.ttf
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/assets/fonts/Roboto-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/assets/fonts/Roboto-Medium.ttf
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/assets/fonts/Roboto-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/assets/fonts/Roboto-Regular.ttf
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/java/com/rnbareexample/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.rnbareexample;
2 |
3 | import com.facebook.react.ReactActivity;
4 |
5 | public class MainActivity extends ReactActivity {
6 |
7 | /**
8 | * Returns the name of the main component registered from JavaScript. This is used to schedule
9 | * rendering of the component.
10 | */
11 | @Override
12 | protected String getMainComponentName() {
13 | return "RNBareExample";
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | RNBareExample
3 |
4 |
--------------------------------------------------------------------------------
/RNBareExample/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/RNBareExample/android/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/android/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/RNBareExample/android/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | distributionBase=GRADLE_USER_HOME
2 | distributionPath=wrapper/dists
3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
4 | zipStoreBase=GRADLE_USER_HOME
5 | zipStorePath=wrapper/dists
6 |
--------------------------------------------------------------------------------
/RNBareExample/android/settings.gradle:
--------------------------------------------------------------------------------
1 | rootProject.name = 'RNBareExample'
2 | include ':react-native-linear-gradient'
3 | project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
4 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
5 | include ':app'
6 |
--------------------------------------------------------------------------------
/RNBareExample/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "RNBareExample",
3 | "displayName": "RNBareExample"
4 | }
--------------------------------------------------------------------------------
/RNBareExample/assets/fonts/Merriweather-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/assets/fonts/Merriweather-Regular.ttf
--------------------------------------------------------------------------------
/RNBareExample/assets/fonts/Roboto-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/assets/fonts/Roboto-Bold.ttf
--------------------------------------------------------------------------------
/RNBareExample/assets/fonts/Roboto-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/assets/fonts/Roboto-Italic.ttf
--------------------------------------------------------------------------------
/RNBareExample/assets/fonts/Roboto-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/assets/fonts/Roboto-Light.ttf
--------------------------------------------------------------------------------
/RNBareExample/assets/fonts/Roboto-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/assets/fonts/Roboto-Medium.ttf
--------------------------------------------------------------------------------
/RNBareExample/assets/fonts/Roboto-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/RNBareExample/assets/fonts/Roboto-Regular.ttf
--------------------------------------------------------------------------------
/RNBareExample/babel.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const pak = require('../package.json');
3 |
4 | module.exports = function (api) {
5 | api.cache(true);
6 | return {
7 | presets: ['module:metro-react-native-babel-preset'],
8 | plugins: [
9 | [
10 | 'module-resolver',
11 | {
12 | alias: {
13 | // For development, we want to alias the library to the source
14 | [pak.name]: path.join(__dirname, '..', pak.source),
15 | },
16 | },
17 | ],
18 | ],
19 | };
20 | };
21 |
--------------------------------------------------------------------------------
/RNBareExample/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @format
3 | */
4 |
5 | import {AppRegistry} from 'react-native';
6 | import App from './App';
7 | import {name as appName} from './app.json';
8 |
9 | AppRegistry.registerComponent(appName, () => App);
10 |
--------------------------------------------------------------------------------
/RNBareExample/ios/RNBareExample.xcworkspace/contents.xcworkspacedata:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/RNBareExample/ios/RNBareExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | IDEDidComputeMac32BitWarning
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/RNBareExample/ios/RNBareExample/AppDelegate.h:
--------------------------------------------------------------------------------
1 | #import
2 | #import
3 |
4 | @interface AppDelegate : UIResponder
5 |
6 | @property (nonatomic, strong) UIWindow *window;
7 |
8 | @end
9 |
--------------------------------------------------------------------------------
/RNBareExample/ios/RNBareExample/Images.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "version" : 1,
4 | "author" : "xcode"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/RNBareExample/ios/RNBareExample/main.m:
--------------------------------------------------------------------------------
1 | #import
2 |
3 | #import "AppDelegate.h"
4 |
5 | int main(int argc, char * argv[]) {
6 | @autoreleasepool {
7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/RNBareExample/react-native.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | project: {
3 | ios: {},
4 | android: {},
5 | },
6 | assets: ['./assets/fonts'],
7 | };
8 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['module:metro-react-native-babel-preset'],
3 | plugins:
4 | process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : [],
5 | };
6 |
--------------------------------------------------------------------------------
/example/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["@react-native-community", "prettier"],
3 | "rules": {
4 | "prettier/prettier": [
5 | "error",
6 | {
7 | "quoteProps": "preserve",
8 | "singleQuote": true,
9 | "tabWidth": 2,
10 | "trailingComma": "es5",
11 | "useTabs": false
12 | }
13 | ],
14 | "no-bitwise": 0,
15 | "prefer-const": "warn",
16 | "no-console": "off"
17 | },
18 | "plugins": ["prettier"]
19 | }
20 |
--------------------------------------------------------------------------------
/example/.nvmrc:
--------------------------------------------------------------------------------
1 | v14.19.0
--------------------------------------------------------------------------------
/example/__mocks__/@react-native-async-storage/async-storage.js:
--------------------------------------------------------------------------------
1 | import DefaultValue from '@react-native-async-storage/async-storage/jest/async-storage-mock';
2 | export default DefaultValue;
3 |
--------------------------------------------------------------------------------
/example/__mocks__/globalMock.js:
--------------------------------------------------------------------------------
1 | jest.mock('global', () => ({
2 | ...global,
3 | WebSocket: function WebSocket() {},
4 | }));
5 |
6 | jest.mock('react-native-keyboard-aware-scroll-view', () => {
7 | const KeyboardAwareScrollView = ({ children }) => children;
8 | return { KeyboardAwareScrollView };
9 | });
10 |
11 | import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
12 | jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
13 |
--------------------------------------------------------------------------------
/example/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "NativeBaseExample",
3 | "displayName": "NativeBase Example",
4 | "packagerOpts": {
5 | "config": "metro.config.js"
6 | },
7 | "expo": {
8 | "name": "NativeBase Example",
9 | "slug": "native-base-example",
10 | "description": "Example app for Nativebase",
11 | "privacy": "public",
12 | "version": "1.0.0",
13 | "platforms": ["ios", "android", "web"],
14 | "ios": {
15 | "supportsTablet": true
16 | },
17 | "assetBundlePatterns": ["**/*"]
18 | }
19 | }
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-Black.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-Black.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-BlackItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-BlackItalic.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-Bold.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-BoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-BoldItalic.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-ExtraBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-ExtraBold.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-ExtraBoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-ExtraBoldItalic.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-Italic.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-Light.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-LightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-LightItalic.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-Medium.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-MediumItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-MediumItalic.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-Regular.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-SemiBold.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Montserrat-SemiBoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Montserrat-SemiBoldItalic.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Roboto-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Roboto-Bold.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Roboto-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Roboto-Italic.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Roboto-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Roboto-Light.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Roboto-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Roboto-Medium.ttf
--------------------------------------------------------------------------------
/example/assets/fonts/Roboto-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekyAnts/NativeBase/4481786aae27589a7430d2be1cfcf74222efdb6b/example/assets/fonts/Roboto-Regular.ttf
--------------------------------------------------------------------------------
/example/babel.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const pak = require('../package.json');
3 |
4 | module.exports = function (api) {
5 | api.cache(true);
6 | return {
7 | presets: [['babel-preset-expo', { jsxRuntime: 'classic' }]],
8 | plugins: [
9 | [
10 | 'module-resolver',
11 | {
12 | alias: {
13 | // For development, we want to alias the library to the source
14 | [pak.name]: path.join(__dirname, '..', pak.source),
15 | },
16 | },
17 | ],
18 | ],
19 | };
20 | };
21 |
--------------------------------------------------------------------------------
/example/jest-android.config.js:
--------------------------------------------------------------------------------
1 | const config = {
2 | preset: 'jest-expo/android',
3 | transformIgnorePatterns: [
4 | '/../node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',
5 | ],
6 | setupFilesAfterEnv: ['/__mocks__/globalMock.js'],
7 | };
8 |
9 | module.exports = config;
10 |
--------------------------------------------------------------------------------
/example/jest-ios.config.js:
--------------------------------------------------------------------------------
1 | const config = {
2 | preset: 'jest-expo/ios',
3 | transformIgnorePatterns: [
4 | '/../node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',
5 | ],
6 | setupFilesAfterEnv: ['/__mocks__/globalMock.js'],
7 | };
8 |
9 | module.exports = config;
10 |
--------------------------------------------------------------------------------
/example/nativebase.config.ts:
--------------------------------------------------------------------------------
1 | import { INativebaseConfig } from 'native-base';
2 |
3 | export default {
4 | dependencies: {
5 | 'linear-gradient': require('expo-linear-gradient').LinearGradient,
6 | },
7 | // strictMode: 'warn',
8 | } as INativebaseConfig;
9 |
--------------------------------------------------------------------------------
/example/storybook/addons.ts:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 | import '@storybook/addon-links/register';
3 | import '@storybook/addon-knobs/register';
4 | import '@storybook/addon-ondevice-actions/register';
5 |
--------------------------------------------------------------------------------
/example/storybook/rn-addons.ts:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-ondevice-actions/register';
2 | import '@storybook/addon-ondevice-knobs/register';
3 |
--------------------------------------------------------------------------------
/example/storybook/stories/community-integrations/Formik/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../components/Wrapper';
5 | import { Example as Basic } from './Basic';
6 |
7 | storiesOf('Formik', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/basic/FlatList/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from '../../Wrapper';
5 | import { Example as Basic } from './Basic';
6 |
7 | storiesOf('FlatList', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/basic/KeyboardAvoidingView/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from '../../Wrapper';
5 | import { Example as Basic } from './Basic';
6 |
7 | storiesOf('KeyboardAvoidingView', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/basic/ScrollView/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 | import { Example as Basic } from './Basic';
6 |
7 | storiesOf('ScrollView', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/basic/SectionList/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 | import { Example as Basic } from './Basic';
6 |
7 | storiesOf('SectionList', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/basic/StatusBar/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from '../../Wrapper';
5 | import { Example as Basic } from './Basic';
6 |
7 | storiesOf('StatusBar', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/basic/View/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { View, Text, Heading } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 |
7 | A component library for the{' '}
8 | React Ecosystem
9 |
10 |
11 | NativeBase is a simple, modular and accessible component library that
12 | gives you building blocks to build you React applications.
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/basic/View/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from '../../Wrapper';
5 | import { Example as Basic } from './Basic';
6 |
7 | storiesOf('View', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/AlertDialog/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 | import { Example as Basic } from './Basic';
6 | import { Example as Transition } from './Transition';
7 |
8 | storiesOf('AlertDialog', module)
9 | .addDecorator(withKnobs)
10 | .addDecorator((getStory: any) => {getStory()})
11 | .add('Basic', () => )
12 | .add('Transition', () => );
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/AppBar/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 |
6 | import Examples from './AppBarExamples';
7 |
8 | storiesOf('AppBar', module)
9 | .addDecorator(withKnobs)
10 | .addDecorator((getStory: any) => {getStory()})
11 | .add('Examples', () => );
12 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/AspectRatio/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { AspectRatio, Box } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/AspectRatio/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 | import { Example as Basic } from './Basic';
6 | import { Example as EmbedImage } from './EmbedImage';
7 |
8 | storiesOf('AspectRatio', module)
9 | .addDecorator(withKnobs)
10 | .addDecorator((getStory: any) => {getStory()})
11 | .add('Basic', () => )
12 | .add('EmbedImage', () => );
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Badge/color.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Badge, HStack } from 'native-base';
3 |
4 | export function Example() {
5 | return (
6 |
7 | SUCCESS
8 | DANGER
9 | INFO
10 | DARK
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Badge/icons.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Badge, Stack, AddIcon } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 | }>
8 | SUCCESS
9 |
10 | }
14 | >
15 | SUCCESS
16 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Badge/knobEnabled.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Badge } from 'native-base';
3 | import { select, text } from '@storybook/addon-knobs';
4 |
5 | export function Example() {
6 | return (
7 |
11 | NATIVEBASE
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Badge/usage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Badge, Box } from 'native-base';
3 |
4 | export function Example() {
5 | return (
6 |
7 | NEW FEATURE
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Card/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 | import { Example as Basic } from './Basic';
6 |
7 | storiesOf('Card', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Center/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Center } from 'native-base';
3 | export function Example() {
4 | return (
5 |
6 |
12 | This is the Center
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CircularProgress/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CircularProgress, Heading, Center } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 | Default CircularProgress
7 |
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CircularProgress/ColorScheme.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CircularProgress, Heading, Center, VStack } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 | Changing the ColorSchemes
7 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CircularProgress/Colors.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CircularProgress, Heading, Center } from 'native-base';
3 | import { text } from '@storybook/addon-knobs';
4 | export const Example = () => {
5 | return (
6 |
7 | Changing the color
8 |
9 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CircularProgress/Indeterminate.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CircularProgress, Center, Heading } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 | Indeterminate Progress
7 |
8 | 60%
9 |
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CircularProgress/Label.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CircularProgress, Heading, Center } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 | Adding label
7 | 60%
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CircularProgress/Sizes.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CircularProgress, Heading, Center, VStack } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 | Changing the sizes
7 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CircularProgress/Thickness.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CircularProgress, Heading, Center } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 | Changing the thickness
7 |
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CircularProgress/TrackColor.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CircularProgress, Heading, Center } from 'native-base';
3 | import { text } from '@storybook/addon-knobs';
4 | export const Example = () => {
5 | return (
6 |
7 | Changing the TrackColor
8 |
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CloseButton/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CloseButton } from 'native-base';
3 | export const Example = () => {
4 | return ;
5 | };
6 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CloseButton/Sizes.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CloseButton, HStack } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/CloseButton/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 | import Basic from './Basic';
6 | import Sizes from './Sizes';
7 |
8 | storiesOf('CloseButton', module)
9 | .addDecorator(withKnobs)
10 | .addDecorator((getStory: any) => {getStory()})
11 | .add('Basic', () => )
12 | .add('Sizes', () => );
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Code/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Code } from 'native-base';
3 | export const Example = () => {
4 | return Hello World!;
5 | };
6 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Code/colors.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Code, Stack } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 | let direction = "row";
7 | console.log('Hey there!');
8 | yarn add native-base
9 | React Native
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Code/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 |
6 | import Basic from './Basic';
7 | import Colors from './colors';
8 |
9 | storiesOf('Code', module)
10 | .addDecorator(withKnobs)
11 | .addDecorator((getStory: any) => {getStory()})
12 | .add('Basic', () => )
13 | .add('Colors', () => );
14 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Container/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 | import { Example as Usage } from './usage';
6 | import { Example as Playground } from './Playground';
7 |
8 | storiesOf('Container', module)
9 | .addDecorator(withKnobs)
10 | .addDecorator((getStory: any) => {getStory()})
11 | .add('Playground', () => )
12 | .add('Usage', () => );
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Divider/Composition.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Divider, Flex, Text, Box } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 | Simple
9 |
10 | Easy
11 |
12 | Beautiful
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Drawer/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from '../../Wrapper';
5 | import Basic from './Basic';
6 |
7 | storiesOf('Drawer', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Fab/Basic.tsx:
--------------------------------------------------------------------------------
1 | import { Fab, Icon, Box } from 'native-base';
2 | import React from 'react';
3 | import { AntDesign } from '@expo/vector-icons';
4 |
5 | export const Example = () => {
6 | return (
7 |
8 | } size="sm" />}
12 | />
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Fab/CustomPosition.tsx:
--------------------------------------------------------------------------------
1 | import { Fab, Icon, Box } from 'native-base';
2 | import React from 'react';
3 | import { AntDesign } from '@expo/vector-icons';
4 |
5 | export const Example = () => {
6 | return (
7 |
8 | } />}
12 | />
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Fab/Kitchensink-Basic.tsx:
--------------------------------------------------------------------------------
1 | import { Fab, Icon, Box, NativeBaseProvider } from 'native-base';
2 | import React from 'react';
3 | import { AntDesign } from '@expo/vector-icons';
4 |
5 | export const Example = () => {
6 | return (
7 |
8 |
9 | } size="sm" />}
13 | />
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Fab/Kitchensink-CustomPosition.tsx:
--------------------------------------------------------------------------------
1 | import { Fab, Icon, NativeBaseProvider, Box } from 'native-base';
2 | import React from 'react';
3 | import { AntDesign } from '@expo/vector-icons';
4 |
5 | export const Example = () => {
6 | return (
7 |
8 |
9 | } />}
13 | />
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Kbd/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 | import Basic from './Basic';
6 |
7 | storiesOf('Kbd', module)
8 | .addDecorator(withKnobs)
9 | .addDecorator((getStory: any) => {getStory()})
10 | .add('Basic', () => );
11 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/NumberInput/Usage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Stack,
4 | NumberInput,
5 | NumberInputField,
6 | NumberInputStepper,
7 | NumberIncrementStepper,
8 | NumberDecrementStepper,
9 | } from 'native-base';
10 |
11 | export const Example = () => {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/PinInput/DefaultValue.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PinInput, Stack } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/PinInput/ManageFocus.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PinInput } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/PinInput/Placeholder.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PinInput } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/PinInput/Usage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PinInput } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Progress/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Box, Progress, Center } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Progress/CustomBgColor.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Box, Progress, Center } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 |
16 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Progress/Flat.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Box, Progress, Center } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/SimpleGrid/MinWidthColumns.tsx:
--------------------------------------------------------------------------------
1 | import { SimpleGrid, Box } from 'native-base';
2 | import React from 'react';
3 |
4 | const items = 12;
5 | const data = Array(items).fill(0);
6 |
7 | export default function MinChildWidthSimpleGrid() {
8 | return (
9 |
10 | {data.map((_item, index) => {
11 | return ;
12 | })}
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Skeleton/FadeDuration.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Skeleton, Stack } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 |
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Stat/Example.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Stat, Heading, Box } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 | Basic Stat Usage
8 |
9 | Amount
10 | £126.00
11 | Feb 12 - Feb 28
12 |
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Stat/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react-native';
3 | import { withKnobs } from '@storybook/addon-knobs';
4 | import Wrapper from './../../Wrapper';
5 | import Example from './Example';
6 | import Indicator from './Indicator';
7 |
8 | storiesOf('Stat', module)
9 | .addDecorator(withKnobs)
10 | .addDecorator((getStory: any) => {getStory()})
11 | .add('Default Stat', () => )
12 | .add('Stat with Indicator', () => );
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tabs/FittedTab.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tabs, Box } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 |
9 | One
10 | Two
11 | Three
12 | Four
13 |
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tabs/TabBarOnly.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tabs } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 | One
9 | Two
10 | Three
11 | {/* Four */}
12 |
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tabs/Usage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tabs } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
8 | TAB ONE
9 | TAB TWO
10 |
11 |
12 | One
13 | Two
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tag/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tag } from 'native-base';
3 |
4 | export const Example = () => {
5 | return NativeBase;
6 | };
7 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tag/Custom.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tag, Avatar } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
15 | Nativebase
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tag/Size.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tag, HStack } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 | {['sm', 'md', 'lg'].map((size) => (
8 |
9 | NativeBase
10 |
11 | ))}
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tag/Variants.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tag, HStack } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 | {['solid', 'subtle', 'outline'].map((variant: any) => (
8 |
9 | NativeBase
10 |
11 | ))}
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tag/WithIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tag, Icon } from 'native-base';
3 | import { MaterialIcons } from '@expo/vector-icons';
4 |
5 | export const Example = () => {
6 | return (
7 |
8 |
9 | Menu
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/TextField/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TextField } from 'native-base';
3 |
4 | export const Example = () => {
5 | return ;
6 | };
7 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Toast/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button, useToast, Center } from 'native-base';
3 |
4 | export const Example = () => {
5 | const toast = useToast();
6 |
7 | return (
8 |
9 |
18 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Toast/StandaloneToast.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button, Toast, Center } from 'native-base';
3 |
4 | export const Example = () => {
5 | return (
6 |
7 |
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tooltip/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tooltip, Button, Center } from 'native-base';
3 |
4 | export function Example() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Tooltip/CustomTooltip.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tooltip, Button, Center } from 'native-base';
3 |
4 | export function Example() {
5 | return (
6 |
7 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Wrap/AlignmentAlign.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Wrap, Center } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 |
7 | Box 1
8 |
9 |
10 | Box 2
11 |
12 |
13 | Box 3
14 |
15 |
16 | Box 4
17 |
18 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/Wrap/AlignmentJustify.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Wrap, Center } from 'native-base';
3 | export const Example = () => {
4 | return (
5 |
6 |
7 | Box 1
8 |
9 |
10 | Box 2
11 |
12 |
13 | Box 3
14 |
15 |
16 | Box 4
17 |
18 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/factory/modes.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Factory, themeTools } from 'native-base';
3 | import { View } from 'react-native';
4 |
5 | export const Example = () => {
6 | const FactoryView = Factory(View, {
7 | baseStyle: (props: any) => {
8 | return {
9 | bg: themeTools.mode('rose.500', 'cyan.300')(props),
10 | borderRadius: 'md',
11 | };
12 | },
13 | });
14 | return ;
15 | };
16 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/factory/theme.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Factory } from 'native-base';
3 | import { View } from 'react-native';
4 |
5 | export const Example = () => {
6 | const FactoryView = Factory(View, {
7 | baseStyle: {
8 | bg: 'cyan.300',
9 | borderRadius: 'md',
10 | },
11 | });
12 | return ;
13 | };
14 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/composites/factory/usage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Factory } from 'native-base';
3 | import { View } from 'react-native';
4 |
5 | export const Example = () => {
6 | const FactoryView = Factory(View);
7 | return ;
8 | };
9 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/perf/NBButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'native-base';
3 | export function NBButtons() {
4 | const foo = new Array(10).fill('hello');
5 | return (
6 | <>
7 | {foo.map((val, index) => (
8 |
11 | ))}
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/example/storybook/stories/components/perf/RNButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'react-native';
3 | export function RNButtons() {
4 | const foo = new Array(10).fill('hello');
5 | return (
6 | <>
7 | {foo.map((val, index) => (
8 |