Cross-Platform React Native UI Toolkit

React Native Elements

Last update: Dec 31, 2022

Comments

HOC to give any component a badge
This HOC can give any component a badge. It works with minimal syntax:

withBadge(<SomeComponent />)(1)

while still allowing the user to customize anything he / she wants. The argument of the first functoin is . the component that should get the badge. The 1 at the end is the value within the badge. If you look at the code you'll see the rest of the API (like x - y offset of badge, programatically hide/show badge etc.).

By default it hides the badge automatically for empty string / number = 0.
✨ Enhancement
opened by janhesters 55
ListItem's avatar uri not working

Description

Upgraded from RNE 0.12.2 to RNE 0.13

Expected

Expected the images used as avatar within the listItem elements to remain the same

Actually

The images used as avatar within the listItem elements have sizing issues which destroys entire listItem's styling Visual aids over here: https://github.com/react-native-training/react-native-elements/commit/ae9db39f745955ee09e8581fdf135bd831e9b7c8#commitcomment-22699038

Reproduction Steps

Style and set width / height of the avatar element in a listItem , using RNE 0.12.2 Upgrade to RNE 0.13 and see the changes.

Issue triggered by

Commit #7bc2e6f

Solution

Since Avatar component has containerStyle, avatarStyle, overlayContainerStyle maybe it is best to expose all 3 within listItem.
:bug: Bug

opened by webraptor 38
Button compile failure on Web with react-native-web
Explain what you did While following https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html, `import { Button } from 'react-native-elements' triggers screenshot below.

Native (Android) would render Button fine.

Expected behaviour Button renders on Web, as it does on native platforms.

Describe the bug

To Reproduce Follow https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html

In src/App.js:

import { Button } from 'react-native-elements

Run yarn web

Your Environment (please complete the following information):

| software | version | | --------------------- | ------- | | react-native-elements | 1.1.0 | | react-native | 0.55.4 | | npm or yarn | yarn: 1.13.0 |

Related: #882
🤔 Thoughts?
opened by fungilation 36

How to avoid flickering when Avatar re-render again and again.

Explain what you did

Expected behavior

not show to user that, avatar re-render again and again.

Describe the bug

To Reproduce

               <Avatar
                      rounded
                      size={height/6}
                      defaultSource ={DummyUser}
                      source ={profileimageTutor ? {uri:profileimage} : DummyUser} 
                      defaultSource ={profileimageTutor ? {uri:profileimage} : DummyUser} 
                      icon={{name: 'user', type:'antdesign'}}
                      containerStyle={{borderWidth:3, borderColor:Colors.Grey89, elevation:2}}
                      resizeMethod="scale"
                      resizeMode="cover"
                  />

Screenshots

Your Environment (please complete the following information):

| software | version | yarn install v1.16.0 | --------------------- | ------- | "react-native-elements": "^1.2.7", "react": "16.9.0", "react-native": "0.59.9",

:bug: Bug

opened by Biplovkumar 34

warning: failed prop type: invalid prop 'ImageComponent' of type 'object' supplied to 'Avatar', expected 'function

When I add leftAvatar a warning shows in android emulator

warning: failed prop type: invalid prop 'ImageComponent' of type 'object' supplied to 'Avatar', expected 'function

react-native-elements version : "^1.0.0-beta6" My code:

<FlatList data={this.state.data} renderItem={(data) => (
       <View>
           <ListItem
                        roundAvatar
                        rightIcon={{ name: 'chevron-right',type: 'MaterialIcon'}}
                        title={'Tuhin Hossain'}
                        subtitle={'Software Engineer'}
                        leftAvatar={{ 
                            title: 'Tuhin Hossain',
                            source: { uri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg"} }}
           />
                    <Divider style={{ backgroundColor: 'slategray' }} />
         </View>

)} keyExtractor={(value, index) => value.id}/>

:bug: Bug

opened by tuhintechvill 32

Docs: Arrange props alphabetically
The documentation of all components lists the props as well as their usage. It would be great if we arrange the props list alphabetically to make it easier to find the required props.

Just like the expo docs and others.

Proposed Fix The docs are written using markdown and can be found here.

You can make multiple PRs (one PR for one component ) as it makes it easy to review. Considering the surface area of this issue.

As multiple peoples will be working on this issue, make sure to comment down the name of the component you will work on.

Done

[x] Avatar

[x] Badge

[x] BottomSheet

[x] Button

[ ] ButtonGroup

[x] Card

[x] Checkbox

[x] Header

[x] Icon

[x] Image

[ ] Input

[x] ListItem

[x] Overlay

[x] Pricing

[x] Searchbar

[x] Slider

[ ] Text

[x] Tile

[x] Tooltip

[x] Modal

[x] Rating

:book: Docs Hacktoberfest Good First Issue
opened by pranshuchittora 30
support for react-native-web

The changes are detailed in ./docs/rnw-progress.md. There are a few open issues noted as well.

There are lots of tests - should have every prop & method on every component covered. Most components are snapshot 3 times: shallow, mount, and render. The mounts and renders dive into each component's html. Those snapshots seem stable (ugly, but don't change). If they become flaky we can remove those.

The tests' source is parsed via a package I published: enzyme-styleguidist-sample-parser. I still need to document that. It's something I took a detour to build because I expect to use it for all my future react work. The tests are all pretty basic, but it's possible to add any of the usual jest stuff, too. Give the styleguide a try - it's great for composing components.

testing/styleguide instructions are in ./web_support.md

The theme and styling example is coming next. It's not a dependency to, nor is it dependent on this PR.
✨ Enhancement 💡New Component

opened by MillerGregor 30
feat(SearchBar): Show Cancel button when input is not empty

PR created to solve issue #1303 I've added possibility to pass new prop visibleCancel to SearchBar component (only for iOS) to allow user choose if they want to see Cancel button all the time when input isn't empty (and even when it's not focused). Of course without this prop (default -> false) the SearchBar still works like before :)
✨ Enhancement 📞 Needs Response from Author

opened by MHase 28

Unable to resolve module @expo/react-native-vector-icons/Materiallcons

Description

Explain what you did

I ejected a CRNA project that had react-native-elements installed (this project), npm installed and linked react native vector icons and then ran it with react-native run-ios.

What you expected to happen

it should launch nicely in ios simulator

What actually happens

error as follows:

error: bundling failed: "Unable to resolve module `@expo/vector-icons/MaterialIcons` from `/Users/swyx/Desktop/webdev/fullstacksr/podcastRN/crossbones/node_modules/react-native-elements/src/buttons/Button.js`: Module does not exist in the module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."

Also please include the version of react-native-elements that you are using.

    "axios": "^0.16.2",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.47.0",
    "react-native-elements": "^0.17.0",
    "react-native-vector-icons": "^4.4.0",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-persist": "^4.10.0",
    "redux-thunk": "^2.2.0"

Reproduction Steps and Sample Code

I can reproduce on my machine

Extra notes

I know this looks similar to #412 but this one has "@expo" in front of it.. did you change the signature and accidentally leave in the reference to expo recently? I cant figure out why else this would be happening.. please help.

❔Question :book: Docs

opened by sw-yx 27

Error while updating property 'selectionColor' of a view managed by: AndroidTextInput

When using this component (only in Android)

<SearchBar
          lightTheme
          placeholder='Search...' 
          containerStyle={{backgroundColor: Colors.tintColor, borderTopWidth: 0, borderBottomWidth: 1}}
          inputStyle={{backgroundColor: 'white'}}
        />

Version: "react-native-elements": "^0.11.1"

Complete dependecies list:

  "dependencies": {
    "@expo/react-native-navigator": "^0.4.1",
    "@expo/react-native-read-more-text": "^1.1.0",
    "@expo/vector-icons": "~4.0.0",
    "expo": "^16.0.0",
    "hoist-non-react-statics": "^1.2.0",
    "moment": "^2.18.1",
    "react": "16.0.0-alpha.6",
    "react-addons-shallow-compare": "^15.5.2",
    "react-native": "https://github.com/exponent/react-native/archive/sdk-16.0.0.tar.gz",
    "react-native-app-intro": "~1.1.5",
    "react-native-button": "~1.8.2",
    "react-native-communications": "^2.2.1",
    "react-native-dropdownalert": "^2.7.1",
    "react-native-elements": "^0.11.1",
    "react-native-grid-component": "^1.0.6",
    "react-native-i18n": "^1.0.0",
    "react-native-textinput-effects": "^0.3.0",
    "react-navigation": "^1.0.0-beta.7",
    "react-navigation-addons": "git://github.com/satya164/react-navigation-addons.git#master"
  }

This issue happened when upgrading to expo 16

:bug: Bug

opened by eliasturbay 27

Avatar component to render multiple image sources

Summary

Source prop can be either an image source to render a single image, or an array of image sources to render up to 4 images.

Use case

Group Chat

Example

// Avatar Example
<Avatar
  rounded
  size='large'
  source={{ uri: '...' }} OR source={ [{ uri: '...' }, { uri: '...' }, { uri: '...' }] }
  ...
/>

// ListItem Example
<ListItem
  hideChevron
  roundAvatar
  avatar={{ uri: '...' }} OR avatar={ [{ uri: '...' }, { uri: '...' }, { uri: '...' }] }
  ...
/>

✨ Enhancement 🤔 Thoughts?

opened by dev-dano 26

Tooltip duplicates tooltip trigger while open
Is there an existing issue for this?

[X] I have searched the existing issues

Explain what you did

Try the expo example at https://reactnativeelements.com/docs/components/tooltip

Expected behavior

Tooltips open without duplicated trigger components (Text or Icon), stay attached to the opening location and the tooltip's content is fully visible.

Describe the bug

Here you can see, that the content inside the tooltip is cut off:

In the example app you can see the duplication: Closed: Open:

Steps To Reproduce

1. Visit the example page https://reactnativeelements.com/docs/components/tooltip

Screenshots

No response

Your Environment

`npx @rneui/envinfo`

``` Output from `npx @rneui/envinfo` goes here. ```

Needs Triage
opened by mbpictures 0
Link migration guides from navigation where relevant

I noticed that migration guidelines for 2->3 exist as a post, but I only stumbled on that as a "related post" from the 3->4 migration guide.

I've got an older app to maintain and I'm looking forward to migration from 1x->3, and making any relevant migration guides easy to find seems like an easy win.

Thanks for all your work on this repo and your consideration of this request.

opened by evangrim 0
WIP: tooltip
Motivation

Fixes # (issue)

Type of change

[ ] Bug fix (non-breaking change which fixes an issue)

[ ] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

[ ] Jest Unit Test

[ ] Checked with example app

Checklist

[ ] My code follows the style guidelines of this project

[ ] I have performed a self-review of my own code

[ ] I have commented my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation using yarn docs-build-api

[ ] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules

Additional context
opened by arpitBhalla 0
[AirbnbRating] Use 'react-native-star-rating-widget' instead 'react-native-ratings'

https://reactnativeelements.com/docs/components/airbnbrating - this component uses react-native-ratings, but this repo has not been updated for more than a year and hase some open issues.

Please consider the react-native-star-rating-widget One of the advantages of this component is the ability to set half a star, not an integer value.

opened by bulkinav 0

Releases(v3.4.3)

v3.4.3(Dec 23, 2022)
fix react-native-safe-area-context peer-dependency version

Source code(tar.gz)
Source code(zip)
v4.0.0-rc.7(Oct 28, 2022)
What's Changed

:rocket: New Feature

feat: add theme to ComponentFunctionProps by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3645

feat(SeachBar): add onKeyboardHide for android by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3657

feat: update Tab component by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3658

:bug: Bug Fix

fix(TabView): iOS TabView issue by @abhinav-official in https://github.com/react-native-elements/react-native-elements/pull/3635

fix(useTheme): undefined components error by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3643

fix: property 'children' does not exist in React 18 by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3663

fix: rename white theme color to background by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3664

:memo: Documentation

docs: customisation page snippet by @rvenky125 in https://github.com/react-native-elements/react-native-elements/pull/3614

docs: nextjs typo by @akinfelami in https://github.com/react-native-elements/react-native-elements/pull/3613

docs(Avatar): remove activeOpacity prop by @dakshbhardwaj in https://github.com/react-native-elements/react-native-elements/pull/3618

website: footer broken links by @OlivierJM in https://github.com/react-native-elements/react-native-elements/pull/3622

website: fix broken link by @jckmrrssy in https://github.com/react-native-elements/react-native-elements/pull/3639

docs: add themeKey to component docs by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3641

docs: update extending docs by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3642

docs(Tooltip): add controlled component to expo demo by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3644

docs: homepage sponsor url by @haruelrovix in https://github.com/react-native-elements/react-native-elements/pull/3652

website: add missing dependencies by @MaximFedarau in https://github.com/react-native-elements/react-native-elements/pull/3653

chore: upgrade docusaurus to latest by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3659

docs(Button): fix typos by @MaximFedarau in https://github.com/react-native-elements/react-native-elements/pull/3661

docs: add usage Live example by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3669

Other Changes

chore: bump v4.0.0-rc.6 by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3606

ci: fix docs build by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3670

New Contributors

@rvenky125 made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3614

@akinfelami made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3613

@abhinav-official made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3635

@dakshbhardwaj made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3618

@OlivierJM made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3622

@jckmrrssy made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3639

@MaximFedarau made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3653

Full Changelog: https://github.com/react-native-elements/react-native-elements/compare/v4.0.0-rc.6...v4.0.0-rc.7
Source code(tar.gz)
Source code(zip)
v4.0.0-rc.6(Jul 31, 2022)
What's Changed

:boom: Breaking Change

feat(ThemeProvider)!: restructure default component theme by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3582

import { createTheme } from '@rneui/themed'; const myTheme = createTheme({ + components: { Button:{ titleStyle: { color: 'red' }, }, + }, });

:bug: Bug Fix

fix: typo when exporting colors types by @rafae2k in https://github.com/react-native-elements/react-native-elements/pull/3580

fix: add children as prop by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3583

fix(Switch): Android throws an error when setting it to false by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3601

fix: dist output target by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3603

:memo: Documentation

Updated Skeleton.md file by @I-am-abdulazeez in https://github.com/react-native-elements/react-native-elements/pull/3570

docs: rename colors to lightColors by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3584

docs: usage example for Tab Items by @srj101 in https://github.com/react-native-elements/react-native-elements/pull/3576

docs: BottomSheet playground by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3602

Other Changes

chore: bump v4.0.0-rc.5 by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3567

New Contributors

@I-am-abdulazeez made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3570

@rafae2k made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3580

@srj101 made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3576

Full Changelog: https://github.com/react-native-elements/react-native-elements/compare/v4.0.0-rc.5...v4.0.0-rc.6
Source code(tar.gz)
Source code(zip)
v4.0.0-rc.5(Jun 25, 2022)
What's Changed

:bug: Bug Fix

fix: fix peerDependency compatibility by @navarroaxel in https://github.com/react-native-elements/react-native-elements/pull/3545

fix(Tooltip): add default value in measure component by @Duell10111 in https://github.com/react-native-elements/react-native-elements/pull/3550

fix(Button): theme spacing xs error by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3563

fix(Tab): indicator with initial index by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3564

:memo: Documentation

docs: update Tootlip usage snippet by @TUZI2018QH in https://github.com/react-native-elements/react-native-elements/pull/3560

docs: corrected the description for the h4Style by @Louxsdon in https://github.com/react-native-elements/react-native-elements/pull/3551

Other Changes

ci: add PR build preview action by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3565

New Contributors

@Duell10111 made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3550

@TUZI2018QH made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3560

@Louxsdon made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3551

Full Changelog: https://github.com/react-native-elements/react-native-elements/compare/v4.0.0-rc.4...v4.0.0-rc.5
Source code(tar.gz)
Source code(zip)
v4.0.0-rc.4(May 21, 2022)
What's Changed

:bug: Bug Fix

fix(ListItem): Accordion children areas were not hidden by @monk-lee in https://github.com/react-native-elements/react-native-elements/pull/3517

fix(Dialog): Action button on web by @kedar09 in https://github.com/react-native-elements/react-native-elements/pull/3514

fix(withTheme): add spacing to non-ThemeProvider components by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3525

fix(makeStyles): add Theme in makeStyle interface by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3526

fix(ListItem): left & right content width onRelease in Swipeable by @louislatreille in https://github.com/react-native-elements/react-native-elements/pull/3534

fix(Tab): inputRange using Array.from by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3538

fix(ButtonGroup): add and improve types and add tests by @grgr-dkrk & @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3220

:memo: Documentation

docs: ThemeProvider code snippet by @piyush97 in https://github.com/react-native-elements/react-native-elements/pull/3536

docs: add tsdoc for Input & SearchBar by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3541

Other Changes

website: add new appId & apiKey by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3522

website: support icons by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3524

chore: update twitter url by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3527

example: add missing props by @Ming1996 in https://github.com/react-native-elements/react-native-elements/pull/3532

website: update webpack config by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3537

ci: website frozen lockfile by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3539

website: page title SEO by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3540

chore: bump v4.0.0-rc.4 by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3542

New Contributors

@Ming1996 made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3532

@louislatreille made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3534

@piyush97 made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3536

@grgr-dkrk made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3220

Full Changelog: https://github.com/react-native-elements/react-native-elements/compare/v4.0.0-rc.3...v4.0.0-rc.4
Source code(tar.gz)
Source code(zip)
v4.0.0-rc.3(May 9, 2022)
What's Changed

:rocket: New Feature

website: add playground by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3502

feat(Tooltip): add animationType prop by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3487

feat(base): add makeStyles by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3510

feat(theming): add spacing to theme by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3495

feat(Button): add title as children & new size, color, radius prop by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3494

:bug: Bug Fix

build: change build target by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3493

fix(ListItem): custom Icon for Accordion by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3504

fix(Tab): indicator on first render by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3505

fix(Icon): raised ios shadow issue by @kedar09 in https://github.com/react-native-elements/react-native-elements/pull/3491

fix(ButtonGroup): render correctly in vertical mode by @kedar09 in https://github.com/react-native-elements/react-native-elements/pull/3432

:memo: Documentation

docs: update extending theme by @lucksp in https://github.com/react-native-elements/react-native-elements/pull/3482

docs: update extend theme docs by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3497

docs: add fontWeight for Text on android by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3506

Other Changes

chore: remove circular-slider pkg by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3483

example: add webpack config by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3492

website: improve footer & sidebar styling by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3498

website: add Live Preview by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3500

chore: website version label edge by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3508

website: add SEO img & tags by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3509

website: update v4 blog by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3511

chore: bump v4.0.0-rc.3 by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3512

New Contributors

@lucksp made their first contribution in https://github.com/react-native-elements/react-native-elements/pull/3482

Full Changelog: https://github.com/react-native-elements/react-native-elements/compare/v4.0.0-rc.2...v4.0.0-rc.3
Source code(tar.gz)
Source code(zip)
v4.0.0-rc.2(Apr 29, 2022)
What's Changed

:rocket: New Feature

feat(CheckBox): add disabled, disabledTitleStyle, disabledStyle props by @kedar09 in https://github.com/react-native-elements/react-native-elements/pull/3430

:bug: Bug Fix

fix: change InputProps shake props optional. by @monk-lee in https://github.com/react-native-elements/react-native-elements/pull/3426

fix(SpeedDial): add themed FAB by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3436

fix(Chip): border radius on tap by @kedar09 in https://github.com/react-native-elements/react-native-elements/pull/3442

fix(Tooltip): removeEventListener deprecated warning by @monk-lee in https://github.com/react-native-elements/react-native-elements/pull/3440

fix(SearchBar): typescript errors by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3437

fix(Theming): extend default theme by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3450

fix(ListItem): isExpanded set default false for Accordion by @kedar09 in https://github.com/react-native-elements/react-native-elements/pull/3475

fix(Overlay): custom backgroundColor override by @kedar09 in https://github.com/react-native-elements/react-native-elements/pull/3471

fix(SpeedDial): Left placement for Actions by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3479

fix(ListItem): Swipeable panresponders by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3449

fix(SpeedDial.Action): wrap with pressable by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3480

Other Changes

chore: update readme pkg name by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3435

chore: fix readme & website by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3448

website: remove git.io link from blog by @renbaoshuo in https://github.com/react-native-elements/react-native-elements/pull/3474

fix(ThemeProvider): add children prop explicitly by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3477

fix(Skeleton): remove type from import by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3476

chore: update example dependency by @arpitBhalla in https://github.com/react-native-elements/react-native-elements/pull/3478

Full Changelog: https://github.com/react-native-elements/react-native-elements/compare/4.0.0-rc.1...v4.0.0-rc.2
Source code(tar.gz)
Source code(zip)
4.0.0-rc.1(Mar 28, 2022)
4.0.0-rc.1 (2022-03-28)

To use this version

yarn add @rneui/base @rneui/themed

npm install @rneui/base @rneui/themed

:boom: Breaking Change

themed

#3324 feat(ThemeProvider)!: update withTheme and ThemeProvider (@arpitBhalla) Replace colors with lightColors in createTheme

:bug: Bug Fix

base, themed

#3418 fix(theme): remove Partial in Colors (@arpitBhalla)

base

#3397 fix(Tab, TabView): conditional rendering (@WVAviator)

#3380 fix(TabView): swipe issue (@arpitBhalla)

:memo: Documentation

#3416 docs: fix "colors" typo (@shadowfish07)

#3411 docs: Include swipeable resetCallback example (@jorgegvallejo)

#3408 docs: add styled-components troubleshooting (@gluons)

Committers: 6

Alexander Durham @WVAviator

Arpit Bhalla @arpitBhalla

Jeremy Hamilton @flyingcircle

Jorge G Vallejo @jorgegvallejo

Saran Tanpituckpong ✔️ @gluons

@shadowfish07

Source code(tar.gz)
Source code(zip)
v4.0.0-rc.0(Mar 16, 2022)
2022-03-16

In the same directory as your package.json file, create or edit an .npmrc file to include a line specifying GitHub Packages URL.

@react-native-elements:registry=https://npm.pkg.github.com

Note: Please refer Installation Guide and Migration Guide

:boom: Breaking Change

@react-native-elements/themed

#3302 feat(ThemeProvider): update API (@arpitBhalla)

@react-native-elements/base

#3272 chore: migrate to monorepo (@arpitBhalla)

:rocket: New Feature

@react-native-elements/base

#3372 fix(TabView): disableSwipe & disableTransition prop (@Sinharitik589)

#3180 feat(ListItem): add onSwipeBegin and onSwipeEnd handlers & resetCallback (@arpitBhalla)

#3336 feat(Tab): add horizontally scrollable Tab.Items (@entrymaster)

#3074 feat(BottomSheet): add onBackdropPress handler (@kedar09)

@react-native-elements/base, @react-native-elements/themed

#3374 chore: migrate typealias to interface (@arpitBhalla)

#3357 feat(Skeleton): new component (@arpitBhalla)

:bug: Bug Fix

base

#3352 fix(ListItem): remove Accordion height animation (@arpitBhalla)

#3335 fix(AirbnbRating): add props to parent component (@knmn2000)

#3322 fix(FAB): add small size style (@sumj25)

#3078 fix(themeColors): add support for dark mode (@arpitBhalla)

#3215 #3213 Remove deprecated Keyboard.removeListener (@roffelund)

#3203 fix(Slider): Fix issues with scrub and allowTouchTrack (@NiwotSmitty)

:memo: Documentation

base, circular-slider, themed

#3364 chore: update autodoc (@arpitBhalla)

Other

#3354 docs(Icon): fix broken link (@ws333)

#3313 docs: updated Input.md link for Text props (@JDMathew)

#3310 Fix: Issue #3309 Customization Documentation (@akankshat05)

#3307 Fix: Issue #3197 Update Icon documentation (@akankshat05)

#3298 fix(docs): customisation page documentation (@laurent-lubino-roam)

Committers: 23

Arpit Bhalla (@arpitBhalla)

Ayush Srivastava (@entrymaster)

BIKI DAS (@Biki-das)

Bjørnar Hvidsten (@ws333)

Doug Keen (@dougkeen)

Débora Robles Pérez (@derobpe)

Gerry Smith (@NiwotSmitty)

Gustav Hegart (@roffelund)

Hasan Fehmi Danacı (@hasanfd)

Hitesh (@hitesh-coder)

Justin D Mathew (@JDMathew)

Karan Mannan (@knmn2000)

Khushal Agarwal (@khushal87)

Md. Moniruzzaman (@geniusmonir)

Nick Koutrelakos (@wkoutre)

Oforomeh Oshomo (@hoshomoh)

Oğuz Yıldız (@oguzydz)

Suman kumar (@sumj25)

@MelissaPastoreClair

@Sinharitik589

@akankshat05

@kedar09

@laurent-lubino-roam

Source code(tar.gz)
Source code(zip)
v4.0.0-beta.0(Dec 19, 2021)
Features

Docs completely refactored to autobuild from types! @khushal87

Website redesign @arpitBhalla

Migration to Pressable @arpitBhalla

Fixes

Dialog component refactored #3056

onLeftSwipe and onRightSwipe added to ListItem #3077

scrollViewProps added to BottomSheet #3111

social icons added #3094 #3146

fix onPress in Chip #3129

animation props for LinearProgress #3157

fix socialIconSize #3168

fixed types #3099

Source code(tar.gz)
Source code(zip)
v3.4.2(Jun 9, 2021)

New TabView Component #2983 @arpitBhalla New Dialog Component #2911 @Dhananjayan-PN New ListItem.Accordion Fixes #3001 @arpitBhalla Add new props to Divider #2988 @khushal87 Slider prop fix #3023 @arpitBhalla Header iconStyle prop fix #3032 @khushal87

Typescript fixes #3031 #3025 #3030 #2935 #3007 Other Fixes #3019 #3000 #2975 #2984
Source code(tar.gz)
Source code(zip)
v3.4.1(Apr 25, 2021)

Fixes: Fix the Image bug from 3.4.0: #2993
Source code(tar.gz)
Source code(zip)
v3.4.0(Apr 20, 2021)

Features

LinearProgress new component - #2867 @arpitBhalla Header new prop elevated - #2876 @arpitBhalla Switch new component - #2877 @khushal87 FAB new component - #2885 @arpitBhalla SpeedDial new component - #2896 @arpitBhalla ListItem.Accordion new subcomponent - #2953 @arpitBhalla TabView new component - #2919 @arpitBhalla Chip new component - #2890 @Dhananjayan-PN Theme can now be updated through theme prop - #2891 @hetanthakkar1 Button new prop iconPosition - #2973 @hetanthakkar1

Fixes

Lots of typescript and export fixes thanks to all who contributed! Image new prop childrenContainerStyle - #2933 @maxikgreat

Misc

Slider conversion to func component - #2875 @hetanthakkar1 Automate dist builds - #2943 @pranshuchittora PadView conversion to func component - #2951 @varunhhhrahul
Source code(tar.gz)
Source code(zip)
v3.3.2(Mar 16, 2021)

Fixes: #2831 #2846 - SocialIcon loader with light background - @AnujSharma141 @ankushdutt #2847 - Icon types version fix with vector-icons - @flyingcircle #2826 - Add facebook-messenger and whatsapp t0 SocialIcon @abhishekkumar08 #2856 - onClose runs twice on Tooltip close - @ankushdutt

Types fixes - @arpitBhalla Convert Button to Functional - @blackwolf08
Source code(tar.gz)
Source code(zip)
v3.3.1(Mar 11, 2021)

Fixes

#2803 Export Typescript Props - @hetanthakkar1 #2824 Fix Slider on RN-Web - @hetanthakkar1 #2821 Fix setState after unmountin ToolTip - @namantayal
Source code(tar.gz)
Source code(zip)
v3.3.0(Mar 7, 2021)

Code transitioned to Typescript!

Features: #2790 - new convenience functions: makeStyles and useTheme @MarianAlexandruAlecu #2781 - Typescript transition @flyingcircle @MohammedFaragallah

Bug Fix: #2793 - Image source was broken in Accessory @Brechard
Source code(tar.gz)
Source code(zip)
v3.2.0(Feb 7, 2021)

##Updates #2760 - @sviande remove references to Expo.global in anticipation of Expo 41. #2769 - @walfly move react-native-safe-area-context to be a peer dependency.
Source code(tar.gz)
Source code(zip)
v3.1.0(Dec 30, 2020)

Features: #2732 - dynamically import font files to avoid unnecessary imports. #2727 - update BottomSheet so that it isn't bound by max height. #2723 - fix Colors so that it doesn't throw an error in RN-Windows.

Fixes: #2731 - Typescript fixes
Source code(tar.gz)
Source code(zip)
v3.0.1(Dec 18, 2020)

Fixes:

#2717 - fix when using local file source for Image #2716 - fix Header component alignment for web.
Source code(tar.gz)
Source code(zip)
v3.0.0(Dec 17, 2020)

Includes everything listed in the alpha release plus the following:

Features

#2596 - Updated to require react-native-vector-icons library be >7.0.0 #2697 - Update react-native-status-bar-height to 2.6.0 #2656 - Add containerStyle to BottomSheet #2707 - Header update to use react-native-safe-area-context.

Fixes

#2674 - Colors types fix. #2701 - Checkbox types fix. #2702 - Tile types fix. #2645 - Fix Avatar not showing placeholder if no source #2650 - Fix Theme custom theme overwritten when switching between dark/light mode

Removed

#2699 - Remove deprecated props from ListItem #2700 - Remove deprecated props from Card
Source code(tar.gz)
Source code(zip)
3.0.0-alpha.1(Oct 16, 2020)

Features

#2583 - Dark Colors now available in API #2580 - Image transition and performance improvements #2598 - updated normalize function using react-native-size-matters #2621 - Ratings updated to latest

Fixes

#2561 - fix 'grey' issue on web. #2572 - ThemeProvider rerender on prop change #2565 - Image show placeholder with empty source #2566 - Button fix ripple overflow #2578 - SearchBar fire onCancel when back button pressed #2585 - Slider touch track positioning fixes #2584 - Button fix text alignment for certain fonts #2589 - Card return accidentally removed default styling #2587 - Button improved LinearGradient

Removed

#2590 - deprecated Avatar props
Source code(tar.gz)
Source code(zip)
v2.3.2(Sep 3, 2020)

Fixes: Typescript Changes: #2536 #2550 Icon fix reverseColor: #2545 @imakshar Input fix style overwrite: #2538 @JB1905
Source code(tar.gz)
Source code(zip)
v2.3.1(Aug 29, 2020)

Fixes

sub-component theming: #2529 typescript fixes: #2526 #2527 #2528 Input: placeholderTextColor fix: #2531
Source code(tar.gz)
Source code(zip)
v2.3.0(Aug 27, 2020)

Checkout the upgrade guide

https://react-native-elements.github.io/react-native-elements/blog/2020/08/10/2.3-upgrade-guide

Features

Refactor Avatar, ListItem, and Card to deprecate a number of props and reduce down the components themselves. #2518 and #2494 BottomSheet refactor #2507 and #2518 @saxenanihal95 onPress added to Image #2506 @sudeepto-dutta Dark Mode added to ThemeProvider #2512 closeOnlyOnBackdropPress to ToolTip #2413 @anandhakumarpalanisamy

Bug Fixes

withTheme fix for circular props #2517 Image fix for `styled-coomponents #2520
Source code(tar.gz)
Source code(zip)
v2.2.1(Aug 12, 2020)

Revert fix for #2485
Source code(tar.gz)
Source code(zip)
v2.2.0(Aug 9, 2020)

New Features

Slider new props: thumbProps and allowTouchTrack Icon new prop: iconProps

Fixes:

ToolTip Android height calculation crash #2352 @LucidNinja ListItem fix bug with no content when inside "alignItems: center" View #2485
Source code(tar.gz)
Source code(zip)
v2.1.0(Jul 31, 2020)

New Component

BottomSheet #2325 Much thanks to @saxenanihal95

Updates

Split out Accessory from Avatar into a separate component: #2469 @flyingcircle Docs upgraded to Docusaurus v2: #2455

Bug Fixes

Slider on web: #2465
Source code(tar.gz)
Source code(zip)
v2.0.4(Jun 30, 2020)

Bug Fix: Upgrade to 2.0.3 breaks IconButtonProps import #2423
Source code(tar.gz)
Source code(zip)
v2.0.3(Jun 28, 2020)
Summary

Lots o bug fixes!

New Props

add textProps prop to Badge: #2395 add Image static methods from RN #2407 add buttonContainerStyle to ButtonGroup #2415 add toggleAction to ToolTip #2406

Fixes

Avatar when round is true: #2247 fix Checkbox no title spacing issue #2397 Icon specific web/font warning #2399 fix ios raised Button issue #2400 Add testID to ListItem::PadView #2404 Stop triggering LayoutAnimation without setting state in SearchBar-ios #2390 add regular font to all android fonts #2402 Header component height issue in android with StatusBar #2405 Have IconObject extend TouchableHighlightProps so that HeaderIcon can support props like underlayColor #2185 fix padding in ListItem for web #2416
Source code(tar.gz)
Source code(zip)
v2.0.2(Jun 4, 2020)
Summary

Fixes propTypes warnings from 2.0.1

Fixes

Image source props: #2379 @flyingcircle Style props fixes: #2375 @arabold add themeKey to withTheme types: #2303 @ivyhjk add even to Image onLoad functions: #2314 @danielholmes
Source code(tar.gz)
Source code(zip)