├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ └── feature-request.md ├── PULL_REQUEST_TEMPLATE.md ├── actions │ └── install │ │ └── action.yml ├── release.yml └── workflows │ ├── bleeding-edge-dist-PR.yml │ ├── bleeding-edge-dist.yml │ ├── ci-checks.yml │ ├── docs.yml │ ├── expo-preview-PR.yml │ ├── expo.yml │ └── upgrade-expo-sdk.yml ├── .gitignore ├── .husky └── pre-commit ├── .prettierignore ├── .prettierrc ├── .yarn └── releases │ └── yarn-3.2.4.cjs ├── .yarnrc.yml ├── CHANGELOG.old.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── codecov.yml ├── example ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .watchmanconfig ├── App.tsx ├── README.md ├── app.json ├── app.web-build.json ├── assets │ ├── fonts │ │ ├── Georgia.ttf │ │ ├── Montserrat-Bold.ttf │ │ ├── Montserrat-Light.ttf │ │ ├── Montserrat-Regular.ttf │ │ ├── Ubuntu-Bold.ttf │ │ ├── Ubuntu-Light-Italic.ttf │ │ └── Ubuntu-Light.ttf │ ├── icons │ │ ├── icon.png │ │ └── loading.png │ ├── images │ │ ├── avatar1.jpg │ │ ├── bg_screen1.jpg │ │ ├── bg_screen2.jpg │ │ ├── bg_screen3.jpg │ │ ├── bg_screen4.jpg │ │ ├── user-cool.png │ │ ├── user-hp.png │ │ ├── user-student.png │ │ ├── wallpaper_1.jpg │ │ ├── wallpaper_2.jpg │ │ ├── wallpaper_3.jpg │ │ └── wallpaper_4.jpg │ └── mocks │ │ ├── 4e2c606885b9fb2d8aea70827e4949bf.jpg │ │ ├── Android-N-new-settings-ui-mockup.jpg │ │ ├── beautiful-list-ui-for-mobile-app-5.jpg │ │ └── iOS-10-vs-iOS-11-Settings.jpeg ├── babel.config.js ├── eas.json ├── index.js ├── metro.config.js ├── package.json ├── src │ ├── components │ │ ├── AppLoading.ts │ │ ├── AppLoading.web.tsx │ │ ├── LinearGradient.ts │ │ └── header.tsx │ ├── config │ │ ├── colors.ts │ │ ├── fonts.ts │ │ ├── socialColors.ts │ │ └── stack.ts │ ├── helpers │ │ ├── AssetsCaching.tsx │ │ ├── AssetsCaching.web.tsx │ │ ├── ThemeReducer.tsx │ │ ├── vector-fonts.ts │ │ └── vector-fonts.web.ts │ ├── images │ │ ├── logo.png │ │ ├── rating.png │ │ ├── shirt.png │ │ └── water.png │ ├── navigation │ │ ├── DrawerNavigator.tsx │ │ └── RootNavigator.tsx │ └── views │ │ ├── Divider.tsx │ │ ├── avatars.tsx │ │ ├── badge.tsx │ │ ├── bottomsheet.tsx │ │ ├── buttons.tsx │ │ ├── cards.tsx │ │ ├── checkbox.tsx │ │ ├── chips.tsx │ │ ├── dialogs.tsx │ │ ├── fab.tsx │ │ ├── fonts.tsx │ │ ├── image.tsx │ │ ├── inputs.tsx │ │ ├── linearProgress.tsx │ │ ├── lists │ │ ├── content.tsx │ │ └── index.tsx │ │ ├── lists2.tsx │ │ ├── login │ │ ├── index.tsx │ │ ├── screen2.tsx │ │ └── screen3.tsx │ │ ├── overlay.tsx │ │ ├── pricing.tsx │ │ ├── profile.tsx │ │ ├── ratings.tsx │ │ ├── settings.tsx │ │ ├── skeleton.tsx │ │ ├── sliders.tsx │ │ ├── social_icons.tsx │ │ ├── speedDial.tsx │ │ ├── tabs.tsx │ │ ├── text.tsx │ │ ├── theme.tsx │ │ ├── tiles.tsx │ │ ├── tooltip.tsx │ │ └── whatsappClone.tsx ├── tsconfig.json ├── web │ ├── favicon.png │ ├── index.html │ └── serve.json └── webpack.config.js ├── lerna.json ├── package.json ├── packages ├── base │ ├── .ci │ │ ├── setupTests.ts │ │ └── testHelper.tsx │ ├── .docgenignore │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── AirbnbRating │ │ │ ├── AirbnbRating.tsx │ │ │ └── index.tsx │ │ ├── Avatar │ │ │ ├── Avatar.Accessory.tsx │ │ │ ├── Avatar.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Accessory.test.tsx │ │ │ │ ├── Avatar.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ ├── Accessory.test.tsx.snap │ │ │ │ │ └── Avatar.test.tsx.snap │ │ │ └── index.tsx │ │ ├── Badge │ │ │ ├── Badge.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Badge.test.tsx │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── Badge.test.tsx.snap │ │ │ │ └── withBadge.test.tsx │ │ │ ├── index.tsx │ │ │ └── withBadge.tsx │ │ ├── BottomSheet │ │ │ ├── BottomSheet.tsx │ │ │ ├── __tests__ │ │ │ │ ├── BottomSheet.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── BottomSheet.test.tsx.snap │ │ │ └── index.tsx │ │ ├── Button │ │ │ ├── Button.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Button.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Button.test.tsx.snap │ │ │ └── index.tsx │ │ ├── ButtonGroup │ │ │ ├── ButtonGroup.tsx │ │ │ ├── __tests__ │ │ │ │ ├── ButtonGroup.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── ButtonGroup.test.tsx.snap │ │ │ └── index.tsx │ │ ├── Card │ │ │ ├── Card.Divider.tsx │ │ │ ├── Card.FeaturedSubtitle.tsx │ │ │ ├── Card.FeaturedTitle.tsx │ │ │ ├── Card.Image.tsx │ │ │ ├── Card.Title.tsx │ │ │ ├── Card.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Card.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Card.test.tsx.snap │ │ │ └── index.tsx │ │ ├── CheckBox │ │ │ ├── CheckBox.tsx │ │ │ ├── __tests__ │ │ │ │ ├── CheckBox.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── CheckBox.test.tsx.snap │ │ │ ├── components │ │ │ │ └── CheckBoxIcon.tsx │ │ │ └── index.tsx │ │ ├── Chip │ │ │ ├── Chip.tsx │ │ │ ├── __tests__ │ │ │ │ └── Chip.test.tsx │ │ │ └── index.tsx │ │ ├── Dialog │ │ │ ├── Dialog.Actions.tsx │ │ │ ├── Dialog.Button.tsx │ │ │ ├── Dialog.Loading.tsx │ │ │ ├── Dialog.Title.tsx │ │ │ ├── Dialog.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Dialog.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Dialog.test.tsx.snap │ │ │ └── index.tsx │ │ ├── Divider │ │ │ ├── Divider.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Divider.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Divider.test.tsx.snap │ │ │ └── index.tsx │ │ ├── FAB │ │ │ ├── FAB.tsx │ │ │ ├── __tests__ │ │ │ │ ├── FAB.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── FAB.test.tsx.snap │ │ │ └── index.tsx │ │ ├── Header │ │ │ ├── Header.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Header.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Header.test.tsx.snap │ │ │ ├── components │ │ │ │ ├── HeaderChildren.tsx │ │ │ │ └── HeaderIcon.tsx │ │ │ └── index.tsx │ │ ├── Icon │ │ │ ├── Icon.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Icon.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Icon.test.tsx.snap │ │ │ └── index.tsx │ │ ├── Image │ │ │ ├── Image.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Image.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Image.test.tsx.snap │ │ │ └── index.tsx │ │ ├── Input │ │ │ ├── Input.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Input.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Input.test.tsx.snap │ │ │ └── index.tsx │ │ ├── LinearProgress │ │ │ ├── LinearProgress.tsx │ │ │ ├── __tests__ │ │ │ │ ├── LinearProgress.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── LinearProgress.test.tsx.snap │ │ │ └── index.tsx │ │ ├── ListItem │ │ │ ├── ListItem.Accordion.tsx │ │ │ ├── ListItem.ButtonGroup.tsx │ │ │ ├── ListItem.CheckBox.tsx │ │ │ ├── ListItem.Chevron.tsx │ │ │ ├── ListItem.Content.tsx │ │ │ ├── ListItem.Input.tsx │ │ │ ├── ListItem.Subtitle.tsx │ │ │ ├── ListItem.Swipeable.tsx │ │ │ ├── ListItem.Title.tsx │ │ │ ├── ListItem.tsx │ │ │ ├── __tests__ │ │ │ │ ├── ListItem.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── ListItem.test.tsx.snap │ │ │ ├── components │ │ │ │ └── PadView.tsx │ │ │ └── index.tsx │ │ ├── Overlay │ │ │ ├── Overlay.tsx │ │ │ ├── __tests__ │ │ │ │ └── Overlay.test.tsx │ │ │ └── index.tsx │ │ ├── PricingCard │ │ │ ├── PricingCard.tsx │ │ │ ├── __tests__ │ │ │ │ ├── PricingCard.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── PricingCard.test.tsx.snap │ │ │ ├── components │ │ │ │ └── PricingButton.tsx │ │ │ └── index.tsx │ │ ├── Rating │ │ │ ├── Rating.tsx │ │ │ └── index.tsx │ │ ├── SearchBar │ │ │ ├── SearchBar-android.tsx │ │ │ ├── SearchBar-default.tsx │ │ │ ├── SearchBar-ios.tsx │ │ │ ├── SearchBar.tsx │ │ │ ├── __tests__ │ │ │ │ ├── SearchBar-android.test.tsx │ │ │ │ ├── SearchBar-default.test.tsx │ │ │ │ ├── SearchBar-ios.test.tsx │ │ │ │ ├── SearchBar.test.tsx │ │ │ │ ├── __snapshots__ │ │ │ │ │ ├── SearchBar-android.test.tsx.snap │ │ │ │ │ ├── SearchBar-default.test.tsx.snap │ │ │ │ │ └── SearchBar.test.tsx.snap │ │ │ │ └── common.tsx │ │ │ ├── index.tsx │ │ │ └── types.tsx │ │ ├── Skeleton │ │ │ ├── Skeleton.tsx │ │ │ ├── __tests__ │ │ │ │ └── Skeleton.test.tsx │ │ │ └── index.tsx │ │ ├── Slider │ │ │ ├── Slider.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Slider.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Slider.test.tsx.snap │ │ │ ├── components │ │ │ │ ├── Rect.tsx │ │ │ │ └── SliderThumb.tsx │ │ │ └── index.tsx │ │ ├── SocialIcon │ │ │ ├── SocialIcon.tsx │ │ │ ├── __tests__ │ │ │ │ └── SocialIcon.test.tsx │ │ │ └── index.tsx │ │ ├── SpeedDial │ │ │ ├── SpeedDial.Action.tsx │ │ │ ├── SpeedDial.tsx │ │ │ ├── __tests__ │ │ │ │ ├── SpeedDial.Action.test.tsx │ │ │ │ ├── SpeedDial.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── SpeedDial.test.tsx.snap │ │ │ └── index.tsx │ │ ├── Switch │ │ │ ├── Switch.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Switch.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ └── Switch.test.tsx.snap │ │ │ └── index.tsx │ │ ├── Tab │ │ │ ├── Tab.Item.tsx │ │ │ ├── Tab.tsx │ │ │ ├── __tests__ │ │ │ │ └── Tab.test.tsx │ │ │ └── index.tsx │ │ ├── TabView │ │ │ ├── TabView.Item.tsx │ │ │ ├── TabView.tsx │ │ │ ├── __tests__ │ │ │ │ └── TabView.test.tsx │ │ │ └── index.tsx │ │ ├── Text │ │ │ ├── Text.tsx │ │ │ ├── __tests__ │ │ │ │ └── Text.test.tsx │ │ │ └── index.tsx │ │ ├── Tile │ │ │ ├── Tile.tsx │ │ │ ├── __tests__ │ │ │ │ ├── FeaturedTile.test.tsx │ │ │ │ ├── Tile.test.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ ├── FeaturedTile.test.tsx.snap │ │ │ │ │ └── Tile.test.tsx.snap │ │ │ ├── components │ │ │ │ └── FeaturedTile.tsx │ │ │ └── index.tsx │ │ ├── Tooltip │ │ │ ├── Tooltip.tsx │ │ │ ├── __tests__ │ │ │ │ ├── Tooltip.test.tsx │ │ │ │ ├── Triangle.test.tsx │ │ │ │ ├── __snapshots__ │ │ │ │ │ ├── Tooltip.test.tsx.snap │ │ │ │ │ └── Triangle.test.tsx.snap │ │ │ │ └── getTooltipCoordinate.test.tsx │ │ │ ├── components │ │ │ │ └── Triangle.tsx │ │ │ ├── helpers │ │ │ │ ├── getTooltipCoordinate.tsx │ │ │ │ └── getTooltipStyle.tsx │ │ │ └── index.tsx │ │ ├── helpers │ │ │ ├── BackgroundImage.tsx │ │ │ ├── InlinePressableProps.tsx │ │ │ ├── __tests__ │ │ │ │ └── colors.test.tsx │ │ │ ├── colors.ts │ │ │ ├── fonts.tsx │ │ │ ├── getIconStyle.tsx │ │ │ ├── getIconType.tsx │ │ │ ├── index.tsx │ │ │ ├── makeStyles.ts │ │ │ ├── normalizeText.tsx │ │ │ └── renderNode.tsx │ │ └── index.ts │ └── tsconfig.json └── themed │ ├── .ci │ ├── setupTests.ts │ └── testHelper.tsx │ ├── .docgenignore │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ ├── AirbnbRating │ │ └── index.tsx │ ├── Avatar │ │ ├── __tests__ │ │ │ └── Avatar.test.tsx │ │ └── index.tsx │ ├── Badge │ │ ├── __tests__ │ │ │ ├── Badge.test.tsx │ │ │ └── withBadge.test.tsx │ │ └── index.tsx │ ├── BottomSheet │ │ ├── __tests__ │ │ │ └── BottomSheet.test.tsx │ │ └── index.tsx │ ├── Button │ │ ├── __tests__ │ │ │ └── Button.test.tsx │ │ └── index.tsx │ ├── ButtonGroup │ │ ├── __tests__ │ │ │ └── ButtonGroup.test.tsx │ │ └── index.tsx │ ├── Card │ │ ├── __tests__ │ │ │ └── Card.test.tsx │ │ └── index.tsx │ ├── CheckBox │ │ ├── __tests__ │ │ │ └── CheckBox.test.tsx │ │ └── index.tsx │ ├── Chip │ │ ├── __tests__ │ │ │ └── Chip.test.tsx │ │ └── index.tsx │ ├── Dialog │ │ ├── __tests__ │ │ │ └── Dialog.test.tsx │ │ └── index.tsx │ ├── Divider │ │ ├── __tests__ │ │ │ └── Divider.test.tsx │ │ └── index.tsx │ ├── FAB │ │ ├── __tests__ │ │ │ └── FAB.test.tsx │ │ └── index.tsx │ ├── Header │ │ ├── __tests__ │ │ │ └── Header.test.tsx │ │ └── index.tsx │ ├── Icon │ │ ├── __tests__ │ │ │ └── Icon.test.tsx │ │ └── index.tsx │ ├── Image │ │ ├── __tests__ │ │ │ └── Image.test.tsx │ │ └── index.tsx │ ├── Input │ │ ├── __tests__ │ │ │ └── Input.test.tsx │ │ └── index.tsx │ ├── LinearProgress │ │ ├── __tests__ │ │ │ └── LinearProgress.test.tsx │ │ └── index.tsx │ ├── ListItem │ │ ├── __tests__ │ │ │ └── ListItem.test.tsx │ │ └── index.tsx │ ├── Overlay │ │ ├── __tests__ │ │ │ └── Overlay.test.tsx │ │ └── index.tsx │ ├── PricingCard │ │ ├── __tests__ │ │ │ └── PricingCard.test.tsx │ │ └── index.tsx │ ├── Rating │ │ └── index.tsx │ ├── SearchBar │ │ ├── __tests__ │ │ │ ├── SearchBar.test.tsx │ │ │ └── __snapshots__ │ │ │ │ └── SearchBar.test.tsx.snap │ │ └── index.tsx │ ├── Skeleton │ │ ├── __tests__ │ │ │ └── Skeleton.test.tsx │ │ └── index.tsx │ ├── Slider │ │ ├── __tests__ │ │ │ └── Slider.test.tsx │ │ └── index.tsx │ ├── SocialIcon │ │ ├── __tests__ │ │ │ └── SocialIcon.test.tsx │ │ └── index.tsx │ ├── SpeedDial │ │ ├── __tests__ │ │ │ ├── SpeedDial.test.tsx │ │ │ └── __snapshots__ │ │ │ │ └── SpeedDial.test.tsx.snap │ │ └── index.tsx │ ├── Switch │ │ ├── __tests__ │ │ │ └── Switch.test.tsx │ │ └── index.tsx │ ├── Tab │ │ ├── __tests__ │ │ │ └── Tab.test.tsx │ │ └── index.tsx │ ├── TabView │ │ ├── __tests__ │ │ │ └── TabView.test.tsx │ │ └── index.tsx │ ├── Text │ │ ├── __tests__ │ │ │ └── Text.test.tsx │ │ └── index.tsx │ ├── Tile │ │ ├── __tests__ │ │ │ ├── FeaturedTile.test.tsx │ │ │ ├── Tile.test.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Tile.test.tsx.snap │ │ └── index.tsx │ ├── Tooltip │ │ ├── __tests__ │ │ │ ├── Tooltip.test.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Tooltip.test.tsx.snap │ │ └── index.tsx │ ├── config │ │ ├── ThemeProvider.tsx │ │ ├── __tests__ │ │ │ ├── ThemeProvider.test.tsx │ │ │ ├── makeStyles.test.tsx │ │ │ └── withTheme.test.tsx │ │ ├── colors.ts │ │ ├── index.ts │ │ ├── makeStyles.ts │ │ ├── theme.component.ts │ │ ├── theme.ts │ │ └── withTheme.tsx │ └── index.ts │ └── tsconfig.json ├── scripts ├── .eslintrc ├── docgen │ ├── README.md │ ├── docgenParser.ts │ ├── generateMarkdown.ts │ ├── index.ts │ ├── mdx-template.hbs │ ├── parentProps.ts │ ├── platformMappingHandler.ts │ ├── tsconfig.json │ └── utils.ts └── release │ ├── index.ts │ └── tsconfig.json ├── tsconfig.json ├── website ├── .gitignore ├── .yarn │ ├── plugins │ │ └── @yarnpkg │ │ │ └── plugin-interactive-tools.cjs │ └── releases │ │ └── yarn-3.2.4.cjs ├── .yarnrc.yml ├── README.md ├── blog │ ├── 2018-12-13-react-native-web.md │ ├── 2019-01-27-1.0-release.md │ ├── 2020-08-10-2.3-upgrade-guide.md │ ├── 2021-08-12-auto-generation-of-docs.md │ ├── 2021-08-18-google-summer-of-code-khushal-agarwal.md │ ├── 2021-08-23-google-summer-of-code-arpitBhalla.md │ ├── 2022-05-15-rneui-migration-guide.md │ └── authors.yml ├── docs │ ├── component_usage │ │ ├── AirbnbRating.mdx │ │ ├── Avatar.mdx │ │ ├── Badge.mdx │ │ ├── BottomSheet.mdx │ │ ├── Button.mdx │ │ ├── ButtonGroup.mdx │ │ ├── Card.mdx │ │ ├── CheckBox.mdx │ │ ├── Chip.mdx │ │ ├── Dialog.mdx │ │ ├── Divider.mdx │ │ ├── FAB.mdx │ │ ├── Header.mdx │ │ ├── Icon.mdx │ │ ├── Image.mdx │ │ ├── Input.mdx │ │ ├── LinearProgress.mdx │ │ ├── ListItem.Accordion.mdx │ │ ├── ListItem.Swipeable.mdx │ │ ├── ListItem.mdx │ │ ├── Overlay.mdx │ │ ├── PricingCard.mdx │ │ ├── Rating.mdx │ │ ├── SearchBar.mdx │ │ ├── Slider.mdx │ │ ├── SocialIcon.mdx │ │ ├── SpeedDial.mdx │ │ ├── Switch.mdx │ │ ├── Tab.mdx │ │ ├── TabView.mdx │ │ ├── Text.mdx │ │ ├── Tile.mdx │ │ └── Tooltip.mdx │ ├── components │ │ ├── AirbnbRating.mdx │ │ ├── Avatar.Accessory.mdx │ │ ├── Avatar.mdx │ │ ├── Badge.mdx │ │ ├── BottomSheet.mdx │ │ ├── Button.mdx │ │ ├── ButtonGroup.mdx │ │ ├── Card.Divider.mdx │ │ ├── Card.FeaturedSubtitle.mdx │ │ ├── Card.FeaturedTitle.mdx │ │ ├── Card.Image.mdx │ │ ├── Card.Title.mdx │ │ ├── Card.mdx │ │ ├── CheckBox.mdx │ │ ├── Chip.mdx │ │ ├── Dialog.Actions.mdx │ │ ├── Dialog.Button.mdx │ │ ├── Dialog.Loading.mdx │ │ ├── Dialog.Title.mdx │ │ ├── Dialog.mdx │ │ ├── Divider.mdx │ │ ├── FAB.mdx │ │ ├── Header.mdx │ │ ├── Icon.mdx │ │ ├── Image.mdx │ │ ├── Input.mdx │ │ ├── LinearProgress.mdx │ │ ├── ListItem.Accordion.mdx │ │ ├── ListItem.ButtonGroup.mdx │ │ ├── ListItem.CheckBox.mdx │ │ ├── ListItem.Chevron.mdx │ │ ├── ListItem.Content.mdx │ │ ├── ListItem.Input.mdx │ │ ├── ListItem.Subtitle.mdx │ │ ├── ListItem.Swipeable.mdx │ │ ├── ListItem.Title.mdx │ │ ├── ListItem.mdx │ │ ├── Overlay.mdx │ │ ├── PricingCard.mdx │ │ ├── Rating.mdx │ │ ├── SearchBar.mdx │ │ ├── Skeleton.mdx │ │ ├── Slider.mdx │ │ ├── SocialIcon.mdx │ │ ├── SpeedDial.Action.mdx │ │ ├── SpeedDial.mdx │ │ ├── Switch.mdx │ │ ├── Tab.Item.mdx │ │ ├── Tab.mdx │ │ ├── TabView.Item.mdx │ │ ├── TabView.mdx │ │ ├── Text.mdx │ │ ├── Tile.mdx │ │ └── Tooltip.mdx │ ├── customization │ │ ├── 0.index.mdx │ │ ├── 1.themeprovider.mdx │ │ ├── 2.theme_object.mdx │ │ ├── 3.extending.mdx │ │ ├── 4.pitfall.mdx │ │ └── Color.tsx │ ├── index.mdx │ ├── installation.mdx │ ├── migration-guide.md │ ├── repo │ │ ├── contributing.mdx │ │ ├── labels.md │ │ └── testing.md │ ├── troubleshooting.mdx │ └── universe │ │ └── getting_started.md ├── docusaurus.config.js ├── i18n │ └── en.json ├── package.json ├── playground │ ├── AirbnbRating │ │ └── airbnbrating.playground.tsx │ ├── Avatar │ │ └── avatar.playground.tsx │ ├── Badge │ │ └── badge.playground.tsx │ ├── BottomSheet │ │ └── bottomsheet.playground.tsx │ ├── Button │ │ └── button.playground.tsx │ ├── ButtonGroup │ │ └── buttongroup.playground.tsx │ ├── Card │ │ └── card.playground.tsx │ ├── CheckBox │ │ └── checkbox.playground.tsx │ ├── Divider │ │ └── divider.playground.tsx │ ├── FAB │ │ └── fab.playground.tsx │ ├── Header │ │ └── header.playground.tsx │ ├── Icon │ │ └── icon.playground.tsx │ ├── Image │ │ └── input.playground.tsx │ ├── Input │ │ └── input.playground.tsx │ ├── LinearProgress │ │ └── linearprogress.playground.tsx │ ├── ListItem │ │ └── listitem.playground.tsx │ ├── Pricing │ │ └── pricing.playground.tsx │ ├── Rating │ │ └── rating.playground.tsx │ ├── SearchBar │ │ └── searchbar.playground.tsx │ ├── SkippedOverlay │ │ └── overlay.playground.tsx │ ├── SkippedToolTip │ │ └── tooltip.playground.tsx │ ├── Slider │ │ └── slider.playground.tsx │ ├── SocialIcon │ │ └── socialicon.playground.tsx │ ├── SpeedDial │ │ └── speeddial.playground.tsx │ ├── Switch │ │ └── switch.playground.tsx │ ├── Tab │ │ └── tab.playground.tsx │ ├── Text │ │ └── text.playground.tsx │ ├── Tile │ │ └── tile.playground.tsx │ └── utils │ │ └── createReactViewBaseConfig.js ├── plugins │ ├── react-native-elements-web.js │ └── remark-snackplayer.js ├── sidebars.ts ├── snackPlayerInitializer.js ├── sponsors.config.ts ├── src │ ├── components │ │ ├── Community.tsx │ │ ├── Docs_Icons.tsx │ │ ├── Extentions.tsx │ │ ├── Features.tsx │ │ ├── Hero.tsx │ │ ├── IconTag.tsx │ │ ├── Installation.tsx │ │ ├── OpenCollective.tsx │ │ ├── Playground.tsx │ │ ├── RunOnExpo.tsx │ │ ├── SectionHeader.tsx │ │ ├── Sponsor.tsx │ │ └── StartNow.tsx │ ├── pages │ │ ├── help.tsx │ │ ├── index.tsx │ │ ├── migration-guides.md │ │ ├── sponsor.tsx │ │ ├── team.tsx │ │ └── versions.tsx │ └── theme │ │ ├── Footer.tsx │ │ ├── Playground │ │ ├── index.js │ │ └── styles.module.css │ │ └── ReactLiveScope │ │ └── index.js ├── static │ ├── CNAME │ ├── css │ │ ├── components.css │ │ ├── custom.css │ │ ├── modules.css │ │ ├── syntax.css │ │ └── toggler.css │ └── img │ │ ├── SpeedDial.gif │ │ ├── accorsion.gif │ │ ├── app-preview.png │ │ ├── arcSlider.png │ │ ├── avatar │ │ ├── avatar--edit.jpg │ │ ├── avatar--icon.jpg │ │ ├── avatar--photo.jpg │ │ └── avatar--title.jpg │ │ ├── avatar_all.png │ │ ├── avatar_with_icons.png │ │ ├── avatar_with_images.png │ │ ├── avatar_with_initials.png │ │ ├── avatar_with_title_placeholder.gif │ │ ├── badge │ │ ├── badge--indicator.jpg │ │ ├── badge--mini.jpg │ │ ├── badge--standard.jpg │ │ └── badge--withBadge.png │ │ ├── badges.png │ │ ├── bottomsheet.gif │ │ ├── button │ │ ├── button--clear.jpg │ │ ├── button--outline.jpg │ │ └── button--solid.jpg │ │ ├── button_group.png │ │ ├── buttons.png │ │ ├── buttons_0.19.png │ │ ├── card.png │ │ ├── checkbox.png │ │ ├── chip │ │ ├── chip--outline.jpg │ │ └── chip--solid.jpg │ │ ├── circularSlider1.gif │ │ ├── circularSlider2.gif │ │ ├── dialog │ │ ├── dialog--custom1.gif │ │ ├── dialog--custom2.gif │ │ ├── dialog--loading.gif │ │ ├── dialog--multi.jpg │ │ ├── dialog--noaction.jpg │ │ └── dialog--simple.jpg │ │ ├── fab.png │ │ ├── favicon.png │ │ ├── forms_fields.png │ │ ├── forms_validation.png │ │ ├── header-left.png │ │ ├── header.png │ │ ├── icons.png │ │ ├── input.png │ │ ├── input │ │ ├── input--label.png │ │ └── input--placeholder.png │ │ ├── input_with_explanation.png │ │ ├── input_without_explanation.png │ │ ├── linearProgress.gif │ │ ├── list-badges.jpeg │ │ ├── listitem_with_gradient_scale.gif │ │ ├── lists.png │ │ ├── logo-icon.svg │ │ ├── logo.png │ │ ├── overlay.png │ │ ├── peer-dep-error.png │ │ ├── pricing.png │ │ ├── rating_component.gif │ │ ├── rating_readonly.jpg │ │ ├── react-native-training.png │ │ ├── searchbar.png │ │ ├── slider_screenshot.png │ │ ├── social-icons.png │ │ ├── speeddial.png │ │ ├── swipeable.gif │ │ ├── switch_gif.gif │ │ ├── tab.jpg │ │ ├── text.png │ │ ├── tooltipExample.gif │ │ └── website │ │ ├── Expo Go.png │ │ ├── app-preview2.png │ │ ├── app-preview3.png │ │ ├── bootstrap.svg │ │ ├── ci-checks.png │ │ ├── design.svg │ │ ├── explore.svg │ │ ├── expo-go-qr.svg │ │ ├── logo.png │ │ ├── seo.png │ │ ├── slack.png │ │ ├── start_now.png │ │ ├── tweak.svg │ │ ├── vsc_ext.png │ │ └── vscode.svg ├── tsconfig.json ├── versioned_docs │ ├── version-1.2.0 │ │ ├── avatar.md │ │ ├── badge.md │ │ ├── button.md │ │ ├── button_group.md │ │ ├── card.md │ │ ├── checkbox.md │ │ ├── contributing.md │ │ ├── customization.md │ │ ├── divider.md │ │ ├── getting_started.md │ │ ├── header.md │ │ ├── icon.md │ │ ├── image.md │ │ ├── input.md │ │ ├── labels.md │ │ ├── listitem.md │ │ ├── overlay.md │ │ ├── overview.md │ │ ├── pricing.md │ │ ├── rating.md │ │ ├── searchbar.md │ │ ├── slider.md │ │ ├── social_icons.md │ │ ├── testing.md │ │ ├── text.md │ │ ├── tile.md │ │ ├── tooltip.md │ │ ├── troubleshooting.md │ │ └── web_usage.md │ ├── version-2.3.2 │ │ ├── avatar.md │ │ ├── badge.md │ │ ├── bottomsheet.md │ │ ├── button.md │ │ ├── button_group.md │ │ ├── card.md │ │ ├── checkbox.md │ │ ├── contributing.md │ │ ├── customization.md │ │ ├── divider.md │ │ ├── getting_started.md │ │ ├── header.md │ │ ├── icon.md │ │ ├── image.md │ │ ├── input.md │ │ ├── labels.md │ │ ├── listitem.md │ │ ├── overlay.md │ │ ├── overview.md │ │ ├── pricing.md │ │ ├── rating.md │ │ ├── searchbar.md │ │ ├── slider.md │ │ ├── social_icons.md │ │ ├── testing.md │ │ ├── text.md │ │ ├── tile.md │ │ ├── tooltip.md │ │ ├── troubleshooting.md │ │ └── web_usage.md │ ├── version-3.4.2 │ │ ├── avatar.md │ │ ├── badge.md │ │ ├── bottomsheet.md │ │ ├── button.md │ │ ├── button_group.md │ │ ├── card.md │ │ ├── checkbox.md │ │ ├── chip.md │ │ ├── circularSlider.md │ │ ├── contributing.md │ │ ├── customization.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── fab.md │ │ ├── getting_started.md │ │ ├── header.md │ │ ├── icon.md │ │ ├── image.md │ │ ├── input.md │ │ ├── labels.md │ │ ├── linearProgress.md │ │ ├── listitem.md │ │ ├── overlay.md │ │ ├── overview.md │ │ ├── pricing.md │ │ ├── props │ │ │ ├── avatar.md │ │ │ ├── badge.md │ │ │ ├── bottomsheet.md │ │ │ ├── button.md │ │ │ ├── button_group.md │ │ │ ├── card.md │ │ │ ├── checkbox.md │ │ │ ├── chip.md │ │ │ ├── circularslider.md │ │ │ ├── dialog.md │ │ │ ├── divider.md │ │ │ ├── fab.md │ │ │ ├── header.md │ │ │ ├── icon.md │ │ │ ├── image.md │ │ │ ├── input.md │ │ │ ├── linearProgress.md │ │ │ ├── listitem.md │ │ │ ├── overlay.md │ │ │ ├── pricing.md │ │ │ ├── rating.md │ │ │ ├── searchbar.md │ │ │ ├── slider.md │ │ │ ├── social_icons.md │ │ │ ├── speeddial.md │ │ │ ├── switch.md │ │ │ ├── tab.md │ │ │ ├── text.md │ │ │ ├── tile.md │ │ │ └── tooltip.md │ │ ├── rating.md │ │ ├── searchbar.md │ │ ├── slider.md │ │ ├── social_icons.md │ │ ├── speeddial.md │ │ ├── switch.md │ │ ├── tab.md │ │ ├── testing.md │ │ ├── text.md │ │ ├── tile.md │ │ ├── tooltip.md │ │ ├── troubleshooting.md │ │ └── web_usage.md │ ├── version-4.0.0-beta.0 │ │ ├── contributing.md │ │ ├── customization.md │ │ ├── getting_started.md │ │ ├── main │ │ │ ├── AirbnbRating.md │ │ │ ├── Avatar.md │ │ │ ├── Badge.md │ │ │ ├── BottomSheet.md │ │ │ ├── Button.md │ │ │ ├── ButtonGroup.md │ │ │ ├── Card.md │ │ │ ├── CheckBox.md │ │ │ ├── Chip.md │ │ │ ├── Dialog.md │ │ │ ├── Divider.md │ │ │ ├── FAB.md │ │ │ ├── Header.md │ │ │ ├── Icon.md │ │ │ ├── Image.md │ │ │ ├── Input.md │ │ │ ├── LinearProgress.md │ │ │ ├── ListItem.md │ │ │ ├── Overlay.md │ │ │ ├── PricingCard.md │ │ │ ├── Rating.md │ │ │ ├── SearchBar.md │ │ │ ├── Slider.md │ │ │ ├── SocialIcon.md │ │ │ ├── SpeedDial.md │ │ │ ├── Switch.md │ │ │ ├── Tab.md │ │ │ ├── TabView.md │ │ │ ├── Text.md │ │ │ ├── Tile.md │ │ │ ├── Tooltip.md │ │ │ └── usage │ │ │ │ ├── AirbnbRating │ │ │ │ ├── AirbnbRating.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Avatar │ │ │ │ ├── Avatar.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Badge │ │ │ │ ├── Badge.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── BottomSheet │ │ │ │ ├── BottomSheet.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Button │ │ │ │ ├── Button.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── ButtonGroup │ │ │ │ ├── ButtonGroup.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Card │ │ │ │ ├── Card.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── CheckBox │ │ │ │ ├── CheckBox.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Chip │ │ │ │ ├── Chip.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Dialog │ │ │ │ ├── Dialog.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Divider │ │ │ │ ├── Divider.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── FAB │ │ │ │ ├── FAB.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Header │ │ │ │ ├── Header.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Icon │ │ │ │ ├── Icon.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Image │ │ │ │ ├── Image.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Input │ │ │ │ ├── Input.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── LinearProgress │ │ │ │ ├── LinearProgress.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── ListItem │ │ │ │ ├── ListItem.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Overlay │ │ │ │ ├── Overlay.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── PricingCard │ │ │ │ ├── PricingCard.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Rating │ │ │ │ ├── Rating.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── SearchBar │ │ │ │ ├── SearchBar.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Slider │ │ │ │ ├── Slider.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── SocialIcon │ │ │ │ ├── SocialIcon.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── SpeedDial │ │ │ │ ├── SpeedDial.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Switch │ │ │ │ ├── Switch.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Tab │ │ │ │ ├── Tab.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── TabView │ │ │ │ └── TabView.md │ │ │ │ ├── Text │ │ │ │ ├── Text.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ ├── Tile │ │ │ │ ├── Tile.md │ │ │ │ └── snack │ │ │ │ │ └── index.md │ │ │ │ └── Tooltip │ │ │ │ ├── Tooltip.md │ │ │ │ └── snack │ │ │ │ └── index.md │ │ ├── migration-v4.md │ │ ├── overview.md │ │ ├── repo │ │ │ ├── labels.md │ │ │ └── testing.md │ │ ├── troubleshooting.md │ │ ├── universe │ │ │ ├── circularSlider.md │ │ │ └── props │ │ │ │ └── circularslider.md │ │ └── web_usage.md │ ├── version-4.0.0-rc.1 │ │ ├── component_usage │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── components │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.Accessory.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Card.Image.mdx │ │ │ ├── Card.Title.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Dialog.Loading.mdx │ │ │ ├── Dialog.Title.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.ButtonGroup.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── ListItem.Chevron.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.Title.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Skeleton.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.Action.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.Item.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── customization │ │ │ ├── Color.tsx │ │ │ ├── color.mdx │ │ │ ├── components.mdx │ │ │ ├── overview.mdx │ │ │ ├── pitfall.mdx │ │ │ ├── theming.mdx │ │ │ └── typescript.mdx │ │ ├── index.mdx │ │ ├── installation.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ ├── contributing.mdx │ │ │ ├── labels.md │ │ │ └── testing.md │ │ ├── troubleshooting.md │ │ └── universe │ │ │ ├── CircularSlider.mdx │ │ │ └── getting_started.md │ ├── version-4.0.0-rc.2 │ │ ├── component_usage │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── components │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.Accessory.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Card.Image.mdx │ │ │ ├── Card.Title.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Dialog.Loading.mdx │ │ │ ├── Dialog.Title.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.ButtonGroup.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── ListItem.Chevron.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.Title.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Skeleton.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.Action.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.Item.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── customization │ │ │ ├── Color.tsx │ │ │ ├── color.mdx │ │ │ ├── components.mdx │ │ │ ├── index.mdx │ │ │ ├── pitfall.mdx │ │ │ ├── theming.mdx │ │ │ └── typescript.mdx │ │ ├── index.mdx │ │ ├── installation.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ ├── contributing.mdx │ │ │ ├── labels.md │ │ │ └── testing.md │ │ ├── troubleshooting.md │ │ └── universe │ │ │ ├── CircularSlider.mdx │ │ │ └── getting_started.md │ ├── version-4.0.0-rc.3 │ │ ├── component_usage │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── components │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.Accessory.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Card.Image.mdx │ │ │ ├── Card.Title.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Dialog.Loading.mdx │ │ │ ├── Dialog.Title.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.ButtonGroup.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── ListItem.Chevron.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.Title.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Skeleton.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.Action.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.Item.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── customization │ │ │ ├── 0.index.mdx │ │ │ ├── 1.themprovider.mdx │ │ │ ├── 2.theme object.mdx │ │ │ ├── 3.typescript.mdx │ │ │ ├── 4.pitfall.mdx │ │ │ └── Color.tsx │ │ ├── index.mdx │ │ ├── installation.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ ├── contributing.mdx │ │ │ ├── labels.md │ │ │ └── testing.md │ │ ├── troubleshooting.mdx │ │ └── universe │ │ │ └── getting_started.md │ ├── version-4.0.0-rc.4 │ │ ├── component_usage │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── components │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.Accessory.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Card.Image.mdx │ │ │ ├── Card.Title.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Dialog.Loading.mdx │ │ │ ├── Dialog.Title.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.ButtonGroup.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── ListItem.Chevron.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.Title.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Skeleton.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.Action.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.Item.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── customization │ │ │ ├── 0.index.mdx │ │ │ ├── 1.themprovider.mdx │ │ │ ├── 2.theme object.mdx │ │ │ ├── 3.typescript.mdx │ │ │ ├── 4.pitfall.mdx │ │ │ └── Color.tsx │ │ ├── index.mdx │ │ ├── installation.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ ├── contributing.mdx │ │ │ ├── labels.md │ │ │ └── testing.md │ │ ├── troubleshooting.mdx │ │ └── universe │ │ │ └── getting_started.md │ ├── version-4.0.0-rc.5 │ │ ├── component_usage │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── components │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.Accessory.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Card.Image.mdx │ │ │ ├── Card.Title.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Dialog.Loading.mdx │ │ │ ├── Dialog.Title.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.ButtonGroup.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── ListItem.Chevron.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.Title.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Skeleton.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.Action.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.Item.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── customization │ │ │ ├── 0.index.mdx │ │ │ ├── 1.themprovider.mdx │ │ │ ├── 2.theme object.mdx │ │ │ ├── 3.typescript.mdx │ │ │ ├── 4.pitfall.mdx │ │ │ └── Color.tsx │ │ ├── index.mdx │ │ ├── installation.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ ├── contributing.mdx │ │ │ ├── labels.md │ │ │ └── testing.md │ │ ├── troubleshooting.mdx │ │ └── universe │ │ │ └── getting_started.md │ ├── version-4.0.0-rc.6 │ │ ├── component_usage │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── components │ │ │ ├── AirbnbRating.mdx │ │ │ ├── Avatar.Accessory.mdx │ │ │ ├── Avatar.mdx │ │ │ ├── Badge.mdx │ │ │ ├── BottomSheet.mdx │ │ │ ├── Button.mdx │ │ │ ├── ButtonGroup.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Card.Image.mdx │ │ │ ├── Card.Title.mdx │ │ │ ├── Card.mdx │ │ │ ├── CheckBox.mdx │ │ │ ├── Chip.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Dialog.Loading.mdx │ │ │ ├── Dialog.Title.mdx │ │ │ ├── Dialog.mdx │ │ │ ├── Divider.mdx │ │ │ ├── FAB.mdx │ │ │ ├── Header.mdx │ │ │ ├── Icon.mdx │ │ │ ├── Image.mdx │ │ │ ├── Input.mdx │ │ │ ├── LinearProgress.mdx │ │ │ ├── ListItem.Accordion.mdx │ │ │ ├── ListItem.ButtonGroup.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── ListItem.Chevron.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ ├── ListItem.Swipeable.mdx │ │ │ ├── ListItem.Title.mdx │ │ │ ├── ListItem.mdx │ │ │ ├── Overlay.mdx │ │ │ ├── PricingCard.mdx │ │ │ ├── Rating.mdx │ │ │ ├── SearchBar.mdx │ │ │ ├── Skeleton.mdx │ │ │ ├── Slider.mdx │ │ │ ├── SocialIcon.mdx │ │ │ ├── SpeedDial.Action.mdx │ │ │ ├── SpeedDial.mdx │ │ │ ├── Switch.mdx │ │ │ ├── Tab.Item.mdx │ │ │ ├── Tab.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Tile.mdx │ │ │ └── Tooltip.mdx │ │ ├── customization │ │ │ ├── 0.index.mdx │ │ │ ├── 1.themprovider.mdx │ │ │ ├── 2.theme object.mdx │ │ │ ├── 3.typescript.mdx │ │ │ ├── 4.pitfall.mdx │ │ │ └── Color.tsx │ │ ├── index.mdx │ │ ├── installation.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ ├── contributing.mdx │ │ │ ├── labels.md │ │ │ └── testing.md │ │ ├── troubleshooting.mdx │ │ └── universe │ │ │ └── getting_started.md │ └── version-4.0.0-rc.7 │ │ ├── component_usage │ │ ├── AirbnbRating.mdx │ │ ├── Avatar.mdx │ │ ├── Badge.mdx │ │ ├── BottomSheet.mdx │ │ ├── Button.mdx │ │ ├── ButtonGroup.mdx │ │ ├── Card.mdx │ │ ├── CheckBox.mdx │ │ ├── Chip.mdx │ │ ├── Dialog.mdx │ │ ├── Divider.mdx │ │ ├── FAB.mdx │ │ ├── Header.mdx │ │ ├── Icon.mdx │ │ ├── Image.mdx │ │ ├── Input.mdx │ │ ├── LinearProgress.mdx │ │ ├── ListItem.Accordion.mdx │ │ ├── ListItem.Swipeable.mdx │ │ ├── ListItem.mdx │ │ ├── Overlay.mdx │ │ ├── PricingCard.mdx │ │ ├── Rating.mdx │ │ ├── SearchBar.mdx │ │ ├── Slider.mdx │ │ ├── SocialIcon.mdx │ │ ├── SpeedDial.mdx │ │ ├── Switch.mdx │ │ ├── Tab.mdx │ │ ├── TabView.mdx │ │ ├── Text.mdx │ │ ├── Tile.mdx │ │ └── Tooltip.mdx │ │ ├── components │ │ ├── AirbnbRating.mdx │ │ ├── Avatar.Accessory.mdx │ │ ├── Avatar.mdx │ │ ├── Badge.mdx │ │ ├── BottomSheet.mdx │ │ ├── Button.mdx │ │ ├── ButtonGroup.mdx │ │ ├── Card.Divider.mdx │ │ ├── Card.FeaturedSubtitle.mdx │ │ ├── Card.FeaturedTitle.mdx │ │ ├── Card.Image.mdx │ │ ├── Card.Title.mdx │ │ ├── Card.mdx │ │ ├── CheckBox.mdx │ │ ├── Chip.mdx │ │ ├── Dialog.Actions.mdx │ │ ├── Dialog.Button.mdx │ │ ├── Dialog.Loading.mdx │ │ ├── Dialog.Title.mdx │ │ ├── Dialog.mdx │ │ ├── Divider.mdx │ │ ├── FAB.mdx │ │ ├── Header.mdx │ │ ├── Icon.mdx │ │ ├── Image.mdx │ │ ├── Input.mdx │ │ ├── LinearProgress.mdx │ │ ├── ListItem.Accordion.mdx │ │ ├── ListItem.ButtonGroup.mdx │ │ ├── ListItem.CheckBox.mdx │ │ ├── ListItem.Chevron.mdx │ │ ├── ListItem.Content.mdx │ │ ├── ListItem.Input.mdx │ │ ├── ListItem.Subtitle.mdx │ │ ├── ListItem.Swipeable.mdx │ │ ├── ListItem.Title.mdx │ │ ├── ListItem.mdx │ │ ├── Overlay.mdx │ │ ├── PricingCard.mdx │ │ ├── Rating.mdx │ │ ├── SearchBar.mdx │ │ ├── Skeleton.mdx │ │ ├── Slider.mdx │ │ ├── SocialIcon.mdx │ │ ├── SpeedDial.Action.mdx │ │ ├── SpeedDial.mdx │ │ ├── Switch.mdx │ │ ├── Tab.Item.mdx │ │ ├── Tab.mdx │ │ ├── TabView.Item.mdx │ │ ├── TabView.mdx │ │ ├── Text.mdx │ │ ├── Tile.mdx │ │ └── Tooltip.mdx │ │ ├── customization │ │ ├── 0.index.mdx │ │ ├── 1.themeprovider.mdx │ │ ├── 2.theme_object.mdx │ │ ├── 3.extending.mdx │ │ ├── 4.pitfall.mdx │ │ └── Color.tsx │ │ ├── index.mdx │ │ ├── installation.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ ├── contributing.mdx │ │ ├── labels.md │ │ └── testing.md │ │ ├── troubleshooting.mdx │ │ └── universe │ │ └── getting_started.md ├── versioned_sidebars │ ├── version-1.2.0-sidebars.json │ ├── version-2.3.2-sidebars.json │ ├── version-3.4.2-sidebars.json │ ├── version-4.0.0-beta.0-sidebars.json │ ├── version-4.0.0-rc.0-sidebars.json │ ├── version-4.0.0-rc.1-sidebars.json │ ├── version-4.0.0-rc.2-sidebars.json │ ├── version-4.0.0-rc.3-sidebars.json │ ├── version-4.0.0-rc.4-sidebars.json │ ├── version-4.0.0-rc.5-sidebars.json │ ├── version-4.0.0-rc.6-sidebars.json │ └── version-4.0.0-rc.7-sidebars.json ├── versions.json └── yarn.lock └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | website/** 2 | **/coverage/** 3 | **/dist/** 4 | **/__tests__/** 5 | **/CHANGELOG.md 6 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@react-native-community", 3 | "rules": { 4 | "react-native/no-inline-styles": 0, 5 | "@typescript-eslint/no-unused-vars": [ 6 | "error", 7 | { "ignoreRestSiblings": true } 8 | ], 9 | "no-console": ["error", { "allow": ["warn", "error"] }] 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | open_collective: react-native-elements 2 | github: react-native-elements 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: 🤔 Questions and Help 4 | url: https://github.com/react-native-elements/react-native-elements/discussions/new 5 | about: Want to ask something? Create new Discussion. 6 | - name: ⚛️ React Native Issues 7 | url: https://github.com/facebook/react-native/issues 8 | about: Please report bugs or issues in the React Native repository. 9 | - name: 😄 Want to say Hi? Join Discord 10 | url: https://discord.com/invite/e9RBHjkKHa 11 | about: Looking for help with your app? Please refer to the React Native Element's discord server. 12 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 💡 Feature Request 3 | about: Suggest an idea or enhancement for this project 4 | --- 5 | 6 | **Is your feature request related to a problem? Please Describe.** 7 | 8 | 9 | 10 | **Describe the solution you'd like** 11 | 12 | 13 | 14 | **Describe alternatives you've considered** 15 | 16 | 17 | 18 | **Additional context** 19 | 20 | 21 | -------------------------------------------------------------------------------- /.github/release.yml: -------------------------------------------------------------------------------- 1 | changelog: 2 | exclude: 3 | labels: 4 | - ignore-for-release 5 | - invalid 6 | - Blocked 7 | authors: 8 | - dependabot 9 | categories: 10 | - title: ":boom: Breaking Change" 11 | labels: 12 | - "PR: Breaking Change :boom:" 13 | - title: ":rocket: New Feature" 14 | labels: 15 | - "PR: New Feature :tada:" 16 | - title: ":bug: Bug Fix" 17 | labels: 18 | - "PR: Bug Fix :bug:" 19 | - title: ":memo: Documentation" 20 | labels: 21 | - "PR: Docs :memo:" 22 | - title: Other Changes 23 | labels: 24 | - "*" 25 | -------------------------------------------------------------------------------- /.github/workflows/expo.yml: -------------------------------------------------------------------------------- 1 | name: (manual) Expo default Channel 2 | 3 | on: workflow_dispatch 4 | 5 | jobs: 6 | publish: 7 | continue-on-error: true 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - name: 🏗 Setup repo 12 | uses: actions/checkout@v2 13 | 14 | - name: Install dependencies 15 | uses: ./.github/actions/install 16 | 17 | - name: 🏗 Setup Expo 18 | uses: expo/expo-github-action@v7 19 | with: 20 | expo-version: latest 21 | token: ${{ secrets.EXPO_TOKEN }} 22 | 23 | - name: 🚀 Publish preview 24 | run: | 25 | cd example 26 | expo publish --non-interactive 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules 3 | .DS_Store 4 | .pnp.* 5 | .yarn/* 6 | !.yarn/patches 7 | !.yarn/plugins 8 | !.yarn/releases 9 | !.yarn/sdks 10 | !.yarn/versions 11 | *.log 12 | site 13 | coverage 14 | jsconfig.json 15 | .vscode/ 16 | .idea/ 17 | website/build 18 | package-lock.json 19 | build 20 | *.orig 21 | .changelog 22 | .docgen/ 23 | .expo/* 24 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | coverage 2 | **/coverage 3 | **/dist 4 | **/CHANGELOG.md 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "auto" 5 | } 6 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-3.2.4.cjs 4 | -------------------------------------------------------------------------------- /codecov.yml: -------------------------------------------------------------------------------- 1 | coverage: 2 | status: 3 | project: 4 | default: 5 | target: 78% #overall project/ repo coverage 6 | base: 7 | target: 75% 8 | flags: 9 | - base 10 | themed: 11 | target: 75% 12 | flags: 13 | - themed 14 | 15 | # adding Flags to your `layout` configuration to show up in the PR comment 16 | comment: 17 | require_changes: false 18 | 19 | # New root YAML section = `flags:` 20 | # This is where you would define every flag from your 21 | # uploader, and update when new Flags added 22 | 23 | flags: 24 | base: 25 | paths: #note, accepts globs, not regexes 26 | - packages/base/ 27 | carryforward: false 28 | themed: 29 | paths: #note, accepts globs, not regexes 30 | - packages/themed/ 31 | carryforward: true 32 | -------------------------------------------------------------------------------- /example/.eslintignore: -------------------------------------------------------------------------------- 1 | web-build -------------------------------------------------------------------------------- /example/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@react-native-community", 3 | "rules": { 4 | "react-native/no-inline-styles": 0, 5 | "@typescript-eslint/no-unused-vars": [ 6 | "error", 7 | { 8 | "ignoreRestSiblings": true 9 | } 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode 3 | .DS_Store 4 | web-build/ 5 | web-report/ 6 | 7 | node_modules/* 8 | dist/* 9 | .expo/* 10 | npm-debug.* 11 | *.log 12 | 13 | /beta 14 | 15 | .expo-shared/ 16 | -------------------------------------------------------------------------------- /example/.prettierignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.expo 3 | /web 4 | /*.json 5 | -------------------------------------------------------------------------------- /example/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": true 6 | } 7 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "React Native Elements", 4 | "owner": "rneui", 5 | "slug": "react-native-elements", 6 | "description": "A demo app for React Native Elements UI Library", 7 | "privacy": "public", 8 | "platforms": ["ios", "android", "web"], 9 | "version": "4.0.0", 10 | "orientation": "default", 11 | "primaryColor": "#cccccc", 12 | "icon": "./assets/icons/icon.png", 13 | "splash": { 14 | "image": "./assets/icons/loading.png" 15 | }, 16 | "updates": { 17 | "fallbackToCacheTimeout": 0 18 | }, 19 | "assetBundlePatterns": ["**/*"], 20 | "ios": { 21 | "supportsTablet": true 22 | }, 23 | "userInterfaceStyle": "automatic", 24 | "android": { 25 | "package": "com.rneui" 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /example/app.web-build.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-elements-app", 4 | "slug": "react-native-elements-app", 5 | "description": "A demo app for React Native Elements UI Library", 6 | "privacy": "public", 7 | "sdkVersion": "34.0.0", 8 | "platforms": ["web"], 9 | "version": "1.1.0", 10 | "primaryColor": "#cccccc", 11 | "web": { 12 | "publicPath": "/react-native-elements-app/" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/assets/fonts/Georgia.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/fonts/Georgia.ttf -------------------------------------------------------------------------------- /example/assets/fonts/Montserrat-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/fonts/Montserrat-Bold.ttf -------------------------------------------------------------------------------- /example/assets/fonts/Montserrat-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/fonts/Montserrat-Light.ttf -------------------------------------------------------------------------------- /example/assets/fonts/Montserrat-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/fonts/Montserrat-Regular.ttf -------------------------------------------------------------------------------- /example/assets/fonts/Ubuntu-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/fonts/Ubuntu-Bold.ttf -------------------------------------------------------------------------------- /example/assets/fonts/Ubuntu-Light-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/fonts/Ubuntu-Light-Italic.ttf -------------------------------------------------------------------------------- /example/assets/fonts/Ubuntu-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/fonts/Ubuntu-Light.ttf -------------------------------------------------------------------------------- /example/assets/icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/icons/icon.png -------------------------------------------------------------------------------- /example/assets/icons/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/icons/loading.png -------------------------------------------------------------------------------- /example/assets/images/avatar1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/avatar1.jpg -------------------------------------------------------------------------------- /example/assets/images/bg_screen1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/bg_screen1.jpg -------------------------------------------------------------------------------- /example/assets/images/bg_screen2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/bg_screen2.jpg -------------------------------------------------------------------------------- /example/assets/images/bg_screen3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/bg_screen3.jpg -------------------------------------------------------------------------------- /example/assets/images/bg_screen4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/bg_screen4.jpg -------------------------------------------------------------------------------- /example/assets/images/user-cool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/user-cool.png -------------------------------------------------------------------------------- /example/assets/images/user-hp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/user-hp.png -------------------------------------------------------------------------------- /example/assets/images/user-student.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/user-student.png -------------------------------------------------------------------------------- /example/assets/images/wallpaper_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/wallpaper_1.jpg -------------------------------------------------------------------------------- /example/assets/images/wallpaper_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/wallpaper_2.jpg -------------------------------------------------------------------------------- /example/assets/images/wallpaper_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/wallpaper_3.jpg -------------------------------------------------------------------------------- /example/assets/images/wallpaper_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/images/wallpaper_4.jpg -------------------------------------------------------------------------------- /example/assets/mocks/4e2c606885b9fb2d8aea70827e4949bf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/mocks/4e2c606885b9fb2d8aea70827e4949bf.jpg -------------------------------------------------------------------------------- /example/assets/mocks/Android-N-new-settings-ui-mockup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/mocks/Android-N-new-settings-ui-mockup.jpg -------------------------------------------------------------------------------- /example/assets/mocks/beautiful-list-ui-for-mobile-app-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/mocks/beautiful-list-ui-for-mobile-app-5.jpg -------------------------------------------------------------------------------- /example/assets/mocks/iOS-10-vs-iOS-11-Settings.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/assets/mocks/iOS-10-vs-iOS-11-Settings.jpeg -------------------------------------------------------------------------------- /example/eas.json: -------------------------------------------------------------------------------- 1 | { 2 | "cli": { 3 | "version": ">= 0.35.0" 4 | }, 5 | "build": { 6 | "development": { 7 | "developmentClient": true, 8 | "distribution": "internal" 9 | }, 10 | "preview": { 11 | "distribution": "internal" 12 | }, 13 | "production": {} 14 | }, 15 | "submit": { 16 | "production": {} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | 3 | import App from './App'; 4 | 5 | // // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // // It also ensures that whether you load the app in Expo Go or in a native build, 7 | // // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /example/src/components/AppLoading.ts: -------------------------------------------------------------------------------- 1 | import AppLoading from 'expo-app-loading'; 2 | 3 | export default AppLoading; 4 | -------------------------------------------------------------------------------- /example/src/components/LinearGradient.ts: -------------------------------------------------------------------------------- 1 | export { LinearGradient } from 'expo-linear-gradient'; 2 | -------------------------------------------------------------------------------- /example/src/config/colors.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | primary: '#397af8', 3 | primary1: '#4d86f7', 4 | primary2: '#6296f9', 5 | secondary: '#8F0CE8', 6 | secondary2: '#00B233', 7 | secondary3: '#00FF48', 8 | grey1: '#43484d', 9 | grey2: '#5e6977', 10 | grey3: '#86939e', 11 | grey4: '#bdc6cf', 12 | grey5: '#e1e8ee', 13 | dkGreyBg: '#232323', 14 | greyOutline: '#cbd2d9', 15 | }; 16 | -------------------------------------------------------------------------------- /example/src/config/fonts.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | ios: { 3 | regular: 'System', 4 | light: 'System', 5 | lightItalic: 'System', 6 | bold: 'System', 7 | boldItalic: 'System', 8 | black: 'System', 9 | blackItalic: 'System', 10 | }, 11 | android: { 12 | regular: 'Roboto', 13 | italic: 'Roboto-Italic', 14 | thin: 'Roboto-Thin', 15 | thinItalic: 'Roboto-ThinItalic', 16 | light: 'Roboto-Light', 17 | lightItalic: 'Roboto-LightItalic', 18 | medium: 'Roboto-Medium', 19 | mediumItalic: 'Roboto-MediumItalic', 20 | bold: 'Roboto-Bold', 21 | boldItalic: 'Roboto-BoldItalic', 22 | condensed: 'RobotoCondensed-Regular', 23 | condensedItalic: 'RobotoCondensed-Italic', 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /example/src/config/socialColors.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | facebook: '#3b5998', 3 | twitter: '#00aced', 4 | ['google-plus-official']: '#dd4b39', 5 | pinterest: '#cb2027', 6 | linkedin: '#007bb6', 7 | youtube: '#bb0000', 8 | vimeo: '#aad450', 9 | tumblr: '#32506d', 10 | instagram: '#517fa4', 11 | quora: '#a82400', 12 | foursquare: '#0072b1', 13 | wordpress: '#21759b', 14 | stumbleupon: '#EB4823', 15 | }; 16 | -------------------------------------------------------------------------------- /example/src/config/stack.ts: -------------------------------------------------------------------------------- 1 | import { Platform } from 'react-native'; 2 | 3 | // Fix scrolls on web platform 4 | 5 | export default Platform.select({ 6 | web: { headerMode: 'screen' }, 7 | default: {}, 8 | }); 9 | -------------------------------------------------------------------------------- /example/src/helpers/AssetsCaching.tsx: -------------------------------------------------------------------------------- 1 | import { Image } from 'react-native'; 2 | import { FontSource, loadAsync } from 'expo-font'; 3 | import { Asset } from 'expo-asset'; 4 | 5 | export const cacheFonts = (fonts: (string | Record)[]) => { 6 | return fonts.map((font) => loadAsync(font)); 7 | }; 8 | 9 | export const cacheImages = (images: string[]) => { 10 | return images.map((image) => { 11 | if (typeof image === 'string') { 12 | return Image.prefetch(image); 13 | } else { 14 | return Asset.fromModule(image).downloadAsync(); 15 | } 16 | }); 17 | }; 18 | -------------------------------------------------------------------------------- /example/src/helpers/ThemeReducer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const initialState = { themeMode: 'light' }; 4 | export function ThemeReducer( 5 | state: { themeMode: string }, 6 | action: { type: string; payload: string } 7 | ) { 8 | const { payload } = action; 9 | switch (action.type) { 10 | case 'set-theme': 11 | return { ...state, themeMode: payload === 'light' ? 'light' : 'dark' }; 12 | default: 13 | return state; 14 | } 15 | } 16 | 17 | // added null in the create context so that tsc issues are fixed. Refer https://stackoverflow.com/questions/54577865/react-createcontext-issue-in-typescript/54667477 18 | export const ThemeReducerContext = React.createContext({ 19 | ThemeState: { themeMode: 'light' }, 20 | dispatch: ({ type, payload }) => {}, 21 | }); 22 | -------------------------------------------------------------------------------- /example/src/helpers/vector-fonts.ts: -------------------------------------------------------------------------------- 1 | import { 2 | FontAwesome, 3 | Ionicons, 4 | Entypo, 5 | SimpleLineIcons, 6 | MaterialIcons, 7 | MaterialCommunityIcons, 8 | } from '@expo/vector-icons'; 9 | 10 | export default [ 11 | FontAwesome.font, 12 | Ionicons.font, 13 | Entypo.font, 14 | SimpleLineIcons.font, 15 | MaterialIcons.font, 16 | MaterialCommunityIcons.font, 17 | ]; 18 | -------------------------------------------------------------------------------- /example/src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/src/images/logo.png -------------------------------------------------------------------------------- /example/src/images/rating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/src/images/rating.png -------------------------------------------------------------------------------- /example/src/images/shirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/src/images/shirt.png -------------------------------------------------------------------------------- /example/src/images/water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/src/images/water.png -------------------------------------------------------------------------------- /example/src/views/lists/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Header } from '../../components/header'; 3 | import ListContent from './content'; 4 | 5 | type ListComponentProps = {}; 6 | 7 | const Lists: React.FunctionComponent = () => { 8 | return ( 9 | <> 10 |
11 | 12 | 13 | ); 14 | }; 15 | 16 | export default Lists; 17 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig", 3 | "references": [ 4 | { 5 | "path": "../packages/base" 6 | }, 7 | { 8 | "path": "../packages/themed" 9 | } 10 | ], 11 | "compilerOptions": { 12 | // Avoid expo-cli auto-generating a tsconfig 13 | }, 14 | "exclude": [ 15 | "node_modules", 16 | "babel.config.js", 17 | "metro.config.js", 18 | "jest.config.js", 19 | "website" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /example/web/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/ecbcf5659799aebc1393bbd44cd51eee32a02298/example/web/favicon.png -------------------------------------------------------------------------------- /example/web/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "headers":[ 3 | { 4 | "source":"static/**/*.js", 5 | "headers":[ 6 | { 7 | "key":"Cache-Control", 8 | "value":"public, max-age=31536000, immutable" 9 | } 10 | ] 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*", "example"], 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "version": "independent", 6 | "command": { 7 | "publish": { 8 | "allowBranch": "main", 9 | "conventionalCommits": true, 10 | "createRelease": "github", 11 | "message": "chore: publish", 12 | "ignoreChanges": [ 13 | "**/__fixtures__/**", 14 | "**/__tests__/**", 15 | "**/*.md", 16 | "**/example/**", 17 | "**/*json" 18 | ] 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/base/.ci/setupTests.ts: -------------------------------------------------------------------------------- 1 | jest.mock( 2 | '../../../node_modules/react-native/Libraries/LayoutAnimation/LayoutAnimation.js' 3 | ); 4 | jest.mock( 5 | '../../../node_modules/react-native/Libraries/Animated/NativeAnimatedHelper.js' 6 | ); 7 | 8 | jest.useFakeTimers('legacy'); 9 | -------------------------------------------------------------------------------- /packages/base/.docgenignore: -------------------------------------------------------------------------------- 1 | **/index.tsx 2 | src/*/components/** 3 | **/__tests__/** 4 | **/helpers/** 5 | **/config/** 6 | src/SearchBar/SearchBar-** 7 | -------------------------------------------------------------------------------- /packages/base/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.log 4 | site 5 | coverage 6 | jsconfig.json 7 | .vscode/ 8 | .idea/ 9 | package-lock.json 10 | build 11 | *.orig 12 | .docgen/ 13 | -------------------------------------------------------------------------------- /packages/base/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /packages/base/src/AirbnbRating/index.tsx: -------------------------------------------------------------------------------- 1 | import { AirbnbRating, TapRatingProps } from './AirbnbRating'; 2 | 3 | export { AirbnbRating }; 4 | export type { TapRatingProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Avatar/__tests__/Accessory.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar } from '..'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | 5 | describe('Accessory Component', () => { 6 | jest.useFakeTimers(); 7 | it('should uses Icon', () => { 8 | const component = renderWithWrapper(); 9 | expect(component.toJSON()).toMatchSnapshot(); 10 | }); 11 | it('should uses Image', () => { 12 | const { wrapper } = renderWithWrapper( 13 | , 14 | 'RNE__Image' 15 | ); 16 | expect(wrapper.props.source.uri).toMatch('https://i.imgur.com/0y8Ftya.jpg'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/base/src/Avatar/index.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar as AvatarBase, AvatarProps } from './Avatar'; 2 | import { Accessory, AccessoryProps } from './Avatar.Accessory'; 3 | 4 | const Avatar = Object.assign(AvatarBase, { 5 | Accessory, 6 | }); 7 | export { Avatar, Accessory }; 8 | 9 | export type { AccessoryProps, AvatarProps }; 10 | -------------------------------------------------------------------------------- /packages/base/src/Badge/index.tsx: -------------------------------------------------------------------------------- 1 | import { Badge, BadgeProps } from './Badge'; 2 | import { withBadge } from './withBadge'; 3 | 4 | export { withBadge, Badge }; 5 | export type { BadgeProps }; 6 | -------------------------------------------------------------------------------- /packages/base/src/BottomSheet/index.tsx: -------------------------------------------------------------------------------- 1 | import { BottomSheet, BottomSheetProps } from './BottomSheet'; 2 | 3 | export { BottomSheet }; 4 | export type { BottomSheetProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button, ButtonProps } from './Button'; 2 | 3 | export { Button }; 4 | export type { ButtonProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/ButtonGroup/index.tsx: -------------------------------------------------------------------------------- 1 | import { ButtonGroup, ButtonGroupProps } from './ButtonGroup'; 2 | 3 | export { ButtonGroup }; 4 | export type { ButtonGroupProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Card/Card.Divider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet } from 'react-native'; 3 | import { DividerProps, Divider } from '../Divider'; 4 | import { RneFunctionComponent } from '../helpers'; 5 | 6 | export interface CardDividerProps extends DividerProps {} 7 | 8 | /** Add divider to the card which acts as a separator between elements. 9 | * This, Receives all [Divider](divider#props) props. */ 10 | export const CardDivider: RneFunctionComponent = ({ 11 | style, 12 | ...rest 13 | }) => ; 14 | 15 | const styles = StyleSheet.create({ 16 | divider: { 17 | marginBottom: 15, 18 | }, 19 | }); 20 | 21 | CardDivider.displayName = 'Card.Divider'; 22 | -------------------------------------------------------------------------------- /packages/base/src/Card/Card.Image.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet } from 'react-native'; 3 | import { RneFunctionComponent } from '../helpers'; 4 | import { ImageProps, Image } from '../Image'; 5 | 6 | export interface CardImageProps extends ImageProps {} 7 | 8 | /** Add information in the form of image to the card. 9 | * This, Receives all [Image](Image.mdx#props) props. */ 10 | export const CardImage: RneFunctionComponent = ({ 11 | style, 12 | ...props 13 | }) => ; 14 | 15 | const styles = StyleSheet.create({ 16 | image: { 17 | width: null, 18 | height: 150, 19 | }, 20 | }); 21 | 22 | CardImage.displayName = 'Card.Image'; 23 | -------------------------------------------------------------------------------- /packages/base/src/CheckBox/index.tsx: -------------------------------------------------------------------------------- 1 | import { CheckBox, CheckBoxProps } from './CheckBox'; 2 | 3 | export { CheckBox }; 4 | export type { CheckBoxProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Chip/index.tsx: -------------------------------------------------------------------------------- 1 | import { Chip, ChipProps } from './Chip'; 2 | 3 | export { Chip }; 4 | export type { ChipProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Dialog/index.tsx: -------------------------------------------------------------------------------- 1 | import { DialogLoading, DialogLoadingProps } from './Dialog.Loading'; 2 | import { DialogTitle, DialogTitleProps } from './Dialog.Title'; 3 | import { DialogButton, DialogButtonProps } from './Dialog.Button'; 4 | import { DialogActions, DialogActionsProps } from './Dialog.Actions'; 5 | import { DialogBase, DialogProps } from './Dialog'; 6 | 7 | export const Dialog = Object.assign(DialogBase, { 8 | Loading: DialogLoading, 9 | Title: DialogTitle, 10 | Actions: DialogActions, 11 | Button: DialogButton, 12 | }); 13 | 14 | export type { 15 | DialogProps, 16 | DialogLoadingProps, 17 | DialogButtonProps, 18 | DialogTitleProps, 19 | DialogActionsProps, 20 | }; 21 | -------------------------------------------------------------------------------- /packages/base/src/Divider/index.tsx: -------------------------------------------------------------------------------- 1 | import { Divider, DividerProps } from './Divider'; 2 | 3 | export { Divider }; 4 | export type { DividerProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/FAB/index.tsx: -------------------------------------------------------------------------------- 1 | import { FAB, FABProps } from './FAB'; 2 | 3 | export { FAB }; 4 | export type { FABProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Header/components/HeaderIcon.tsx: -------------------------------------------------------------------------------- 1 | import { IconObject } from '../../Icon'; 2 | import { StyleProp, TextStyle } from 'react-native'; 3 | 4 | export interface HeaderIcon extends IconObject { 5 | icon?: string; 6 | text?: string; 7 | color?: string; 8 | style?: StyleProp; 9 | } 10 | -------------------------------------------------------------------------------- /packages/base/src/Header/index.tsx: -------------------------------------------------------------------------------- 1 | import { Header, HeaderProps } from './Header'; 2 | 3 | export { Header }; 4 | export type { HeaderProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Icon/index.tsx: -------------------------------------------------------------------------------- 1 | import { Icon, IconProps, IconNode, IconObject, IconType } from './Icon'; 2 | 3 | export { Icon }; 4 | export type { IconProps, IconNode, IconObject, IconType }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Image/index.tsx: -------------------------------------------------------------------------------- 1 | import { Image as ImageNative } from 'react-native'; 2 | import { Image as RNEImage, ImageProps } from './Image'; 3 | 4 | const Image = Object.assign(RNEImage, { 5 | getSize: ImageNative.getSize, 6 | getSizeWithHeaders: ImageNative.getSizeWithHeaders, 7 | prefetch: ImageNative.prefetch, 8 | abortPrefetch: ImageNative.abortPrefetch, 9 | queryCache: ImageNative.queryCache, 10 | resolveAssetSource: ImageNative.resolveAssetSource, 11 | }); 12 | 13 | export { Image }; 14 | export type { ImageProps }; 15 | -------------------------------------------------------------------------------- /packages/base/src/Input/index.tsx: -------------------------------------------------------------------------------- 1 | import { Input, InputProps } from './Input'; 2 | 3 | export { Input }; 4 | export type { InputProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Overlay/index.tsx: -------------------------------------------------------------------------------- 1 | import { Overlay, OverlayProps } from './Overlay'; 2 | 3 | export { Overlay }; 4 | export type { OverlayProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/PricingCard/index.tsx: -------------------------------------------------------------------------------- 1 | import { PricingCard, PricingCardProps } from './PricingCard'; 2 | 3 | export { PricingCard }; 4 | export type { PricingCardProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Rating/Rating.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Rating as SwipeRating, 4 | SwipeRatingProps as RatingProps, 5 | } from 'react-native-ratings'; 6 | import { RneFunctionComponent } from '../helpers'; 7 | 8 | export interface SwipeRatingProps extends RatingProps {} 9 | 10 | /** Ratings are used to collect measurable feedback from users. 11 | * Use Rating over an Input where imagery can increase user interaction. 12 | * This component is imported from [react-native-ratings](https://github.com/Monte9/react-native-ratings). 13 | * There are two tyoes of rating - TapRating and SwipeRating. 14 | * This documentation is for Swipe Rating version. */ 15 | export const Rating: RneFunctionComponent = () => { 16 | return ; 17 | }; 18 | 19 | Rating.displayName = 'Rating'; 20 | -------------------------------------------------------------------------------- /packages/base/src/Rating/index.tsx: -------------------------------------------------------------------------------- 1 | import { Rating, SwipeRatingProps } from './Rating'; 2 | 3 | export { Rating }; 4 | export type { SwipeRatingProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/SearchBar/__tests__/SearchBar-android.test.tsx: -------------------------------------------------------------------------------- 1 | import { SearchBarAndroid } from '../SearchBar-android'; 2 | import { commonTests } from './common'; 3 | 4 | describe.skip('Android SearchBar component', () => { 5 | commonTests(SearchBarAndroid); 6 | }); 7 | -------------------------------------------------------------------------------- /packages/base/src/SearchBar/__tests__/SearchBar-default.test.tsx: -------------------------------------------------------------------------------- 1 | import { SearchBarDefault } from '../SearchBar-default'; 2 | import { commonTests } from './common'; 3 | 4 | describe('Default SearchBar component', () => { 5 | commonTests(SearchBarDefault); 6 | }); 7 | -------------------------------------------------------------------------------- /packages/base/src/SearchBar/__tests__/SearchBar-ios.test.tsx: -------------------------------------------------------------------------------- 1 | import { SearchBarIOS } from '../SearchBar-ios'; 2 | import { commonTests, commonPlatformTest } from './common'; 3 | 4 | describe.skip('iOS SearchBar component', () => { 5 | commonTests(SearchBarIOS); 6 | commonPlatformTest(SearchBarIOS); 7 | }); 8 | -------------------------------------------------------------------------------- /packages/base/src/SearchBar/index.tsx: -------------------------------------------------------------------------------- 1 | import { SearchBar, SearchBarProps } from './SearchBar'; 2 | import { SearchBarAndroidProps } from './SearchBar-android'; 3 | import { SearchBarIosProps } from './SearchBar-ios'; 4 | import { SearchBarDefaultProps } from './SearchBar-default'; 5 | 6 | export { SearchBar }; 7 | export type { 8 | SearchBarProps, 9 | SearchBarAndroidProps, 10 | SearchBarDefaultProps, 11 | SearchBarIosProps, 12 | }; 13 | -------------------------------------------------------------------------------- /packages/base/src/Skeleton/__tests__/Skeleton.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Skeleton } from '..'; 3 | import { render } from '@testing-library/react-native'; 4 | 5 | test('Skeleton Component', () => { 6 | const component = render(); 7 | expect(component).toBeTruthy(); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/base/src/Skeleton/index.tsx: -------------------------------------------------------------------------------- 1 | import { Skeleton, SkeletonProps } from './Skeleton'; 2 | 3 | export { Skeleton }; 4 | export type { SkeletonProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Slider/components/Rect.tsx: -------------------------------------------------------------------------------- 1 | export class Rect { 2 | x: number; 3 | y: number; 4 | width: number; 5 | height: number; 6 | 7 | constructor(x: number, y: number, width: number, height: number) { 8 | this.x = x; 9 | this.y = y; 10 | this.width = width; 11 | this.height = height; 12 | } 13 | 14 | containsPoint(x: number, y: number) { 15 | return ( 16 | x >= this.x && 17 | y >= this.y && 18 | x <= this.x + this.width && 19 | y <= this.y + this.height 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/base/src/Slider/index.tsx: -------------------------------------------------------------------------------- 1 | import { Slider, SliderProps } from './Slider'; 2 | 3 | export { Slider }; 4 | export type { SliderProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/SocialIcon/index.tsx: -------------------------------------------------------------------------------- 1 | import { SocialIcon, SocialIconProps } from './SocialIcon'; 2 | 3 | export { SocialIcon }; 4 | export type { SocialIconProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/SpeedDial/__tests__/SpeedDial.Action.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { fireEvent } from '@testing-library/react-native'; 3 | import { SpeedDial } from '..'; 4 | import { renderWithWrapper } from '../../../.ci/testHelper'; 5 | 6 | describe('Speed Dial Action', () => { 7 | it('should have onPress event', () => { 8 | const onPress = jest.fn(); 9 | const { getByText } = renderWithWrapper( 10 | 15 | ); 16 | const title = getByText('Delete'); 17 | fireEvent(title, 'press'); 18 | expect(onPress).toHaveBeenCalled(); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/base/src/SpeedDial/index.tsx: -------------------------------------------------------------------------------- 1 | import { SpeedDial, SpeedDialProps } from './SpeedDial'; 2 | import { SpeedDialAction, SpeedDialActionProps } from './SpeedDial.Action'; 3 | 4 | const DefaultSpeedDial = Object.assign(SpeedDial, { 5 | Action: SpeedDialAction, 6 | }); 7 | export { DefaultSpeedDial as SpeedDial }; 8 | export type { SpeedDialProps, SpeedDialActionProps }; 9 | -------------------------------------------------------------------------------- /packages/base/src/Switch/__tests__/__snapshots__/Switch.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Switch Component should match snapshot 1`] = ` 4 | 7 | 30 | 31 | `; 32 | -------------------------------------------------------------------------------- /packages/base/src/Switch/index.tsx: -------------------------------------------------------------------------------- 1 | import { Switch, SwitchProps } from './Switch'; 2 | 3 | export { Switch }; 4 | export type { SwitchProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Tab/index.tsx: -------------------------------------------------------------------------------- 1 | import { TabBase, TabProps } from './Tab'; 2 | import { TabItem, TabItemProps } from './Tab.Item'; 3 | 4 | export const Tab = Object.assign(TabBase, { 5 | Item: TabItem, 6 | }); 7 | 8 | export type { TabProps, TabItemProps }; 9 | -------------------------------------------------------------------------------- /packages/base/src/TabView/TabView.Item.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, ViewProps } from 'react-native'; 3 | 4 | import { RneFunctionComponent } from '../helpers'; 5 | 6 | export interface TabViewItemProps extends ViewProps {} 7 | 8 | /** They are individual item of the parent Tab. */ 9 | export const TabViewItem: RneFunctionComponent = ({ 10 | children, 11 | ...rest 12 | }) => { 13 | return {React.isValidElement(children) && children}; 14 | }; 15 | 16 | TabViewItem.displayName = 'TabView.Item'; 17 | -------------------------------------------------------------------------------- /packages/base/src/TabView/index.tsx: -------------------------------------------------------------------------------- 1 | import { TabViewBase, TabViewProps } from './TabView'; 2 | import { TabViewItem, TabViewItemProps } from './TabView.Item'; 3 | 4 | export const TabView = Object.assign(TabViewBase, { 5 | Item: TabViewItem, 6 | }); 7 | export type { TabViewProps, TabViewItemProps }; 8 | -------------------------------------------------------------------------------- /packages/base/src/Text/index.tsx: -------------------------------------------------------------------------------- 1 | import { Text, TextProps } from './Text'; 2 | 3 | export { Text }; 4 | export type { TextProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Tile/index.tsx: -------------------------------------------------------------------------------- 1 | import { Tile, TileProps } from './Tile'; 2 | 3 | export { Tile }; 4 | export type { TileProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Tooltip/__tests__/__snapshots__/Triangle.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Tooltip component should match snapshot 1`] = ` 4 | 21 | `; 22 | -------------------------------------------------------------------------------- /packages/base/src/Tooltip/__tests__/getTooltipCoordinate.test.tsx: -------------------------------------------------------------------------------- 1 | import { ScreenWidth } from '../../helpers'; 2 | import { getElementVisibleWidth } from '../helpers/getTooltipCoordinate'; 3 | 4 | describe('getTooltipCoordinate helper', () => { 5 | it('should return the correct coordinate', () => { 6 | const width = getElementVisibleWidth(250, 5, ScreenWidth); 7 | expect(width).toBe(250); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/base/src/Tooltip/index.tsx: -------------------------------------------------------------------------------- 1 | import { Tooltip, TooltipProps } from './Tooltip'; 2 | 3 | export { Tooltip }; 4 | export type { TooltipProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/helpers/BackgroundImage.tsx: -------------------------------------------------------------------------------- 1 | import { Image, ImageBackground } from 'react-native'; 2 | 3 | const BackgroundImage = ImageBackground || Image; 4 | 5 | export default BackgroundImage; 6 | -------------------------------------------------------------------------------- /packages/base/src/helpers/__tests__/colors.test.tsx: -------------------------------------------------------------------------------- 1 | import { darkColors, lightColors } from '../colors'; 2 | 3 | describe('Color', () => { 4 | it('Colors (Light) should exist', () => { 5 | expect(darkColors).not.toBe(null); 6 | }); 7 | 8 | it('Colors (Dark) should exist', () => { 9 | expect(lightColors).not.toBe(null); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/base/src/helpers/makeStyles.ts: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { StyleSheet } from 'react-native'; 3 | 4 | export const makeStyles = 5 | | StyleSheet.NamedStyles>( 6 | styles: T | ((props: P) => T) 7 | ) => 8 | (props?: P): T => { 9 | return useMemo(() => { 10 | return StyleSheet.create( 11 | typeof styles === 'function' ? styles(props) : styles 12 | ); 13 | }, [props]); 14 | }; 15 | -------------------------------------------------------------------------------- /packages/base/src/helpers/normalizeText.tsx: -------------------------------------------------------------------------------- 1 | import { moderateScale } from 'react-native-size-matters'; 2 | 3 | function normalize(number: number, factor = 0.25) { 4 | return moderateScale(number, factor); 5 | } 6 | 7 | export default normalize; 8 | -------------------------------------------------------------------------------- /packages/base/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "compilerOptions": { 4 | "allowJs": true /* Allow javascript files to be compiled. */, 5 | "outDir": "dist", 6 | "declaration": true, 7 | "composite": true, 8 | "rootDir": "src" 9 | }, 10 | "include": ["src/**/*.tsx", "src/**/*.ts", "src/index.ts"], 11 | "exclude": [ 12 | ".ci", 13 | "dist", 14 | "node_modules", 15 | "babel.config.js", 16 | "jest.config.js", 17 | "src/index.d.ts", 18 | "src/**/__tests__" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/themed/.ci/setupTests.ts: -------------------------------------------------------------------------------- 1 | jest.mock( 2 | '../../../node_modules/react-native/Libraries/LayoutAnimation/LayoutAnimation.js' 3 | ); 4 | jest.mock( 5 | '../../../node_modules/react-native/Libraries/Animated/NativeAnimatedHelper.js' 6 | ); 7 | jest.useFakeTimers('legacy'); 8 | -------------------------------------------------------------------------------- /packages/themed/.docgenignore: -------------------------------------------------------------------------------- 1 | ** 2 | -------------------------------------------------------------------------------- /packages/themed/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.log 4 | site 5 | coverage 6 | jsconfig.json 7 | .vscode/ 8 | .idea/ 9 | package-lock.json 10 | build 11 | *.orig 12 | .docgen/ 13 | -------------------------------------------------------------------------------- /packages/themed/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /packages/themed/src/AirbnbRating/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { 3 | AirbnbRating, 4 | TapRatingProps, 5 | } from '@rneui/base/dist/AirbnbRating/index'; 6 | 7 | export { AirbnbRating }; 8 | export type { TapRatingProps }; 9 | export const AirbnbRatingDefault = withTheme(AirbnbRating, 'AirbnbRating'); 10 | -------------------------------------------------------------------------------- /packages/themed/src/Avatar/__tests__/Avatar.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Avatar from '..'; 3 | import { Image } from 'react-native'; 4 | import { renderWithWrapper } from '../../../.ci/testHelper'; 5 | import { CreateThemeOptions, FullTheme } from '../../config'; 6 | 7 | describe('Avatar Component', () => { 8 | it('should apply values from theme', () => { 9 | const theme: Partial = { 10 | components: { 11 | Avatar: { 12 | source: { uri: 'https://i.imgur.com/0y8Ftya.jpg' }, 13 | }, 14 | }, 15 | }; 16 | const { wrapper } = renderWithWrapper(, '', theme); 17 | expect(wrapper.findByType(Image).props.source.uri).toBe( 18 | 'https://i.imgur.com/0y8Ftya.jpg' 19 | ); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/themed/src/Avatar/index.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar, AvatarProps } from '@rneui/base/dist/Avatar/Avatar'; 2 | import { 3 | Accessory, 4 | AccessoryProps, 5 | } from '@rneui/base/dist/Avatar/Avatar.Accessory'; 6 | import { withTheme } from '../config'; 7 | 8 | export default Object.assign(withTheme(Avatar, 'Avatar'), { 9 | Accessory: withTheme(Accessory, 'AvatarAccessory'), 10 | }); 11 | 12 | export type { AccessoryProps, AvatarProps }; 13 | -------------------------------------------------------------------------------- /packages/themed/src/Badge/__tests__/Badge.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Badge from '..'; 3 | import { Text } from 'react-native'; 4 | import { renderWithWrapper } from '../../../.ci/testHelper'; 5 | import { CreateThemeOptions } from '../../config'; 6 | 7 | describe('Badge Component', () => { 8 | it('should use values set by the theme', () => { 9 | const testTheme: Partial = { 10 | components: { 11 | Badge: { 12 | textStyle: { color: 'red' }, 13 | }, 14 | }, 15 | }; 16 | const { wrapper } = renderWithWrapper(, '', testTheme); 17 | expect(wrapper.findByType(Text).props.style).toMatchObject({ 18 | color: 'red', 19 | }); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/themed/src/Badge/__tests__/withBadge.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TouchableOpacity } from 'react-native'; 3 | import { withBadge } from '../index'; 4 | import { renderWithWrapper } from '../../../.ci/testHelper'; 5 | 6 | describe('withBadge HOC', () => { 7 | it('should render', () => { 8 | const options = { 9 | top: 0, 10 | bottom: 5, 11 | }; 12 | const BadgedComponent = withBadge(1, options)(TouchableOpacity); 13 | const { wrapper } = renderWithWrapper( 14 | , 15 | 'RNE__Badge__Container' 16 | ); 17 | expect(wrapper.props.style).toMatchObject({ 18 | top: 0, 19 | bottom: 5, 20 | }); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/themed/src/Badge/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Badge, BadgeProps } from '@rneui/base/dist/Badge/Badge'; 3 | import { withBadge } from '@rneui/base/dist/Badge/withBadge'; 4 | 5 | export { Badge, withBadge }; 6 | export type { BadgeProps }; 7 | export default withTheme(Badge, 'Badge'); 8 | -------------------------------------------------------------------------------- /packages/themed/src/BottomSheet/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BottomSheet, 3 | BottomSheetProps, 4 | } from '@rneui/base/dist/BottomSheet/BottomSheet'; 5 | import { withTheme } from '../config'; 6 | 7 | export { BottomSheet }; 8 | export type { BottomSheetProps }; 9 | export default withTheme(BottomSheet, 'BottomSheet'); 10 | -------------------------------------------------------------------------------- /packages/themed/src/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Button, ButtonProps } from '@rneui/base/dist/Button/Button'; 3 | 4 | export { Button }; 5 | export type { ButtonProps }; 6 | export default withTheme(Button, 'Button'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/ButtonGroup/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { 3 | ButtonGroup, 4 | ButtonGroupProps, 5 | } from '@rneui/base/dist/ButtonGroup/ButtonGroup'; 6 | 7 | export { ButtonGroup }; 8 | export type { ButtonGroupProps }; 9 | export default withTheme(ButtonGroup, 'ButtonGroup'); 10 | -------------------------------------------------------------------------------- /packages/themed/src/Card/__tests__/Card.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Card from '..'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | 5 | describe('Card Component', () => { 6 | it('should render', () => { 7 | const { queryByText } = renderWithWrapper( 8 | 9 | featured title 10 | featured sub title 11 | 16 | 17 | ); 18 | expect(queryByText('featured title')).toBeTruthy(); 19 | expect(queryByText('featured sub title')).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/themed/src/CheckBox/__tests__/CheckBox.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CheckBox from '..'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | import { CreateThemeOptions, FullTheme } from '../../config'; 5 | 6 | describe('CheckBox Component', () => { 7 | it('should use values from theme', () => { 8 | const testTheme: Partial = { 9 | components: { 10 | CheckBox: { 11 | title: 'George is Cool', 12 | }, 13 | }, 14 | }; 15 | const { wrapper } = renderWithWrapper( 16 | , 17 | 'RNE__CheckBox__Title', 18 | testTheme 19 | ); 20 | expect(wrapper.props.children).toBe('George is Cool'); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/themed/src/CheckBox/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { CheckBox, CheckBoxProps } from '@rneui/base/dist/CheckBox/CheckBox'; 3 | 4 | export { CheckBox }; 5 | export type { CheckBoxProps }; 6 | export default withTheme(CheckBox, 'CheckBox'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/Chip/__tests__/Chip.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Chip from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | 5 | describe('Chip Component', () => { 6 | it.each` 7 | type 8 | ${'solid'} 9 | ${'outline'} 10 | `('should render $type', ({ type }) => { 11 | const { queryByText } = renderWithWrapper( 12 | 13 | ); 14 | expect(queryByText(type)).not.toBeNull(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /packages/themed/src/Chip/index.tsx: -------------------------------------------------------------------------------- 1 | import { Chip, ChipProps } from '@rneui/base/dist/Chip/Chip'; 2 | import { withTheme } from '../config'; 3 | 4 | export { Chip }; 5 | export type { ChipProps }; 6 | export default withTheme(Chip, 'Chip'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/Dialog/__tests__/Dialog.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Dialog from '..'; 3 | import { CreateThemeOptions } from '../..'; 4 | import { renderWithWrapper } from '../../../.ci/testHelper'; 5 | 6 | describe('Dialog Component', () => { 7 | it('should apply props from theme', () => { 8 | const theme: Partial = { 9 | components: { 10 | Dialog: { 11 | transparent: false, 12 | }, 13 | }, 14 | }; 15 | const { wrapper } = renderWithWrapper( 16 | , 17 | 'Internal__Overlay', 18 | theme 19 | ); 20 | expect(wrapper.props.transparent).toBeFalsy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/themed/src/Divider/__tests__/Divider.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Divider from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | import { CreateThemeOptions, FullTheme } from '../../config'; 5 | 6 | describe('Divider Component', () => { 7 | it('should apply values from theme', () => { 8 | const theme: Partial = { 9 | components: { 10 | Divider: { 11 | style: { 12 | backgroundColor: 'red', 13 | }, 14 | }, 15 | }, 16 | }; 17 | const { wrapper } = renderWithWrapper(, 'RNE__Divider', theme); 18 | expect(wrapper.props.style).toMatchObject({ backgroundColor: 'red' }); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/themed/src/Divider/index.tsx: -------------------------------------------------------------------------------- 1 | import { Divider, DividerProps } from '@rneui/base/dist/Divider/Divider'; 2 | import { withTheme } from '../config'; 3 | 4 | export { Divider }; 5 | export type { DividerProps }; 6 | export default withTheme(Divider, 'Divider'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/FAB/__tests__/FAB.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Animated } from 'react-native'; 3 | import FAB from '..'; 4 | import { renderWithWrapper } from '../../../.ci/testHelper'; 5 | 6 | describe('FAB Component', () => { 7 | it('render with theme', () => { 8 | const { wrapper } = renderWithWrapper(, '', { 9 | components: { 10 | FAB: { 11 | placement: 'right', 12 | }, 13 | }, 14 | }); 15 | expect(wrapper.findByType(Animated.View).props.style).toMatchObject({ 16 | position: 'absolute', 17 | bottom: 0, 18 | right: 0, 19 | }); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/themed/src/FAB/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { FAB, FABProps } from '@rneui/base/dist/FAB/FAB'; 3 | 4 | export { FAB }; 5 | export type { FABProps }; 6 | export default withTheme(FAB, 'FAB'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/Header/__tests__/Header.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Header from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | 5 | describe('Header Component', () => { 6 | it('should apply props from theme', () => { 7 | const { wrapper } = renderWithWrapper(
, 'headerContainer', { 8 | components: { 9 | Header: { 10 | backgroundColor: 'pink', 11 | }, 12 | }, 13 | }); 14 | expect(wrapper.props.style).toMatchObject({ 15 | backgroundColor: 'pink', 16 | }); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/themed/src/Header/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Header, HeaderProps } from '@rneui/base/dist/Header/Header'; 3 | 4 | export { Header }; 5 | export type { HeaderProps }; 6 | export default withTheme(Header, 'Header'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/Icon/__tests__/Icon.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | 5 | describe('Icon component', () => { 6 | it('should apply values from theme', () => { 7 | const { wrapper } = renderWithWrapper( 8 | , 9 | 'RNE__ICON__Component', 10 | { 11 | components: { 12 | Icon: { 13 | size: 26, 14 | }, 15 | }, 16 | } 17 | ); 18 | expect(wrapper.props.style[0].fontSize).toBe(26); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/themed/src/Icon/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { 3 | Icon, 4 | IconProps, 5 | IconNode, 6 | IconObject, 7 | IconType, 8 | } from '@rneui/base/dist/Icon/Icon'; 9 | 10 | export { Icon }; 11 | export type { IconProps, IconNode, IconObject, IconType }; 12 | export default withTheme(Icon, 'Icon'); 13 | -------------------------------------------------------------------------------- /packages/themed/src/Image/index.tsx: -------------------------------------------------------------------------------- 1 | import { Image as ImageNative } from 'react-native'; 2 | import { withTheme } from '../config'; 3 | import { Image, ImageProps } from '@rneui/base/dist/Image/Image'; 4 | 5 | export { Image }; 6 | export type { ImageProps }; 7 | 8 | const ThemedImage = Object.assign(withTheme(Image, 'Image'), { 9 | getSize: ImageNative.getSize, 10 | getSizeWithHeaders: ImageNative.getSizeWithHeaders, 11 | prefetch: ImageNative.prefetch, 12 | abortPrefetch: ImageNative.abortPrefetch, 13 | queryCache: ImageNative.queryCache, 14 | resolveAssetSource: ImageNative.resolveAssetSource, 15 | }); 16 | 17 | export default ThemedImage; 18 | -------------------------------------------------------------------------------- /packages/themed/src/Input/__tests__/Input.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Input from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | import { CreateThemeOptions, FullTheme } from '../../config'; 5 | 6 | describe('Input component', () => { 7 | it('should apply values from theme', () => { 8 | const testTheme: Partial = { 9 | components: { 10 | Input: { 11 | placeholder: 'Enter text', 12 | }, 13 | }, 14 | }; 15 | const { queryByTestId } = renderWithWrapper(, '', testTheme); 16 | const component = queryByTestId('RNE__Input__text-input')!; 17 | expect(component.props.placeholder).toBe('Enter text'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/themed/src/Input/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Input, InputProps } from '@rneui/base/dist/Input/Input'; 3 | 4 | export { Input }; 5 | export type { InputProps }; 6 | export default withTheme(Input, 'Input'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/ListItem/__tests__/ListItem.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ListItem from '..'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | import { CreateThemeOptions, FullTheme } from '../../config'; 5 | 6 | describe('ListItem component', () => { 7 | it('should apply values from theme', () => { 8 | const theme: Partial = { 9 | components: { 10 | ListItemTitle: { 11 | style: { 12 | color: 'red', 13 | }, 14 | }, 15 | }, 16 | }; 17 | const { wrapper } = renderWithWrapper( 18 | 19 | 20 | , 21 | 'listItemTitle', 22 | theme 23 | ); 24 | 25 | expect(wrapper.props.style.color).toBe('red'); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /packages/themed/src/Overlay/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Overlay, OverlayProps } from '@rneui/base/dist/Overlay/Overlay'; 3 | 4 | export { Overlay }; 5 | export type { OverlayProps }; 6 | export default withTheme(Overlay, 'Overlay'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/PricingCard/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { 3 | PricingCard, 4 | PricingCardProps, 5 | } from '@rneui/base/dist/PricingCard/PricingCard'; 6 | 7 | export { PricingCard }; 8 | export type { PricingCardProps }; 9 | export default withTheme(PricingCard, 'PricingCard'); 10 | -------------------------------------------------------------------------------- /packages/themed/src/Rating/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Rating, SwipeRatingProps } from '@rneui/base/dist/Rating/Rating'; 3 | 4 | export { Rating }; 5 | export type { SwipeRatingProps }; 6 | export default withTheme(Rating, 'Rating'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/SearchBar/__tests__/SearchBar.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SearchBar from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | 5 | describe('SearchBar wrapper component', () => { 6 | it('should apply values from theme', () => { 7 | const theme = { 8 | SearchBar: { 9 | placeholder: 'Enter search term', 10 | }, 11 | }; 12 | const component = renderWithWrapper(, '', { 13 | components: theme, 14 | }); 15 | expect(component.queryByTestId('RNE__SearchBar').props.placeholder).toBe( 16 | 'Enter search term' 17 | ); 18 | expect(component.toJSON()).toMatchSnapshot(); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/themed/src/SearchBar/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { 3 | SearchBar, 4 | SearchBarProps, 5 | } from '@rneui/base/dist/SearchBar/SearchBar'; 6 | import { SearchBarAndroidProps } from '@rneui/base/dist/SearchBar/SearchBar-android'; 7 | import { SearchBarIosProps } from '@rneui/base/dist/SearchBar/SearchBar-ios'; 8 | import { SearchBarDefaultProps } from '@rneui/base/dist/SearchBar/SearchBar-default'; 9 | 10 | export { SearchBar }; 11 | export type { 12 | SearchBarProps, 13 | SearchBarAndroidProps, 14 | SearchBarDefaultProps, 15 | SearchBarIosProps, 16 | }; 17 | 18 | export default withTheme(SearchBar, 'SearchBar'); 19 | -------------------------------------------------------------------------------- /packages/themed/src/Skeleton/__tests__/Skeleton.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Skeleton from '..'; 3 | import { StyleSheet } from 'react-native'; 4 | import { renderWithWrapper } from '../../../.ci/testHelper'; 5 | import { CreateThemeOptions, FullTheme } from '../../config'; 6 | 7 | describe('Skelton Component', () => { 8 | it('should apply props from theme', () => { 9 | const theme: Partial = { 10 | components: { 11 | Skeleton: { 12 | circle: true, 13 | }, 14 | }, 15 | }; 16 | const { wrapper } = renderWithWrapper( 17 | , 18 | 'RNE__Skeleton', 19 | theme 20 | ); 21 | expect(StyleSheet.flatten(wrapper.props.style)).toMatchObject({ 22 | borderRadius: 50, 23 | }); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /packages/themed/src/Skeleton/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Skeleton, SkeletonProps } from '@rneui/base/dist/Skeleton'; 3 | 4 | export { Skeleton }; 5 | export type { SkeletonProps }; 6 | 7 | export default withTheme(Skeleton, 'Skeleton'); 8 | -------------------------------------------------------------------------------- /packages/themed/src/Slider/__tests__/Slider.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Slider from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | import { CreateThemeOptions } from '../..'; 5 | 6 | describe('Slider component', () => { 7 | it('should apply values from theme', () => { 8 | const theme: Partial = { 9 | components: { 10 | Slider: { 11 | thumbTintColor: 'blue', 12 | }, 13 | }, 14 | }; 15 | const { wrapper } = renderWithWrapper( 16 | , 17 | 'RNE__Slider_Thumb', 18 | theme 19 | ); 20 | expect(wrapper.props.style).toMatchObject({ 21 | backgroundColor: 'blue', 22 | }); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /packages/themed/src/Slider/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Slider, SliderProps } from '@rneui/base/dist/Slider/Slider'; 3 | 4 | export { Slider }; 5 | export type { SliderProps }; 6 | export default withTheme(Slider, 'Slider'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/SocialIcon/__tests__/SocialIcon.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SocialIcon from '..'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | import { Icon } from '../../Icon'; 5 | 6 | describe('SocialIcon component', () => { 7 | it('should apply values from theme', () => { 8 | const { queryByTestId } = renderWithWrapper(, '', { 9 | components: { 10 | SocialIcon: { 11 | type: 'facebook', 12 | }, 13 | }, 14 | }); 15 | const rootComponent = queryByTestId('RNE_SocialIcon')!; 16 | const iconComponent = rootComponent.findByType(Icon); 17 | expect(iconComponent.props.name).toBe('facebook'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/themed/src/SocialIcon/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { 3 | SocialIcon, 4 | SocialIconProps, 5 | SocialMediaType, 6 | } from '@rneui/base/dist/SocialIcon/SocialIcon'; 7 | 8 | export { SocialIcon }; 9 | export type { SocialIconProps, SocialMediaType }; 10 | export default withTheme(SocialIcon, 'SocialIcon'); 11 | -------------------------------------------------------------------------------- /packages/themed/src/SpeedDial/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { 3 | SpeedDial, 4 | SpeedDialProps, 5 | } from '@rneui/base/dist/SpeedDial/SpeedDial'; 6 | import { 7 | SpeedDialAction, 8 | SpeedDialActionProps, 9 | } from '@rneui/base/dist/SpeedDial/SpeedDial.Action'; 10 | 11 | export type { SpeedDialProps, SpeedDialActionProps }; 12 | export default Object.assign( 13 | withTheme(SpeedDial, 'SpeedDial'), 14 | { 15 | Action: withTheme(SpeedDialAction, 'SpeedDialAction'), 16 | } 17 | ); 18 | -------------------------------------------------------------------------------- /packages/themed/src/Switch/__tests__/Switch.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Switch from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | import { CreateThemeOptions, FullTheme } from '../../config'; 5 | 6 | describe('Switch Component', () => { 7 | it('should apply from theme', () => { 8 | const theme: Partial = { 9 | components: { 10 | Switch: { 11 | color: 'purple', 12 | }, 13 | }, 14 | }; 15 | const { wrapper } = renderWithWrapper(, 'RNE__SWITCH', theme); 16 | expect(wrapper.props).toMatchObject({ 17 | onTintColor: 'purple', 18 | }); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/themed/src/Switch/index.tsx: -------------------------------------------------------------------------------- 1 | import { Switch, SwitchProps } from '@rneui/base/dist/Switch/Switch'; 2 | import { withTheme } from '../config'; 3 | 4 | export { Switch }; 5 | export type { SwitchProps }; 6 | export default withTheme(Switch, 'Switch'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/Tab/__tests__/Tab.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Tab from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | import { fireEvent } from '@testing-library/react-native'; 5 | 6 | describe('Tab Component', () => { 7 | it('should render', () => { 8 | const changeTab = jest.fn(); 9 | const { queryAllByRole } = renderWithWrapper( 10 | 11 | 16 | 17 | ); 18 | 19 | const tabs = queryAllByRole('tab'); 20 | fireEvent(tabs[0], 'press'); 21 | expect(tabs.length).toBe(1); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/themed/src/Tab/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { TabBase, TabProps } from '@rneui/base/dist/Tab/Tab'; 3 | import { TabItem, TabItemProps } from '@rneui/base/dist/Tab/Tab.Item'; 4 | 5 | export type { TabProps, TabItemProps }; 6 | 7 | export const ThemedTab = Object.assign(withTheme(TabBase, 'Tab'), { 8 | Item: withTheme(TabItem, 'TabItem'), 9 | }); 10 | 11 | export default ThemedTab; 12 | -------------------------------------------------------------------------------- /packages/themed/src/TabView/__tests__/TabView.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import TabView from '../index'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | 5 | describe('Tab Component', () => { 6 | it('should render', () => { 7 | const onValueChange = jest.fn(); 8 | const { queryByTestId } = renderWithWrapper( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | expect(queryByTestId('tabView-test')).toBeDefined(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /packages/themed/src/TabView/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { TabViewBase, TabViewProps } from '@rneui/base/dist/TabView/TabView'; 3 | import { 4 | TabViewItem, 5 | TabViewItemProps, 6 | } from '@rneui/base/dist/TabView/TabView.Item'; 7 | 8 | export type { TabViewProps, TabViewItemProps }; 9 | 10 | export default Object.assign(withTheme(TabViewBase, 'TabView'), { 11 | Item: withTheme(TabViewItem, 'TabViewItem'), 12 | }); 13 | -------------------------------------------------------------------------------- /packages/themed/src/Text/index.tsx: -------------------------------------------------------------------------------- 1 | import { Text, TextProps } from '@rneui/base/dist/Text/Text'; 2 | import { withTheme } from '../config'; 3 | 4 | export { Text }; 5 | export type { TextProps }; 6 | export default withTheme(Text, 'Text'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/Tile/__tests__/FeaturedTile.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FeaturedTile } from '..'; 3 | import { renderWithWrapper } from '../../../.ci/testHelper'; 4 | 5 | describe('FeaturedTitle component', () => { 6 | it('should apply values from theme', () => { 7 | const theme = { 8 | FeaturedTile: { 9 | title: 'I am featured', 10 | }, 11 | }; 12 | const { queryByText } = renderWithWrapper( 13 | , 14 | '', 15 | { components: theme } 16 | ); 17 | expect(queryByText('I am featured')).not.toBeNull(); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/themed/src/Tile/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Tile, TileProps } from '@rneui/base/dist/Tile/Tile'; 3 | import { FeaturedTile as BaseFeaturedTile } from '@rneui/base/dist/Tile/components/FeaturedTile'; 4 | 5 | export type { TileProps }; 6 | export const FeaturedTile = withTheme( 7 | BaseFeaturedTile, 8 | 'FeaturedTile' 9 | ); 10 | export default withTheme(Tile, 'Tile'); 11 | -------------------------------------------------------------------------------- /packages/themed/src/Tooltip/index.tsx: -------------------------------------------------------------------------------- 1 | import { withTheme } from '../config'; 2 | import { Tooltip, TooltipProps } from '@rneui/base/dist/Tooltip/Tooltip'; 3 | 4 | export { Tooltip }; 5 | export type { TooltipProps }; 6 | export default withTheme(Tooltip, 'Tooltip'); 7 | -------------------------------------------------------------------------------- /packages/themed/src/config/colors.ts: -------------------------------------------------------------------------------- 1 | import { Colors, darkColors, lightColors } from '@rneui/base/dist/helpers'; 2 | 3 | export { lightColors, darkColors }; 4 | export type { Colors }; 5 | -------------------------------------------------------------------------------- /packages/themed/src/config/makeStyles.ts: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { StyleSheet } from 'react-native'; 3 | import { Colors } from './colors'; 4 | import { Theme } from './theme'; 5 | import { useTheme } from './ThemeProvider'; 6 | 7 | export const makeStyles = 8 | | StyleSheet.NamedStyles, V>( 9 | styles: 10 | | T 11 | | (( 12 | theme: { 13 | colors: Colors; 14 | } & Theme, 15 | props: V 16 | ) => T) 17 | ) => 18 | (props: V = {} as any): T => { 19 | const { theme } = useTheme(); 20 | 21 | return useMemo(() => { 22 | const css = typeof styles === 'function' ? styles(theme, props) : styles; 23 | return StyleSheet.create(css); 24 | }, [props, theme]); 25 | }; 26 | -------------------------------------------------------------------------------- /packages/themed/src/config/theme.ts: -------------------------------------------------------------------------------- 1 | import { Colors } from './colors'; 2 | import { ComponentTheme } from './theme.component'; 3 | import { ThemeSpacing, defaultSpacing } from '@rneui/base/dist/helpers'; 4 | export type RecursivePartial = { [P in keyof T]?: RecursivePartial }; 5 | 6 | export type ThemeMode = 'light' | 'dark'; 7 | 8 | export { ThemeSpacing, defaultSpacing }; 9 | 10 | export interface Theme { 11 | mode: ThemeMode; 12 | spacing: ThemeSpacing; 13 | } 14 | 15 | export interface FullTheme extends ComponentTheme, Theme { 16 | colors: Colors; 17 | } 18 | -------------------------------------------------------------------------------- /packages/themed/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "references": [ 4 | { 5 | "path": "../base" 6 | } 7 | ], 8 | "compilerOptions": { 9 | "allowJs": true /* Allow javascript files to be compiled. */, 10 | "outDir": "dist", 11 | "declaration": true, 12 | "composite": true 13 | }, 14 | "include": ["src/**/*.tsx", "src/**/*.ts", "src/index.ts"], 15 | "exclude": [ 16 | ".ci", 17 | "dist", 18 | "node_modules", 19 | "babel.config.js", 20 | "jest.config.js", 21 | "src/index.d.ts", 22 | "src/**/__tests__" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /scripts/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-console": "off", 4 | "no-unused-vars": "off" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /scripts/docgen/README.md: -------------------------------------------------------------------------------- 1 | # RNE DocGen 2 | 3 | ```bash 4 | 5 | yarn docs-build-api 6 | 7 | ``` 8 | 9 | ## Options 10 | 11 | ```bash 12 | yarn docs-build-api --source='base/src/Avatar/**' 13 | yarn docs-build-api -s='base/src/Avatar/**' 14 | 15 | ## or 16 | 17 | yarn docs-build-api --component='Button' --pkg='base' 18 | yarn docs-build-api -c='Button' -p='base' 19 | 20 | ``` 21 | -------------------------------------------------------------------------------- /scripts/docgen/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "resolveJsonModule": true, 5 | "jsx": "preserve", 6 | "module": "CommonJS", 7 | "downlevelIteration": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /scripts/release/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "resolveJsonModule": true, 5 | "jsx": "preserve", 6 | "module": "CommonJS", 7 | "downlevelIteration": true, 8 | "lib": ["DOM"] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # production 5 | /build 6 | 7 | # generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | .pnp.* 22 | .yarn/* 23 | !.yarn/patches 24 | !.yarn/plugins 25 | !.yarn/releases 26 | !.yarn/sdks 27 | !.yarn/versions 28 | 29 | website/docs/main/Component.md 30 | website/translated_docs 31 | website/build/ 32 | website/yarn.lock 33 | website/node_modules 34 | 35 | website/i18n/* 36 | !website/i18n/en.json 37 | -------------------------------------------------------------------------------- /website/.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-3.2.4.cjs 4 | 5 | plugins: 6 | - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs 7 | spec: "@yarnpkg/plugin-interactive-tools" 8 | -------------------------------------------------------------------------------- /website/README.md: -------------------------------------------------------------------------------- 1 | ## React Native Elements website 2 | 3 | https://reactnativeelements.com/ 4 | 5 | ### Getting Started 6 | 7 | The RNE website is made using [Docusaurus](https://docusaurus.io/). It's basically a React app with some magical markdown processor that helps make open source websites beautiful and maintainable. 8 | 9 | - Install node_modules 10 | 11 | ``` 12 | yarn 13 | ``` 14 | 15 | - Start the react app 16 | 17 | ``` 18 | yarn start 19 | ``` 20 | -------------------------------------------------------------------------------- /website/blog/authors.yml: -------------------------------------------------------------------------------- 1 | arpitBhalla: 2 | name: Arpit Bhalla 3 | title: GSoC'21 fellow 4 | url: https://github.com/arpitbhalla 5 | image_url: https://github.com/arpitbhalla.png 6 | email: arpitbhallay@proton.me 7 | twitter: arpitbhalla_ 8 | 9 | flyingcircle: 10 | name: Jeremy Hamilton 11 | title: Maintainer 12 | url: https://github.com/flyingcircle 13 | image_url: https://github.com/flyingcircle.png 14 | 15 | rneui: 16 | name: RNE Core Team 17 | title: React Native Elements 18 | url: http://twitter.com/rn_elements/ 19 | image_url: https://github.com/rneui.png 20 | -------------------------------------------------------------------------------- /website/docs/component_usage/ListItem.Swipeable.mdx: -------------------------------------------------------------------------------- 1 | 2 | 3 | ```js 4 | ( 6 |