├── example ├── .eslintignore ├── .watchmanconfig ├── .prettierignore ├── src │ ├── components │ │ ├── LinearGradient.ts │ │ └── AppLoading.ts │ ├── images │ │ ├── logo.png │ │ ├── rating.png │ │ ├── shirt.png │ │ └── water.png │ ├── config │ │ ├── stack.ts │ │ ├── colors.ts │ │ ├── socialColors.ts │ │ └── fonts.ts │ ├── helpers │ │ ├── vector-fonts.ts │ │ ├── AssetsCaching.tsx │ │ └── ThemeReducer.tsx │ └── views │ │ ├── lists │ │ └── index.tsx │ │ └── login │ │ └── index.tsx ├── web │ ├── favicon.png │ └── serve.json ├── .prettierrc ├── assets │ ├── icons │ │ ├── icon.png │ │ └── loading.png │ ├── fonts │ │ ├── Georgia.ttf │ │ ├── Ubuntu-Bold.ttf │ │ ├── Ubuntu-Light.ttf │ │ ├── Montserrat-Bold.ttf │ │ ├── Montserrat-Light.ttf │ │ ├── Montserrat-Regular.ttf │ │ └── Ubuntu-Light-Italic.ttf │ ├── images │ │ ├── avatar1.jpg │ │ ├── user-hp.png │ │ ├── bg_screen1.jpg │ │ ├── bg_screen2.jpg │ │ ├── bg_screen3.jpg │ │ ├── bg_screen4.jpg │ │ ├── user-cool.png │ │ ├── wallpaper_1.jpg │ │ ├── wallpaper_2.jpg │ │ ├── wallpaper_3.jpg │ │ ├── wallpaper_4.jpg │ │ └── user-student.png │ └── mocks │ │ ├── iOS-10-vs-iOS-11-Settings.jpeg │ │ ├── 4e2c606885b9fb2d8aea70827e4949bf.jpg │ │ ├── Android-N-new-settings-ui-mockup.jpg │ │ └── beautiful-list-ui-for-mobile-app-5.jpg ├── .gitignore ├── .eslintrc ├── index.js ├── eas.json ├── tsconfig.json ├── app.web-build.json └── app.json ├── packages ├── themed │ ├── .docgenignore │ ├── babel.config.js │ ├── src │ │ ├── config │ │ │ ├── colors.ts │ │ │ ├── theme.ts │ │ │ └── makeStyles.ts │ │ ├── FAB │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── FAB.test.tsx │ │ ├── Chip │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Chip.test.tsx │ │ ├── Text │ │ │ └── index.tsx │ │ ├── Input │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Input.test.tsx │ │ ├── Rating │ │ │ └── index.tsx │ │ ├── Button │ │ │ └── index.tsx │ │ ├── Header │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Header.test.tsx │ │ ├── Slider │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Slider.test.tsx │ │ ├── Switch │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Switch.test.tsx │ │ ├── Divider │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Divider.test.tsx │ │ ├── Overlay │ │ │ └── index.tsx │ │ ├── Tooltip │ │ │ └── index.tsx │ │ ├── Skeleton │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Skeleton.test.tsx │ │ ├── CheckBox │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── CheckBox.test.tsx │ │ ├── Badge │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ ├── withBadge.test.tsx │ │ │ │ └── Badge.test.tsx │ │ ├── AirbnbRating │ │ │ └── index.tsx │ │ ├── BottomSheet │ │ │ └── index.tsx │ │ ├── ButtonGroup │ │ │ └── index.tsx │ │ ├── PricingCard │ │ │ └── index.tsx │ │ ├── Icon │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Icon.test.tsx │ │ ├── SocialIcon │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── SocialIcon.test.tsx │ │ ├── Tile │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── FeaturedTile.test.tsx │ │ ├── Tab │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Tab.test.tsx │ │ ├── Avatar │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── Avatar.test.tsx │ │ ├── TabView │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── TabView.test.tsx │ │ ├── SpeedDial │ │ │ └── index.tsx │ │ ├── Image │ │ │ └── index.tsx │ │ ├── SearchBar │ │ │ ├── index.tsx │ │ │ └── __tests__ │ │ │ │ └── SearchBar.test.tsx │ │ ├── Dialog │ │ │ └── __tests__ │ │ │ │ └── Dialog.test.tsx │ │ ├── Card │ │ │ └── __tests__ │ │ │ │ └── Card.test.tsx │ │ ├── ListItem │ │ │ └── __tests__ │ │ │ │ └── ListItem.test.tsx │ │ └── LinearProgress │ │ │ └── __tests__ │ │ │ └── LinearProgress.test.tsx │ ├── .gitignore │ ├── .ci │ │ └── setupTests.ts │ └── tsconfig.json └── base │ ├── babel.config.js │ ├── src │ ├── FAB │ │ └── index.tsx │ ├── Chip │ │ └── index.tsx │ ├── Text │ │ └── index.tsx │ ├── Tile │ │ └── index.tsx │ ├── Input │ │ └── index.tsx │ ├── Button │ │ └── index.tsx │ ├── Header │ │ ├── index.tsx │ │ └── components │ │ │ └── HeaderIcon.tsx │ ├── Slider │ │ ├── index.tsx │ │ └── components │ │ │ └── Rect.tsx │ ├── Switch │ │ ├── index.tsx │ │ └── __tests__ │ │ │ └── __snapshots__ │ │ │ └── Switch.test.tsx.snap │ ├── Divider │ │ └── index.tsx │ ├── Overlay │ │ └── index.tsx │ ├── Tooltip │ │ ├── index.tsx │ │ └── __tests__ │ │ │ ├── getTooltipCoordinate.test.tsx │ │ │ └── __snapshots__ │ │ │ └── Triangle.test.tsx.snap │ ├── Rating │ │ ├── index.tsx │ │ └── Rating.tsx │ ├── CheckBox │ │ └── index.tsx │ ├── Skeleton │ │ ├── index.tsx │ │ └── __tests__ │ │ │ └── Skeleton.test.tsx │ ├── SocialIcon │ │ └── index.tsx │ ├── AirbnbRating │ │ └── index.tsx │ ├── BottomSheet │ │ └── index.tsx │ ├── ButtonGroup │ │ └── index.tsx │ ├── PricingCard │ │ └── index.tsx │ ├── Badge │ │ └── index.tsx │ ├── Icon │ │ └── index.tsx │ ├── helpers │ │ ├── BackgroundImage.tsx │ │ ├── normalizeText.tsx │ │ ├── __tests__ │ │ │ └── colors.test.tsx │ │ └── makeStyles.ts │ ├── Tab │ │ └── index.tsx │ ├── SearchBar │ │ ├── __tests__ │ │ │ ├── SearchBar-default.test.tsx │ │ │ ├── SearchBar-android.test.tsx │ │ │ └── SearchBar-ios.test.tsx │ │ └── index.tsx │ ├── TabView │ │ ├── index.tsx │ │ └── TabView.Item.tsx │ ├── Avatar │ │ ├── index.tsx │ │ └── __tests__ │ │ │ └── Accessory.test.tsx │ ├── SpeedDial │ │ ├── index.tsx │ │ └── __tests__ │ │ │ └── SpeedDial.Action.test.tsx │ ├── Image │ │ └── index.tsx │ ├── Dialog │ │ └── index.tsx │ └── Card │ │ ├── Card.Image.tsx │ │ └── Card.Divider.tsx │ ├── .docgenignore │ ├── .gitignore │ ├── .ci │ └── setupTests.ts │ └── tsconfig.json ├── website ├── docs │ ├── component_usage │ │ ├── TabView.mdx │ │ ├── Text.mdx │ │ ├── Switch.mdx │ │ └── ListItem.Swipeable.mdx │ ├── migration-guide.md │ ├── repo │ │ └── contributing.mdx │ └── universe │ │ └── getting_started.md ├── static │ ├── CNAME │ ├── img │ │ ├── card.png │ │ ├── fab.png │ │ ├── logo.png │ │ ├── tab.jpg │ │ ├── text.png │ │ ├── badges.png │ │ ├── header.png │ │ ├── icons.png │ │ ├── input.png │ │ ├── lists.png │ │ ├── SpeedDial.gif │ │ ├── accorsion.gif │ │ ├── arcSlider.png │ │ ├── buttons.png │ │ ├── checkbox.png │ │ ├── favicon.png │ │ ├── overlay.png │ │ ├── pricing.png │ │ ├── searchbar.png │ │ ├── speeddial.png │ │ ├── swipeable.gif │ │ ├── app-preview.png │ │ ├── avatar_all.png │ │ ├── bottomsheet.gif │ │ ├── header-left.png │ │ ├── switch_gif.gif │ │ ├── website │ │ │ ├── seo.png │ │ │ ├── logo.png │ │ │ ├── slack.png │ │ │ ├── Expo Go.png │ │ │ ├── vsc_ext.png │ │ │ ├── ci-checks.png │ │ │ ├── start_now.png │ │ │ ├── app-preview2.png │ │ │ └── app-preview3.png │ │ ├── button_group.png │ │ ├── buttons_0.19.png │ │ ├── forms_fields.png │ │ ├── linearProgress.gif │ │ ├── list-badges.jpeg │ │ ├── peer-dep-error.png │ │ ├── social-icons.png │ │ ├── tooltipExample.gif │ │ ├── chip │ │ │ ├── chip--solid.jpg │ │ │ └── chip--outline.jpg │ │ ├── circularSlider1.gif │ │ ├── circularSlider2.gif │ │ ├── forms_validation.png │ │ ├── rating_component.gif │ │ ├── rating_readonly.jpg │ │ ├── avatar │ │ │ ├── avatar--edit.jpg │ │ │ ├── avatar--icon.jpg │ │ │ ├── avatar--photo.jpg │ │ │ └── avatar--title.jpg │ │ ├── avatar_with_icons.png │ │ ├── avatar_with_images.png │ │ ├── badge │ │ │ ├── badge--mini.jpg │ │ │ ├── badge--standard.jpg │ │ │ ├── badge--indicator.jpg │ │ │ └── badge--withBadge.png │ │ ├── input │ │ │ ├── input--label.png │ │ │ └── input--placeholder.png │ │ ├── slider_screenshot.png │ │ ├── avatar_with_initials.png │ │ ├── button │ │ │ ├── button--clear.jpg │ │ │ ├── button--solid.jpg │ │ │ └── button--outline.jpg │ │ ├── dialog │ │ │ ├── dialog--multi.jpg │ │ │ ├── dialog--simple.jpg │ │ │ ├── dialog--custom1.gif │ │ │ ├── dialog--custom2.gif │ │ │ ├── dialog--loading.gif │ │ │ └── dialog--noaction.jpg │ │ ├── react-native-training.png │ │ ├── input_with_explanation.png │ │ ├── input_without_explanation.png │ │ ├── avatar_with_title_placeholder.gif │ │ ├── listitem_with_gradient_scale.gif │ │ └── logo-icon.svg │ └── css │ │ └── modules.css ├── versioned_docs │ ├── version-4.0.0-beta.0 │ │ ├── main │ │ │ ├── usage │ │ │ │ ├── TabView │ │ │ │ │ └── TabView.md │ │ │ │ ├── Card │ │ │ │ │ └── Card.md │ │ │ │ ├── FAB │ │ │ │ │ └── FAB.md │ │ │ │ ├── Tab │ │ │ │ │ └── Tab.md │ │ │ │ ├── Text │ │ │ │ │ └── Text.md │ │ │ │ ├── Tile │ │ │ │ │ └── Tile.md │ │ │ │ ├── Avatar │ │ │ │ │ └── Avatar.md │ │ │ │ ├── Divider │ │ │ │ │ └── Divider.md │ │ │ │ ├── Image │ │ │ │ │ └── Image.md │ │ │ │ ├── Slider │ │ │ │ │ └── Slider.md │ │ │ │ ├── Switch │ │ │ │ │ └── Switch.md │ │ │ │ ├── CheckBox │ │ │ │ │ └── CheckBox.md │ │ │ │ ├── SpeedDial │ │ │ │ │ └── SpeedDial.md │ │ │ │ ├── AirbnbRating │ │ │ │ │ └── AirbnbRating.md │ │ │ │ ├── PricingCard │ │ │ │ │ └── PricingCard.md │ │ │ │ ├── SocialIcon │ │ │ │ │ └── SocialIcon.md │ │ │ │ ├── LinearProgress │ │ │ │ │ └── LinearProgress.md │ │ │ │ ├── Badge │ │ │ │ │ └── Badge.md │ │ │ │ ├── BottomSheet │ │ │ │ │ └── BottomSheet.md │ │ │ │ ├── Rating │ │ │ │ │ └── Rating.md │ │ │ │ ├── Tooltip │ │ │ │ │ └── Tooltip.md │ │ │ │ ├── Dialog │ │ │ │ │ └── Dialog.md │ │ │ │ └── Overlay │ │ │ │ │ └── Overlay.md │ │ │ └── Chip.md │ │ └── contributing.md │ ├── version-4.0.0-rc.1 │ │ ├── component_usage │ │ │ ├── TabView.mdx │ │ │ ├── Switch.mdx │ │ │ └── ListItem.Swipeable.mdx │ │ ├── repo │ │ │ └── contributing.mdx │ │ ├── universe │ │ │ └── getting_started.md │ │ └── components │ │ │ ├── TabView.Item.mdx │ │ │ ├── Card.Title.mdx │ │ │ ├── SpeedDial.Action.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ ├── ListItem.Title.mdx │ │ │ ├── Chip.mdx │ │ │ └── Dialog.Title.mdx │ ├── version-4.0.0-rc.2 │ │ ├── component_usage │ │ │ ├── TabView.mdx │ │ │ ├── Switch.mdx │ │ │ └── ListItem.Swipeable.mdx │ │ ├── repo │ │ │ └── contributing.mdx │ │ ├── universe │ │ │ └── getting_started.md │ │ └── components │ │ │ ├── TabView.Item.mdx │ │ │ ├── Card.Title.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ ├── ListItem.Title.mdx │ │ │ ├── SpeedDial.Action.mdx │ │ │ ├── Chip.mdx │ │ │ └── Dialog.Title.mdx │ ├── version-4.0.0-rc.3 │ │ ├── component_usage │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Switch.mdx │ │ │ └── ListItem.Swipeable.mdx │ │ ├── repo │ │ │ └── contributing.mdx │ │ ├── universe │ │ │ └── getting_started.md │ │ └── components │ │ │ ├── Card.Title.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ ├── ListItem.Title.mdx │ │ │ ├── SpeedDial.Action.mdx │ │ │ └── Chip.mdx │ ├── version-4.0.0-rc.4 │ │ ├── component_usage │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Switch.mdx │ │ │ └── ListItem.Swipeable.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ └── contributing.mdx │ │ ├── universe │ │ │ └── getting_started.md │ │ └── components │ │ │ ├── Card.Title.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ └── ListItem.Title.mdx │ ├── version-4.0.0-rc.5 │ │ ├── component_usage │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Switch.mdx │ │ │ └── ListItem.Swipeable.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ └── contributing.mdx │ │ ├── universe │ │ │ └── getting_started.md │ │ └── components │ │ │ ├── Card.Title.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ └── ListItem.Title.mdx │ ├── version-4.0.0-rc.6 │ │ ├── component_usage │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Switch.mdx │ │ │ └── ListItem.Swipeable.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ └── contributing.mdx │ │ ├── universe │ │ │ └── getting_started.md │ │ └── components │ │ │ ├── Card.Title.mdx │ │ │ ├── TabView.Item.mdx │ │ │ ├── Card.FeaturedTitle.mdx │ │ │ ├── Dialog.Button.mdx │ │ │ ├── Card.FeaturedSubtitle.mdx │ │ │ ├── ListItem.Input.mdx │ │ │ ├── Card.Divider.mdx │ │ │ ├── ListItem.CheckBox.mdx │ │ │ ├── Dialog.Actions.mdx │ │ │ ├── ListItem.Content.mdx │ │ │ ├── ListItem.Subtitle.mdx │ │ │ └── ListItem.Title.mdx │ ├── version-4.0.0-rc.7 │ │ ├── component_usage │ │ │ ├── TabView.mdx │ │ │ ├── Text.mdx │ │ │ ├── Switch.mdx │ │ │ └── ListItem.Swipeable.mdx │ │ ├── migration-guide.md │ │ ├── repo │ │ │ └── contributing.mdx │ │ └── universe │ │ │ └── getting_started.md │ ├── version-3.4.2 │ │ ├── text.md │ │ ├── props │ │ │ └── chip.md │ │ ├── divider.md │ │ ├── fab.md │ │ └── pricing.md │ ├── version-1.2.0 │ │ └── divider.md │ └── version-2.3.2 │ │ └── divider.md ├── src │ ├── pages │ │ ├── migration-guides.md │ │ └── sponsor.tsx │ └── theme │ │ └── ReactLiveScope │ │ └── index.js ├── .yarnrc.yml ├── versions.json ├── tsconfig.json ├── README.md ├── playground │ └── utils │ │ └── createReactViewBaseConfig.js ├── blog │ └── authors.yml └── .gitignore ├── .prettierignore ├── .husky └── pre-commit ├── .yarnrc.yml ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── config.yml │ └── feature-request.md ├── release.yml └── workflows │ └── expo.yml ├── .eslintignore ├── .prettierrc ├── scripts ├── .eslintrc ├── docgen │ ├── tsconfig.json │ └── README.md └── release │ └── tsconfig.json ├── .editorconfig ├── .eslintrc ├── .gitignore ├── lerna.json └── codecov.yml /example/.eslintignore: -------------------------------------------------------------------------------- 1 | web-build -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /packages/themed/.docgenignore: -------------------------------------------------------------------------------- 1 | ** 2 | -------------------------------------------------------------------------------- /website/docs/component_usage/TabView.mdx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/static/CNAME: -------------------------------------------------------------------------------- 1 | reactnativeelements.com -------------------------------------------------------------------------------- /example/.prettierignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.expo 3 | /web 4 | /*.json 5 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/TabView/TabView.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/component_usage/TabView.mdx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/component_usage/TabView.mdx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/component_usage/TabView.mdx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/component_usage/TabView.mdx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/component_usage/TabView.mdx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/component_usage/TabView.mdx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.7/component_usage/TabView.mdx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | coverage 2 | **/coverage 3 | **/dist 4 | **/CHANGELOG.md 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-3.2.4.cjs 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | open_collective: react-native-elements 2 | github: react-native-elements 3 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | website/** 2 | **/coverage/** 3 | **/dist/** 4 | **/__tests__/** 5 | **/CHANGELOG.md 6 | -------------------------------------------------------------------------------- /example/src/components/LinearGradient.ts: -------------------------------------------------------------------------------- 1 | export { LinearGradient } from 'expo-linear-gradient'; 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "auto" 5 | } 6 | -------------------------------------------------------------------------------- /example/web/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/web/favicon.png -------------------------------------------------------------------------------- /packages/base/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /scripts/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-console": "off", 4 | "no-unused-vars": "off" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/src/components/AppLoading.ts: -------------------------------------------------------------------------------- 1 | import AppLoading from 'expo-app-loading'; 2 | 3 | export default AppLoading; 4 | -------------------------------------------------------------------------------- /example/src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/src/images/logo.png -------------------------------------------------------------------------------- /packages/themed/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /website/static/img/card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/card.png -------------------------------------------------------------------------------- /website/static/img/fab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/fab.png -------------------------------------------------------------------------------- /website/static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/logo.png -------------------------------------------------------------------------------- /website/static/img/tab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/tab.jpg -------------------------------------------------------------------------------- /website/static/img/text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/text.png -------------------------------------------------------------------------------- /example/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": true 6 | } 7 | -------------------------------------------------------------------------------- /example/assets/icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/icons/icon.png -------------------------------------------------------------------------------- /example/src/images/rating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/src/images/rating.png -------------------------------------------------------------------------------- /example/src/images/shirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/src/images/shirt.png -------------------------------------------------------------------------------- /example/src/images/water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/src/images/water.png -------------------------------------------------------------------------------- /website/static/img/badges.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/badges.png -------------------------------------------------------------------------------- /website/static/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/header.png -------------------------------------------------------------------------------- /website/static/img/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/icons.png -------------------------------------------------------------------------------- /website/static/img/input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/input.png -------------------------------------------------------------------------------- /website/static/img/lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/lists.png -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Card/Card.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/FAB/FAB.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Tab/Tab.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Text/Text.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Tile/Tile.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /example/assets/fonts/Georgia.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/fonts/Georgia.ttf -------------------------------------------------------------------------------- /example/assets/icons/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/icons/loading.png -------------------------------------------------------------------------------- /packages/base/src/FAB/index.tsx: -------------------------------------------------------------------------------- 1 | import { FAB, FABProps } from './FAB'; 2 | 3 | export { FAB }; 4 | export type { FABProps }; 5 | -------------------------------------------------------------------------------- /website/static/img/SpeedDial.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/SpeedDial.gif -------------------------------------------------------------------------------- /website/static/img/accorsion.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/accorsion.gif -------------------------------------------------------------------------------- /website/static/img/arcSlider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/arcSlider.png -------------------------------------------------------------------------------- /website/static/img/buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/buttons.png -------------------------------------------------------------------------------- /website/static/img/checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/checkbox.png -------------------------------------------------------------------------------- /website/static/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/favicon.png -------------------------------------------------------------------------------- /website/static/img/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/overlay.png -------------------------------------------------------------------------------- /website/static/img/pricing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/pricing.png -------------------------------------------------------------------------------- /website/static/img/searchbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/searchbar.png -------------------------------------------------------------------------------- /website/static/img/speeddial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/speeddial.png -------------------------------------------------------------------------------- /website/static/img/swipeable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/swipeable.gif -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Avatar/Avatar.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Divider/Divider.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Image/Image.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Slider/Slider.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Switch/Switch.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /example/assets/images/avatar1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/avatar1.jpg -------------------------------------------------------------------------------- /example/assets/images/user-hp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/user-hp.png -------------------------------------------------------------------------------- /packages/base/src/Chip/index.tsx: -------------------------------------------------------------------------------- 1 | import { Chip, ChipProps } from './Chip'; 2 | 3 | export { Chip }; 4 | export type { ChipProps }; 5 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/static/img/app-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/app-preview.png -------------------------------------------------------------------------------- /website/static/img/avatar_all.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/avatar_all.png -------------------------------------------------------------------------------- /website/static/img/bottomsheet.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/bottomsheet.gif -------------------------------------------------------------------------------- /website/static/img/header-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/header-left.png -------------------------------------------------------------------------------- /website/static/img/switch_gif.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/switch_gif.gif -------------------------------------------------------------------------------- /website/static/img/website/seo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/website/seo.png -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/CheckBox/CheckBox.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/SpeedDial/SpeedDial.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /example/assets/fonts/Ubuntu-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/fonts/Ubuntu-Bold.ttf -------------------------------------------------------------------------------- /example/assets/fonts/Ubuntu-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/fonts/Ubuntu-Light.ttf -------------------------------------------------------------------------------- /example/assets/images/bg_screen1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/bg_screen1.jpg -------------------------------------------------------------------------------- /example/assets/images/bg_screen2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/bg_screen2.jpg -------------------------------------------------------------------------------- /example/assets/images/bg_screen3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/bg_screen3.jpg -------------------------------------------------------------------------------- /example/assets/images/bg_screen4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/bg_screen4.jpg -------------------------------------------------------------------------------- /example/assets/images/user-cool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/user-cool.png -------------------------------------------------------------------------------- /example/assets/images/wallpaper_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/wallpaper_1.jpg -------------------------------------------------------------------------------- /example/assets/images/wallpaper_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/wallpaper_2.jpg -------------------------------------------------------------------------------- /example/assets/images/wallpaper_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/wallpaper_3.jpg -------------------------------------------------------------------------------- /example/assets/images/wallpaper_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/wallpaper_4.jpg -------------------------------------------------------------------------------- /packages/base/src/Input/index.tsx: -------------------------------------------------------------------------------- 1 | import { Input, InputProps } from './Input'; 2 | 3 | export { Input }; 4 | export type { InputProps }; 5 | -------------------------------------------------------------------------------- /website/static/img/button_group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/button_group.png -------------------------------------------------------------------------------- /website/static/img/buttons_0.19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/buttons_0.19.png -------------------------------------------------------------------------------- /website/static/img/forms_fields.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/forms_fields.png -------------------------------------------------------------------------------- /website/static/img/linearProgress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/linearProgress.gif -------------------------------------------------------------------------------- /website/static/img/list-badges.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/list-badges.jpeg -------------------------------------------------------------------------------- /website/static/img/peer-dep-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/peer-dep-error.png -------------------------------------------------------------------------------- /website/static/img/social-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/social-icons.png -------------------------------------------------------------------------------- /website/static/img/tooltipExample.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/tooltipExample.gif -------------------------------------------------------------------------------- /website/static/img/website/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/website/logo.png -------------------------------------------------------------------------------- /website/static/img/website/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/website/slack.png -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/AirbnbRating/AirbnbRating.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/PricingCard/PricingCard.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/SocialIcon/SocialIcon.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /example/assets/images/user-student.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/images/user-student.png -------------------------------------------------------------------------------- /packages/base/src/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button, ButtonProps } from './Button'; 2 | 3 | export { Button }; 4 | export type { ButtonProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Header/index.tsx: -------------------------------------------------------------------------------- 1 | import { Header, HeaderProps } from './Header'; 2 | 3 | export { Header }; 4 | export type { HeaderProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Slider/index.tsx: -------------------------------------------------------------------------------- 1 | import { Slider, SliderProps } from './Slider'; 2 | 3 | export { Slider }; 4 | export type { SliderProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Switch/index.tsx: -------------------------------------------------------------------------------- 1 | import { Switch, SwitchProps } from './Switch'; 2 | 3 | export { Switch }; 4 | export type { SwitchProps }; 5 | -------------------------------------------------------------------------------- /website/static/img/chip/chip--solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/chip/chip--solid.jpg -------------------------------------------------------------------------------- /website/static/img/circularSlider1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/circularSlider1.gif -------------------------------------------------------------------------------- /website/static/img/circularSlider2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/circularSlider2.gif -------------------------------------------------------------------------------- /website/static/img/forms_validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/forms_validation.png -------------------------------------------------------------------------------- /website/static/img/rating_component.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/rating_component.gif -------------------------------------------------------------------------------- /website/static/img/rating_readonly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/rating_readonly.jpg -------------------------------------------------------------------------------- /website/static/img/website/Expo Go.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/website/Expo Go.png -------------------------------------------------------------------------------- /website/static/img/website/vsc_ext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/website/vsc_ext.png -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/LinearProgress/LinearProgress.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | -------------------------------------------------------------------------------- /example/assets/fonts/Montserrat-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/fonts/Montserrat-Bold.ttf -------------------------------------------------------------------------------- /example/assets/fonts/Montserrat-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/fonts/Montserrat-Light.ttf -------------------------------------------------------------------------------- /packages/base/src/Divider/index.tsx: -------------------------------------------------------------------------------- 1 | import { Divider, DividerProps } from './Divider'; 2 | 3 | export { Divider }; 4 | export type { DividerProps }; 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/Tooltip/index.tsx: -------------------------------------------------------------------------------- 1 | import { Tooltip, TooltipProps } from './Tooltip'; 2 | 3 | export { Tooltip }; 4 | export type { TooltipProps }; 5 | -------------------------------------------------------------------------------- /website/static/img/avatar/avatar--edit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/avatar/avatar--edit.jpg -------------------------------------------------------------------------------- /website/static/img/avatar/avatar--icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/avatar/avatar--icon.jpg -------------------------------------------------------------------------------- /website/static/img/avatar_with_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/avatar_with_icons.png -------------------------------------------------------------------------------- /website/static/img/avatar_with_images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/avatar_with_images.png -------------------------------------------------------------------------------- /website/static/img/badge/badge--mini.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/badge/badge--mini.jpg -------------------------------------------------------------------------------- /website/static/img/chip/chip--outline.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/chip/chip--outline.jpg -------------------------------------------------------------------------------- /website/static/img/input/input--label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/input/input--label.png -------------------------------------------------------------------------------- /website/static/img/slider_screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/slider_screenshot.png -------------------------------------------------------------------------------- /website/static/img/website/ci-checks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/website/ci-checks.png -------------------------------------------------------------------------------- /website/static/img/website/start_now.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/website/start_now.png -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /example/assets/fonts/Montserrat-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/fonts/Montserrat-Regular.ttf -------------------------------------------------------------------------------- /example/assets/fonts/Ubuntu-Light-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/fonts/Ubuntu-Light-Italic.ttf -------------------------------------------------------------------------------- /packages/base/.docgenignore: -------------------------------------------------------------------------------- 1 | **/index.tsx 2 | src/*/components/** 3 | **/__tests__/** 4 | **/helpers/** 5 | **/config/** 6 | src/SearchBar/SearchBar-** 7 | -------------------------------------------------------------------------------- /packages/base/src/Rating/index.tsx: -------------------------------------------------------------------------------- 1 | import { Rating, SwipeRatingProps } from './Rating'; 2 | 3 | export { Rating }; 4 | export type { SwipeRatingProps }; 5 | -------------------------------------------------------------------------------- /website/static/img/avatar/avatar--photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/avatar/avatar--photo.jpg -------------------------------------------------------------------------------- /website/static/img/avatar/avatar--title.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/avatar/avatar--title.jpg -------------------------------------------------------------------------------- /website/static/img/avatar_with_initials.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/avatar_with_initials.png -------------------------------------------------------------------------------- /website/static/img/badge/badge--standard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/badge/badge--standard.jpg -------------------------------------------------------------------------------- /website/static/img/button/button--clear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/button/button--clear.jpg -------------------------------------------------------------------------------- /website/static/img/button/button--solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/button/button--solid.jpg -------------------------------------------------------------------------------- /website/static/img/dialog/dialog--multi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/dialog/dialog--multi.jpg -------------------------------------------------------------------------------- /website/static/img/dialog/dialog--simple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/dialog/dialog--simple.jpg -------------------------------------------------------------------------------- /website/static/img/react-native-training.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/react-native-training.png -------------------------------------------------------------------------------- /website/static/img/website/app-preview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/website/app-preview2.png -------------------------------------------------------------------------------- /website/static/img/website/app-preview3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/website/app-preview3.png -------------------------------------------------------------------------------- /packages/base/src/CheckBox/index.tsx: -------------------------------------------------------------------------------- 1 | import { CheckBox, CheckBoxProps } from './CheckBox'; 2 | 3 | export { CheckBox }; 4 | export type { CheckBoxProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/Skeleton/index.tsx: -------------------------------------------------------------------------------- 1 | import { Skeleton, SkeletonProps } from './Skeleton'; 2 | 3 | export { Skeleton }; 4 | export type { SkeletonProps }; 5 | -------------------------------------------------------------------------------- /website/static/img/badge/badge--indicator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/badge/badge--indicator.jpg -------------------------------------------------------------------------------- /website/static/img/badge/badge--withBadge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/badge/badge--withBadge.png -------------------------------------------------------------------------------- /website/static/img/button/button--outline.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/button/button--outline.jpg -------------------------------------------------------------------------------- /website/static/img/dialog/dialog--custom1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/dialog/dialog--custom1.gif -------------------------------------------------------------------------------- /website/static/img/dialog/dialog--custom2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/dialog/dialog--custom2.gif -------------------------------------------------------------------------------- /website/static/img/dialog/dialog--loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/dialog/dialog--loading.gif -------------------------------------------------------------------------------- /website/static/img/dialog/dialog--noaction.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/dialog/dialog--noaction.jpg -------------------------------------------------------------------------------- /website/static/img/input/input--placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/input/input--placeholder.png -------------------------------------------------------------------------------- /website/static/img/input_with_explanation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/input_with_explanation.png -------------------------------------------------------------------------------- /website/static/img/input_without_explanation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/input_without_explanation.png -------------------------------------------------------------------------------- /example/assets/mocks/iOS-10-vs-iOS-11-Settings.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/mocks/iOS-10-vs-iOS-11-Settings.jpeg -------------------------------------------------------------------------------- /packages/base/src/SocialIcon/index.tsx: -------------------------------------------------------------------------------- 1 | import { SocialIcon, SocialIconProps } from './SocialIcon'; 2 | 3 | export { SocialIcon }; 4 | export type { SocialIconProps }; 5 | -------------------------------------------------------------------------------- /website/static/img/avatar_with_title_placeholder.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/avatar_with_title_placeholder.gif -------------------------------------------------------------------------------- /website/static/img/listitem_with_gradient_scale.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/website/static/img/listitem_with_gradient_scale.gif -------------------------------------------------------------------------------- /packages/base/src/AirbnbRating/index.tsx: -------------------------------------------------------------------------------- 1 | import { AirbnbRating, TapRatingProps } from './AirbnbRating'; 2 | 3 | export { AirbnbRating }; 4 | export type { TapRatingProps }; 5 | -------------------------------------------------------------------------------- /packages/base/src/BottomSheet/index.tsx: -------------------------------------------------------------------------------- 1 | import { BottomSheet, BottomSheetProps } from './BottomSheet'; 2 | 3 | export { BottomSheet }; 4 | export type { BottomSheetProps }; 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/PricingCard/index.tsx: -------------------------------------------------------------------------------- 1 | import { PricingCard, PricingCardProps } from './PricingCard'; 2 | 3 | export { PricingCard }; 4 | export type { PricingCardProps }; 5 | -------------------------------------------------------------------------------- /example/assets/mocks/4e2c606885b9fb2d8aea70827e4949bf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/example/assets/mocks/4e2c606885b9fb2d8aea70827e4949bf.jpg -------------------------------------------------------------------------------- /example/assets/mocks/Android-N-new-settings-ui-mockup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements/HEAD/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/HEAD/example/assets/mocks/beautiful-list-ui-for-mobile-app-5.jpg -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /website/docs/migration-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: migration_guide 3 | title: Migration Guide 4 | --- 5 | 6 | ## Migration Guide 7 | 8 | ### [v3.x to v4.x](/blog/2022/05/15/rneui-migration-guide) 9 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/src/pages/migration-guides.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: migration_guide 3 | title: Migration Guide 4 | --- 5 | 6 | ## Migration Guide 7 | 8 | ### [v3.x to v4.x](/blog/2022/05/15/rneui-migration-guide) 9 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/contributing.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | title: '' 4 | --- 5 | 6 | import ContributionGuide from '../../../CONTRIBUTING.md'; 7 | 8 | 9 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.7/migration-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: migration_guide 3 | title: Migration Guide 4 | --- 5 | 6 | ## Migration Guide 7 | 8 | ### [v3.x to v4.x](/blog/2022/05/15/rneui-migration-guide) 9 | -------------------------------------------------------------------------------- /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/versioned_docs/version-4.0.0-rc.4/migration-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: migration_guide 3 | title: Migration Guide 4 | --- 5 | 6 | # Migrating to v4 7 | 8 | [v4 migration guide](/blog/2022/05/15/rneui-migration-guide) is available. 9 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/migration-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: migration_guide 3 | title: Migration Guide 4 | --- 5 | 6 | # Migrating to v4 7 | 8 | [v4 migration guide](/blog/2022/05/15/rneui-migration-guide) is available. 9 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/migration-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: migration_guide 3 | title: Migration Guide 4 | --- 5 | 6 | # Migrating to v4 7 | 8 | [v4 migration guide](/blog/2022/05/15/rneui-migration-guide) is available. 9 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versions.json: -------------------------------------------------------------------------------- 1 | [ 2 | "4.0.0-rc.7", 3 | "4.0.0-rc.6", 4 | "4.0.0-rc.5", 5 | "4.0.0-rc.4", 6 | "4.0.0-rc.3", 7 | "4.0.0-rc.2", 8 | "4.0.0-rc.1", 9 | "4.0.0-beta.0", 10 | "3.4.2", 11 | "2.3.2", 12 | "1.2.0" 13 | ] 14 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/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/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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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/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/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/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 | -------------------------------------------------------------------------------- /website/static/css/modules.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroButton { 7 | color: #fff !important; 8 | } 9 | 10 | .heroButton:hover { 11 | color: #2089dc !important; 12 | } 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/docs/repo/contributing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | sidebar_label: Contributing 4 | slug: /contributing 5 | title: '' 6 | tags: 7 | - Contribution 8 | - Open Source 9 | --- 10 | 11 | import ContributionGuide from '@site/../CONTRIBUTING.md'; 12 | 13 | 14 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/docusaurus/tsconfig.json", 3 | "compilerOptions": { 4 | "resolveJsonModule": true, 5 | "jsx": "preserve", 6 | "downlevelIteration": true 7 | }, 8 | "include": ["src/"], 9 | "exclude": ["node_modules", "docs/playground/**/*"] 10 | } 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/repo/contributing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | sidebar_label: Contributing 4 | slug: /contributing 5 | title: '' 6 | tags: 7 | - Contribution 8 | - Open Source 9 | --- 10 | 11 | import ContributionGuide from '@site/../CONTRIBUTING.md'; 12 | 13 | 14 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/repo/contributing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | sidebar_label: Contributing 4 | slug: /contributing 5 | title: '' 6 | tags: 7 | - Contribution 8 | - Open Source 9 | --- 10 | 11 | import ContributionGuide from '@site/../CONTRIBUTING.md'; 12 | 13 | 14 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/repo/contributing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | sidebar_label: Contributing 4 | slug: /contributing 5 | title: '' 6 | tags: 7 | - Contribution 8 | - Open Source 9 | --- 10 | 11 | import ContributionGuide from '@site/../CONTRIBUTING.md'; 12 | 13 | 14 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/repo/contributing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | sidebar_label: Contributing 4 | slug: /contributing 5 | title: '' 6 | tags: 7 | - Contribution 8 | - Open Source 9 | --- 10 | 11 | import ContributionGuide from '@site/../CONTRIBUTING.md'; 12 | 13 | 14 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/repo/contributing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | sidebar_label: Contributing 4 | slug: /contributing 5 | title: '' 6 | tags: 7 | - Contribution 8 | - Open Source 9 | --- 10 | 11 | import ContributionGuide from '@site/../CONTRIBUTING.md'; 12 | 13 | 14 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/repo/contributing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | sidebar_label: Contributing 4 | slug: /contributing 5 | title: '' 6 | tags: 7 | - Contribution 8 | - Open Source 9 | --- 10 | 11 | import ContributionGuide from '@site/../CONTRIBUTING.md'; 12 | 13 | 14 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.7/repo/contributing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | sidebar_label: Contributing 4 | slug: /contributing 5 | title: '' 6 | tags: 7 | - Contribution 8 | - Open Source 9 | --- 10 | 11 | import ContributionGuide from '@site/../CONTRIBUTING.md'; 12 | 13 | 14 | -------------------------------------------------------------------------------- /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/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/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/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/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/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 | -------------------------------------------------------------------------------- /website/docs/universe/getting_started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | id: getting_started 4 | slug: /universe 5 | title: Getting Started 6 | --- 7 | 8 | import Tabs from '@theme/Tabs'; 9 | import TabItem from '@theme/TabItem'; 10 | import useBaseUrl from '@docusaurus/useBaseUrl'; 11 | 12 | :::note 13 | 14 | 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/universe/getting_started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | id: getting_started 4 | slug: /universe 5 | title: Getting Started 6 | --- 7 | 8 | import Tabs from '@theme/Tabs'; 9 | import TabItem from '@theme/TabItem'; 10 | import useBaseUrl from '@docusaurus/useBaseUrl'; 11 | 12 | :::note 13 | 14 | 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/universe/getting_started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | id: getting_started 4 | slug: /universe 5 | title: Getting Started 6 | --- 7 | 8 | import Tabs from '@theme/Tabs'; 9 | import TabItem from '@theme/TabItem'; 10 | import useBaseUrl from '@docusaurus/useBaseUrl'; 11 | 12 | :::note 13 | 14 | 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/universe/getting_started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | id: getting_started 4 | slug: /universe 5 | title: Getting Started 6 | --- 7 | 8 | import Tabs from '@theme/Tabs'; 9 | import TabItem from '@theme/TabItem'; 10 | import useBaseUrl from '@docusaurus/useBaseUrl'; 11 | 12 | :::note 13 | 14 | 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/universe/getting_started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | id: getting_started 4 | slug: /universe 5 | title: Getting Started 6 | --- 7 | 8 | import Tabs from '@theme/Tabs'; 9 | import TabItem from '@theme/TabItem'; 10 | import useBaseUrl from '@docusaurus/useBaseUrl'; 11 | 12 | :::note 13 | 14 | 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/universe/getting_started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | id: getting_started 4 | slug: /universe 5 | title: Getting Started 6 | --- 7 | 8 | import Tabs from '@theme/Tabs'; 9 | import TabItem from '@theme/TabItem'; 10 | import useBaseUrl from '@docusaurus/useBaseUrl'; 11 | 12 | :::note 13 | 14 | 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/universe/getting_started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | id: getting_started 4 | slug: /universe 5 | title: Getting Started 6 | --- 7 | 8 | import Tabs from '@theme/Tabs'; 9 | import TabItem from '@theme/TabItem'; 10 | import useBaseUrl from '@docusaurus/useBaseUrl'; 11 | 12 | :::note 13 | 14 | 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.7/universe/getting_started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | id: getting_started 4 | slug: /universe 5 | title: Getting Started 6 | --- 7 | 8 | import Tabs from '@theme/Tabs'; 9 | import TabItem from '@theme/TabItem'; 10 | import useBaseUrl from '@docusaurus/useBaseUrl'; 11 | 12 | :::note 13 | 14 | 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Badge/Badge.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | 5 | ### withBadge Higher-Order Component 6 | 7 | The withBadge HOC allows you to easily add badges to icons and other components. 8 | 9 | 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/TabView.Item.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: tabview_item 3 | title: TabView.Item 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | They are individual item of the parent Tab. 11 | 12 | ## Props 13 | 14 | :::note 15 | Includes all [View](https://reactnative.dev/docs/view#props) props. 16 | ::: 17 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/TabView.Item.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: tabview_item 3 | title: TabView.Item 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | They are individual item of the parent Tab. 11 | 12 | ## Props 13 | 14 | :::note 15 | Includes all [View](https://reactnative.dev/docs/view#props) props. 16 | ::: 17 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/Card.Title.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_title 3 | title: Card.Title 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Add a general title to the Card. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](text#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/Card.Title.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_title 3 | title: Card.Title 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Add a general title to the Card. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](text#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/SpeedDial.Action.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: speeddial_action 3 | title: SpeedDial.Action 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Adds Action to the SpeedDial. 11 | This, Receive all [Fab](fab#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [FAB](fab#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/Dialog.Button.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: dialog_button 3 | title: Dialog.Button 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This is used to add a button to the Dialog. 11 | Receives all [Button](button#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Button](button#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/Dialog.Button.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: dialog_button 3 | title: Dialog.Button 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This is used to add a button to the Dialog. 11 | Receives all [Button](button#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Button](button#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/Card.FeaturedTitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredtitle 3 | title: Card.FeaturedTitle 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Add a featured title to the Card. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](text#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/Card.FeaturedTitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredtitle 3 | title: Card.FeaturedTitle 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Add a featured title to the Card. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](text#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/versioned_docs/version-4.0.0-rc.1/components/Card.FeaturedSubtitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredsubtitle 3 | title: Card.FeaturedSubtitle 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Add a featured subtitle to the Card. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](text#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/Card.FeaturedSubtitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredsubtitle 3 | title: Card.FeaturedSubtitle 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Add a featured subtitle to the Card. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](text#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/ListItem.Input.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_input 3 | title: ListItem.Input 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding an Text Input within the ListItem. 11 | This, Receives all [Input](Input.mdx#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Input](input#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/ListItem.Input.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_input 3 | title: ListItem.Input 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding an Text Input within the ListItem. 11 | This, Receives all [Input](Input.mdx#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Input](input#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/Card.Title.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_title 3 | title: Card.Title 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | Add a general title to the Card. 10 | This, Receives all [Text](text#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { Card } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Text](text#props) props. 22 | ::: 23 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/TabView.Item.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: tabview_item 3 | title: TabView.Item 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | They are individual item of the parent Tab. 10 | 11 | ## Import 12 | 13 | ```tsx 14 | import { TabView } from "@rneui/themed"; 15 | ``` 16 | 17 | ## Props 18 | 19 | :::note 20 | Includes all [View](https://reactnative.dev/docs/view#props) props. 21 | ::: 22 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/ListItem.CheckBox.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_checkbox 3 | title: ListItem.CheckBox 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding CheckBox to the ListItem. 11 | This, Receives all [CheckBox](checkbox#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [CheckBox](checkbox#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/ListItem.CheckBox.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_checkbox 3 | title: ListItem.CheckBox 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding CheckBox to the ListItem. 11 | This, Receives all [CheckBox](checkbox#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [CheckBox](checkbox#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/Card.Divider.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_divider 3 | title: Card.Divider 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Add divider to the card which acts as a separator between elements. 11 | This, Receives all [Divider](divider#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Divider](divider#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/Card.Divider.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_divider 3 | title: Card.Divider 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Add divider to the card which acts as a separator between elements. 11 | This, Receives all [Divider](divider#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Divider](divider#props) props. 17 | ::: 18 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/Card.FeaturedTitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredtitle 3 | title: Card.FeaturedTitle 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | Add a featured title to the Card. 10 | This, Receives all [Text](text#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { Card } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Text](text#props) props. 22 | ::: 23 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/Dialog.Button.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: dialog_button 3 | title: Dialog.Button 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | This is used to add a button to the Dialog. 10 | Receives all [Button](button#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { Dialog } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Button](button#props) props. 22 | ::: 23 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/Card.FeaturedSubtitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredsubtitle 3 | title: Card.FeaturedSubtitle 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | Add a featured subtitle to the Card. 10 | This, Receives all [Text](text#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { Card } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Text](text#props) props. 22 | ::: 23 | -------------------------------------------------------------------------------- /website/playground/utils/createReactViewBaseConfig.js: -------------------------------------------------------------------------------- 1 | export default function createReactViewBaseConfig(componentName, RNComponent) { 2 | if (!componentName || !RNComponent) { 3 | throw new Error( 4 | 'createBaseComponent needs a componentName name and RNComponent' 5 | ); 6 | } 7 | 8 | return { 9 | componentName, 10 | scope: { 11 | RNComponent, 12 | }, 13 | imports: { 14 | '@rneui/base': { 15 | named: [componentName], 16 | }, 17 | }, 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/ListItem.Input.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_input 3 | title: ListItem.Input 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | This allows adding an Text Input within the ListItem. 10 | This, Receives all [Input](Input.mdx#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { ListItem } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Input](input#props) props. 22 | ::: 23 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/Card.Divider.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_divider 3 | title: Card.Divider 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | Add divider to the card which acts as a separator between elements. 10 | This, Receives all [Divider](divider#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { Card } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Divider](divider#props) props. 22 | ::: 23 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/ListItem.CheckBox.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_checkbox 3 | title: ListItem.CheckBox 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | This allows adding CheckBox to the ListItem. 10 | This, Receives all [CheckBox](checkbox#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { ListItem } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [CheckBox](checkbox#props) props. 22 | ::: 23 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/src/pages/sponsor.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '@theme/Layout'; 3 | import OpenCollective from '../components/OpenCollective'; 4 | import Sponsor from '../components/Sponsor'; 5 | import '../../static/css/components.css'; 6 | 7 | const Home: React.FunctionComponent<{}> = () => { 8 | return ( 9 | 10 |
11 | 12 | 13 |
14 | 15 | ); 16 | }; 17 | 18 | export default Home; 19 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/BottomSheet/BottomSheet.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 5 | 6 | **Note:** 7 | Make sure that you have completed [Step 3](getting_started.md#step-3-setup-react-native-safe-area-context) in the setup guide before using `BottomSheet`. 8 | 9 | Overlay Modal that displays content from the bottom of the screen. 10 | 11 | 12 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/components/Card.Title.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_title 3 | title: Card.Title 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add a general title to the Card. 13 | This, Receives all [Text](text#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Text](text#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/components/TabView.Item.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: tabview_item 3 | title: TabView.Item 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | They are individual item of the parent Tab. 13 | 14 | ## Import 15 | 16 | ```tsx 17 | import { TabView } from "@rneui/themed"; 18 | ``` 19 | 20 | ## Props 21 | 22 | :::note 23 | Includes all [View](https://reactnative.dev/docs/view#props) props. 24 | ::: 25 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/components/Card.Title.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_title 3 | title: Card.Title 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add a general title to the Card. 13 | This, Receives all [Text](text#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Text](text#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/components/TabView.Item.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: tabview_item 3 | title: TabView.Item 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | They are individual item of the parent Tab. 13 | 14 | ## Import 15 | 16 | ```tsx 17 | import { TabView } from "@rneui/themed"; 18 | ``` 19 | 20 | ## Props 21 | 22 | :::note 23 | Includes all [View](https://reactnative.dev/docs/view#props) props. 24 | ::: 25 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/components/Card.Title.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_title 3 | title: Card.Title 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add a general title to the Card. 13 | This, Receives all [Text](text#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Text](text#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/components/TabView.Item.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: tabview_item 3 | title: TabView.Item 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | They are individual item of the parent Tab. 13 | 14 | ## Import 15 | 16 | ```tsx 17 | import { TabView } from "@rneui/themed"; 18 | ``` 19 | 20 | ## Props 21 | 22 | :::note 23 | Includes all [View](https://reactnative.dev/docs/view#props) props. 24 | ::: 25 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-3.4.2/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: text 3 | title: Text 4 | --- 5 | 6 | import useBaseUrl from '@docusaurus/useBaseUrl'; 7 | import Props from './props/text.md' 8 | 9 | Text displays words and characters at various sizes. 10 | 11 | Text 12 | 13 | ## Usage 14 | 15 | ```js 16 | import { Text } from 'react-native-elements'; 17 | 18 | Heading 1 19 | Heading 2 20 | Heading 3 21 | Heading 4 22 | ``` 23 | 24 | --- 25 | 26 | 27 | 28 | --- 29 | -------------------------------------------------------------------------------- /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/versioned_docs/version-4.0.0-rc.4/components/Card.FeaturedTitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredtitle 3 | title: Card.FeaturedTitle 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add a featured title to the Card. 13 | This, Receives all [Text](text#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Text](text#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/components/Dialog.Button.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: dialog_button 3 | title: Dialog.Button 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | This is used to add a button to the Dialog. 13 | Receives all [Button](button#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Dialog } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Button](button#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/components/Card.FeaturedTitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredtitle 3 | title: Card.FeaturedTitle 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add a featured title to the Card. 13 | This, Receives all [Text](text#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Text](text#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/components/Dialog.Button.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: dialog_button 3 | title: Dialog.Button 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | This is used to add a button to the Dialog. 13 | Receives all [Button](button#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Dialog } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Button](button#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/components/Card.FeaturedTitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredtitle 3 | title: Card.FeaturedTitle 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add a featured title to the Card. 13 | This, Receives all [Text](text#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Text](text#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/components/Dialog.Button.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: dialog_button 3 | title: Dialog.Button 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | This is used to add a button to the Dialog. 13 | Receives all [Button](button#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Dialog } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Button](button#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/components/Card.FeaturedSubtitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredsubtitle 3 | title: Card.FeaturedSubtitle 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add a featured subtitle to the Card. 13 | This, Receives all [Text](text#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Text](text#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/components/Card.FeaturedSubtitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredsubtitle 3 | title: Card.FeaturedSubtitle 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add a featured subtitle to the Card. 13 | This, Receives all [Text](text#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Text](text#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/components/Card.FeaturedSubtitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_featuredsubtitle 3 | title: Card.FeaturedSubtitle 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add a featured subtitle to the Card. 13 | This, Receives all [Text](text#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Text](text#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/components/ListItem.Input.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_input 3 | title: ListItem.Input 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | This allows adding an Text Input within the ListItem. 13 | This, Receives all [Input](Input.mdx#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { ListItem } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Input](input#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/components/ListItem.Input.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_input 3 | title: ListItem.Input 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | This allows adding an Text Input within the ListItem. 13 | This, Receives all [Input](Input.mdx#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { ListItem } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Input](input#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/components/ListItem.Input.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_input 3 | title: ListItem.Input 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | This allows adding an Text Input within the ListItem. 13 | This, Receives all [Input](Input.mdx#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { ListItem } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Input](input#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-3.4.2/props/chip.md: -------------------------------------------------------------------------------- 1 | ## Props 2 | 3 | > This component receives all 4 | > [TouchableNativeFeedback](http://reactnative.dev/docs/touchablenativefeedback.html#props) 5 | > (Android) or 6 | > [TouchableOpacity](http://reactnative.dev/docs/touchableopacity.html#props) 7 | > (iOS) props, along with 8 | > [Button](https://reactnativeelements.com/docs/button/#props) 9 | > props 10 | 11 | --- 12 | 13 | ## Reference 14 | 15 | ### `type` 16 | 17 | Type of button (optional) 18 | 19 | | Type | Default | 20 | | :----------------: | :-----: | 21 | | `solid`, `outline` | solid | 22 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/components/Card.Divider.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_divider 3 | title: Card.Divider 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add divider to the card which acts as a separator between elements. 13 | This, Receives all [Divider](divider#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Divider](divider#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/components/ListItem.CheckBox.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_checkbox 3 | title: ListItem.CheckBox 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | This allows adding CheckBox to the ListItem. 13 | This, Receives all [CheckBox](checkbox#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { ListItem } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [CheckBox](checkbox#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/components/Card.Divider.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_divider 3 | title: Card.Divider 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add divider to the card which acts as a separator between elements. 13 | This, Receives all [Divider](divider#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Divider](divider#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/components/ListItem.CheckBox.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_checkbox 3 | title: ListItem.CheckBox 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | This allows adding CheckBox to the ListItem. 13 | This, Receives all [CheckBox](checkbox#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { ListItem } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [CheckBox](checkbox#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/components/Card.Divider.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: card_divider 3 | title: Card.Divider 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | Add divider to the card which acts as a separator between elements. 13 | This, Receives all [Divider](divider#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { Card } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [Divider](divider#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/components/ListItem.CheckBox.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_checkbox 3 | title: ListItem.CheckBox 4 | --- 5 | 6 | import { IconsStyle } from "@site/src/components/Docs_Icons"; 7 | import Tabs from "@theme/Tabs"; 8 | import TabItem from "@theme/TabItem"; 9 | 10 | 11 | 12 | This allows adding CheckBox to the ListItem. 13 | This, Receives all [CheckBox](checkbox#props) props. 14 | 15 | ## Import 16 | 17 | ```tsx 18 | import { ListItem } from "@rneui/themed"; 19 | ``` 20 | 21 | ## Props 22 | 23 | :::note 24 | Includes all [CheckBox](checkbox#props) props. 25 | ::: 26 | -------------------------------------------------------------------------------- /website/docs/component_usage/Text.mdx: -------------------------------------------------------------------------------- 1 | ```tsx live 2 | Hello World 3 | ``` 4 | 5 | ### Using font-weight on android 6 | 7 | :::note 8 | For Android the font. weights MUST align with the used font. So try out which is the regarding font weight to your used font. 9 | ::: 10 | 11 | ```tsx 12 | 13 | h1Style: { 14 | fontFamily: 'Nunito-SemiBold', 15 | fontWeight: '300', 16 | }, 17 | h2Style: { 18 | fontFamily: 'Nunito-Regular', 19 | fontWeight: '100', 20 | }, 21 | h3Style: { 22 | fontFamily: 'Nunito-Bold', 23 | fontWeight: '500', 24 | }, 25 | ``` 26 | -------------------------------------------------------------------------------- /.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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/component_usage/Text.mdx: -------------------------------------------------------------------------------- 1 | ```tsx live 2 | Hello World 3 | ``` 4 | 5 | ### Using font-weight on android 6 | 7 | :::note 8 | For Android the font. weights MUST align with the used font. So try out which is the regarding font weight to your used font. 9 | ::: 10 | 11 | ```tsx 12 | 13 | h1Style: { 14 | fontFamily: 'Nunito-SemiBold', 15 | fontWeight: '300', 16 | }, 17 | h2Style: { 18 | fontFamily: 'Nunito-Regular', 19 | fontWeight: '100', 20 | }, 21 | h3Style: { 22 | fontFamily: 'Nunito-Bold', 23 | fontWeight: '500', 24 | }, 25 | ``` 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.4/component_usage/Text.mdx: -------------------------------------------------------------------------------- 1 | ```tsx live 2 | Hello World 3 | ``` 4 | 5 | ### Using font-weight on android 6 | 7 | :::note 8 | For Android the font. weights MUST align with the used font. So try out which is the regarding font weight to your used font. 9 | ::: 10 | 11 | ```tsx 12 | 13 | h1Style: { 14 | fontFamily: 'Nunito-SemiBold', 15 | fontWeight: '300', 16 | }, 17 | h2Style: { 18 | fontFamily: 'Nunito-Regular', 19 | fontWeight: '100', 20 | }, 21 | h3Style: { 22 | fontFamily: 'Nunito-Bold', 23 | fontWeight: '500', 24 | }, 25 | ``` 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.5/component_usage/Text.mdx: -------------------------------------------------------------------------------- 1 | ```tsx live 2 | Hello World 3 | ``` 4 | 5 | ### Using font-weight on android 6 | 7 | :::note 8 | For Android the font. weights MUST align with the used font. So try out which is the regarding font weight to your used font. 9 | ::: 10 | 11 | ```tsx 12 | 13 | h1Style: { 14 | fontFamily: 'Nunito-SemiBold', 15 | fontWeight: '300', 16 | }, 17 | h2Style: { 18 | fontFamily: 'Nunito-Regular', 19 | fontWeight: '100', 20 | }, 21 | h3Style: { 22 | fontFamily: 'Nunito-Bold', 23 | fontWeight: '500', 24 | }, 25 | ``` 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.6/component_usage/Text.mdx: -------------------------------------------------------------------------------- 1 | ```tsx live 2 | Hello World 3 | ``` 4 | 5 | ### Using font-weight on android 6 | 7 | :::note 8 | For Android the font. weights MUST align with the used font. So try out which is the regarding font weight to your used font. 9 | ::: 10 | 11 | ```tsx 12 | 13 | h1Style: { 14 | fontFamily: 'Nunito-SemiBold', 15 | fontWeight: '300', 16 | }, 17 | h2Style: { 18 | fontFamily: 'Nunito-Regular', 19 | fontWeight: '100', 20 | }, 21 | h3Style: { 22 | fontFamily: 'Nunito-Bold', 23 | fontWeight: '500', 24 | }, 25 | ``` 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.7/component_usage/Text.mdx: -------------------------------------------------------------------------------- 1 | ```tsx live 2 | Hello World 3 | ``` 4 | 5 | ### Using font-weight on android 6 | 7 | :::note 8 | For Android the font. weights MUST align with the used font. So try out which is the regarding font weight to your used font. 9 | ::: 10 | 11 | ```tsx 12 | 13 | h1Style: { 14 | fontFamily: 'Nunito-SemiBold', 15 | fontWeight: '300', 16 | }, 17 | h2Style: { 18 | fontFamily: 'Nunito-Regular', 19 | fontWeight: '100', 20 | }, 21 | h3Style: { 22 | fontFamily: 'Nunito-Bold', 23 | fontWeight: '500', 24 | }, 25 | ``` 26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/Chip.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: chip 3 | 4 | title: Chip 5 | 6 | slug: /chip 7 | --- 8 | 9 | import Usage from './usage/Chip/Chip.md' 10 | 11 | Chips are compact elements that represent an input, attribute, or action. 12 | 13 | They may display text, icons, or both. 14 | 15 | ## Usage 16 | 17 | 18 | 19 | --- 20 | 21 | ## Props 22 | 23 | ### Chip 24 | 25 | - [type](#type) 26 | 27 | ## Reference 28 | 29 | ### Chip 30 | 31 | #### type 32 | 33 | Type of button. 34 | 35 | | Type | Default | 36 | | -------------------- | ------- | 37 | | "solid" or "outline" | None | 38 | 39 | --- 40 | -------------------------------------------------------------------------------- /website/static/img/logo-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Rating/Rating.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | 5 | 6 | 7 | ### Read-only mode 8 | 9 | ```js 10 | const { rating } = this.props; 11 | 12 | ; 13 | ``` 14 | 15 | ### Fractions 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | ![Fractions demo gif](https://cloud.githubusercontent.com/assets/241553/26780040/e8cd1a2c-49f8-11e7-8859-6dd9b4e0a779.gif) 22 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/Dialog.Actions.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: dialog_actions 3 | title: Dialog.Actions 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Define Dialog Actions using this component. 11 | 12 | ## Props 13 | 14 |
15 | 16 | | Name | Type | Default | Description | 17 | | ---------- | --------- | ------- | --------------------------------------------------- | 18 | | `children` | ReactNode | | Add Enclosed components as an action to the dialog. | 19 | 20 |
21 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/Dialog.Actions.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: dialog_actions 3 | title: Dialog.Actions 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Define Dialog Actions using this component. 11 | 12 | ## Props 13 | 14 |
15 | 16 | | Name | Type | Default | Description | 17 | | ---------- | --------- | ------- | --------------------------------------------------- | 18 | | `children` | ReactNode | | Add Enclosed components as an action to the dialog. | 19 | 20 |
21 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/ListItem.Content.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_content 3 | title: ListItem.Content 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding content to the ListItem. 11 | This, Receives all [View](https://reactnative.dev/docs/view#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](text#props) props. 17 | ::: 18 | 19 |
20 | 21 | | Name | Type | Default | Description | 22 | | ------- | ------- | ------- | ----------- | 23 | | `right` | boolean | | | 24 | 25 |
26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/ListItem.Content.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_content 3 | title: ListItem.Content 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding content to the ListItem. 11 | This, Receives all [View](https://reactnative.dev/docs/view#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](text#props) props. 17 | ::: 18 | 19 |
20 | 21 | | Name | Type | Default | Description | 22 | | ------- | ------- | ------- | ----------- | 23 | | `right` | boolean | | | 24 | 25 |
26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/ListItem.Subtitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_subtitle 3 | title: ListItem.Subtitle 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding SubTitle to the ListItem. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](https://reactnative.dev/docs/text#props) props. 17 | ::: 18 | 19 |
20 | 21 | | Name | Type | Default | Description | 22 | | ------- | ------- | ------- | ----------- | 23 | | `right` | boolean | | | 24 | 25 |
26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/ListItem.Subtitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_subtitle 3 | title: ListItem.Subtitle 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding SubTitle to the ListItem. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](https://reactnative.dev/docs/text#props) props. 17 | ::: 18 | 19 |
20 | 21 | | Name | Type | Default | Description | 22 | | ------- | ------- | ------- | ----------- | 23 | | `right` | boolean | | | 24 | 25 |
26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-3.4.2/divider.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: divider 3 | title: Divider 4 | --- 5 | 6 | import Props from './props/divider.md' 7 | 8 | Dividers are visual separators of content. Use Divider when you want to make a 9 | distinction between sections of content. 10 | 11 | ## Usage 12 | 13 | ```js 14 | import { Divider } from 'react-native-elements'; 15 | 16 | ; 17 | 18 | ; 19 | 20 | ; 21 | 22 | ; 27 | ``` 28 | 29 | --- 30 | 31 | 32 | 33 | --- 34 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Tooltip/Tooltip.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | 5 | 6 | 7 | --- 8 | 9 | > **Web-platform specific note**: 10 | > 11 | > You **must** pass a valid React Native [`Modal`](https://reactnative.dev/docs/modal) component implementation 12 | > into [`ModalComponent`](#modalcomponent) prop because `Modal` component is not implemented yet in `react-native-web` 13 | 14 | ```js 15 | ... 16 | import Modal from 'modal-react-native-web'; 17 | 18 | ... 19 | 20 | 21 | ... 22 | ``` 23 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/ListItem.Title.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_title 3 | title: ListItem.Title 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding Title to the ListItem. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](https://reactnative.dev/docs/text#props) props. 17 | ::: 18 | 19 |
20 | 21 | | Name | Type | Default | Description | 22 | | ------- | ------- | ------- | ---------------- | 23 | | `right` | boolean | | Add right title. | 24 | 25 |
26 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/ListItem.Title.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_title 3 | title: ListItem.Title 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | This allows adding Title to the ListItem. 11 | This, Receives all [Text](text#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [Text](https://reactnative.dev/docs/text#props) props. 17 | ::: 18 | 19 |
20 | 21 | | Name | Type | Default | Description | 22 | | ------- | ------- | ------- | ---------------- | 23 | | `right` | boolean | | Add right title. | 24 | 25 |
26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/SpeedDial.Action.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: speeddial_action 3 | title: SpeedDial.Action 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | 10 | Adds Action to the SpeedDial. 11 | This, Receive all [Fab](fab#props) props. 12 | 13 | ## Props 14 | 15 | :::note 16 | Includes all [FAB](fab#props) props. 17 | ::: 18 | 19 |
20 | 21 | | Name | Type | Default | Description | 22 | | ---------------- | ------- | ------- | ---------------------- | 23 | | `labelPressable` | boolean | | onPress on Label Press | 24 | 25 |
26 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/src/theme/ReactLiveScope/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React from 'react'; 9 | import * as RNE from 'react-native-elements'; 10 | import * as RNEUI from '@rneui/base'; 11 | import * as RNEUI_Layout from '@rneui/layout'; 12 | import LinearGradient from 'react-native-linear-gradient'; 13 | 14 | // Add react-live imports you need here 15 | const ReactLiveScope = { 16 | React, 17 | LinearGradient, 18 | ...RNE, 19 | ...RNEUI, 20 | ...RNEUI_Layout, 21 | ...React, 22 | }; 23 | 24 | export default ReactLiveScope; 25 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/Dialog.Actions.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: dialog_actions 3 | title: Dialog.Actions 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | Define Dialog Actions using this component. 10 | 11 | ## Import 12 | 13 | ```tsx 14 | import { Dialog } from "@rneui/themed"; 15 | ``` 16 | 17 | ## Props 18 | 19 |
20 | 21 | | Name | Type | Default | Description | 22 | | ---------- | --------- | ------- | --------------------------------------------------- | 23 | | `children` | ReactNode | | Add Enclosed components as an action to the dialog. | 24 | 25 |
26 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Dialog/Dialog.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 5 | 6 | 7 | 8 | > **Web-platform specific note**: 9 | > 10 | > You **must** pass a valid React Native [`Modal`](https://reactnative.dev/docs/modal) component implementation 11 | > into [`ModalComponent`](#modalcomponent) prop because `Modal` component is not implemented yet in `react-native-web` 12 | 13 | ```jsx 14 | ... 15 | import Modal from 'modal-react-native-web'; 16 | 17 | ... 18 | 19 | 20 | ... 21 | ``` 22 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/ListItem.Content.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_content 3 | title: ListItem.Content 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | This allows adding content to the ListItem. 10 | This, Receives all [View](https://reactnative.dev/docs/view#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { ListItem } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Text](text#props) props. 22 | ::: 23 | 24 |
25 | 26 | | Name | Type | Default | Description | 27 | | ------- | ------- | ------- | ----------- | 28 | | `right` | boolean | | | 29 | 30 |
31 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-beta.0/main/usage/Overlay/Overlay.md: -------------------------------------------------------------------------------- 1 | import Snack from './snack/index.md' 2 | 3 | 4 | 5 | 7 | 8 | --- 9 | 10 | > **Web-platform specific note**: 11 | > 12 | > You **must** pass a valid React Native [`Modal`](https://reactnative.dev/docs/modal) component implementation 13 | > into [`ModalComponent`](#modalcomponent) prop because `Modal` component is not implemented yet in `react-native-web` 14 | 15 | ```jsx 16 | ... 17 | import Modal from 'modal-react-native-web'; 18 | 19 | ... 20 | 21 | 22 | ... 23 | ``` 24 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/ListItem.Subtitle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_subtitle 3 | title: ListItem.Subtitle 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | This allows adding SubTitle to the ListItem. 10 | This, Receives all [Text](text#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { ListItem } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Text](https://reactnative.dev/docs/text#props) props. 22 | ::: 23 | 24 |
25 | 26 | | Name | Type | Default | Description | 27 | | ------- | ------- | ------- | ----------- | 28 | | `right` | boolean | | | 29 | 30 |
31 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/ListItem.Title.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: listitem_title 3 | title: ListItem.Title 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | This allows adding Title to the ListItem. 10 | This, Receives all [Text](text#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { ListItem } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Text](https://reactnative.dev/docs/text#props) props. 22 | ::: 23 | 24 |
25 | 26 | | Name | Type | Default | Description | 27 | | ------- | ------- | ------- | ---------------- | 28 | | `right` | boolean | | Add right title. | 29 | 30 |
31 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/versioned_docs/version-3.4.2/fab.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: fab 3 | title: Floating Action Button 4 | --- 5 | 6 | import Props from './props/fab.md' 7 | 8 | A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. 9 | 10 |
11 |
12 | Floating Action Button 13 |
14 |
15 | 16 | ## Usage 17 | 18 | ```js 19 | import { FAB } from 'react-native-elements'; 20 | ``` 21 | 22 | ```js 23 | 24 | ``` 25 | 26 | --- 27 | 28 | ## Props 29 | 30 | 31 | 32 | --- 33 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.3/components/SpeedDial.Action.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: speeddial_action 3 | title: SpeedDial.Action 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | 9 | Adds Action to the SpeedDial. 10 | This, Receive all [Fab](fab#props) props. 11 | 12 | ## Import 13 | 14 | ```tsx 15 | import { SpeedDial } from "@rneui/themed"; 16 | ``` 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [FAB](fab#props) props. 22 | ::: 23 | 24 |
25 | 26 | | Name | Type | Default | Description | 27 | | ---------------- | ------- | ------- | ---------------------- | 28 | | `labelPressable` | boolean | | onPress on Label Press | 29 | 30 |
31 | -------------------------------------------------------------------------------- /website/versioned_docs/version-3.4.2/pricing.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: pricing 3 | title: Pricing 4 | --- 5 | 6 | import useBaseUrl from '@docusaurus/useBaseUrl'; 7 | import Props from './props/pricing.md' 8 | 9 | Pricing is a convenience component used to display features and pricing tables 10 | in a beautiful and engaging way. 11 | 12 | Pricing Component 13 | 14 | ## Usage 15 | 16 | ```js 17 | import { PricingCard } from 'react-native-elements'; 18 | 19 | ; 26 | ``` 27 | 28 | --- 29 | 30 | 31 | 32 | --- 33 | -------------------------------------------------------------------------------- /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/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/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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/docs/component_usage/Switch.mdx: -------------------------------------------------------------------------------- 1 | ```SnackPlayer name=RNE Switch 2 | import React, { useState } from 'react'; 3 | import { Switch } from '@rneui/themed'; 4 | import { View, Text, StyleSheet } from 'react-native'; 5 | 6 | type SwitchComponentProps = {}; 7 | 8 | const SwitchComponent: React.FunctionComponent = () => { 9 | const [checked, setChecked] = useState(false); 10 | 11 | const toggleSwitch = () => { 12 | setChecked(!checked); 13 | }; 14 | 15 | return ( 16 | 17 | setChecked(value)} 20 | /> 21 | 22 | ); 23 | }; 24 | 25 | const styles = StyleSheet.create({ 26 | view: { 27 | margin: 10, 28 | }, 29 | }); 30 | 31 | export default SwitchComponent; 32 | ``` 33 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.1/components/Chip.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: chip 3 | title: Chip 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | import Usage from "../component_usage/Chip.mdx"; 10 | 11 | Chips are compact elements that represent an input, attribute, or action. 12 | They may display text, icons, or both. 13 | 14 | ## Usage 15 | 16 | 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Button](button#props) props. 22 | ::: 23 | 24 |
25 | 26 | | Name | Type | Default | Description | 27 | | ------ | -------------------- | ------- | --------------- | 28 | | `type` | `solid` or `outline` | | Type of button. | 29 | 30 |
31 | -------------------------------------------------------------------------------- /website/versioned_docs/version-4.0.0-rc.2/components/Chip.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: chip 3 | title: Chip 4 | --- 5 | 6 | import Tabs from "@theme/Tabs"; 7 | import TabItem from "@theme/TabItem"; 8 | import {} from "react-native-elements"; 9 | import Usage from "../component_usage/Chip.mdx"; 10 | 11 | Chips are compact elements that represent an input, attribute, or action. 12 | They may display text, icons, or both. 13 | 14 | ## Usage 15 | 16 | 17 | 18 | ## Props 19 | 20 | :::note 21 | Includes all [Button](button#props) props. 22 | ::: 23 | 24 |
25 | 26 | | Name | Type | Default | Description | 27 | | ------ | -------------------- | ------- | --------------- | 28 | | `type` | `solid` or `outline` | | Type of button. | 29 | 30 |
31 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/docs/component_usage/ListItem.Swipeable.mdx: -------------------------------------------------------------------------------- 1 | 2 | 3 | ```js 4 | ( 6 |