Cross-Platform React Native UI Toolkit

Last update: Jun 20, 2022

react-native-elements

Cross Platform React Native UI Toolkit


React Native Elements UI Toolkit

Get Started

Installation

Follow these instructions to install React Native Elements!

Usage

Start using the components or try it on Snack here.

import { Button } from 'react-native-elements';

<Button />;

Components included:

Universe Components

React Native Web support

As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.

Click here for a full walkthrough using React Native Elements + React Native Web.

Demo App

Checkout the official React Native Elements App on Expo which uses all of the React Native Elements components.

If you are looking to contribute to the React Native Elements App, click here to view the implementation & run the RNE expo app locally.

Documentation

View the full docs here

Contributing

Interested in contributing to this repo? Check out our Contributing Guide and submit a PR for a new feature/bug fix.

A big shoutout to all our contributors! You could be here too!

First Contributors

We encourage everyone to contribute & submit PR's especially first-time contributors. Look for the label Good First Issue on the issues. Click here to see them.

If there is something you's like to see or request a new feature, please submit an issue or a pull request.

Core Contributors

We are currently looking for new core contributors that can help lead this project.

Learn more here

Slack Community

In case you have any other question or would like to come say Hi! to the RNE community, join our Slack team. See you on the other side! 👋 😃

Backers

Become a backer and show your support for React Native Elements.

React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer

Sponsors

Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info.

React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer

GitHub

https://github.com/dabit3/React-Native-Elements
Comments
  • 1. 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.

    Reviewed by janhesters at 2018-11-26 17:54
  • 2. 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.

    Reviewed by webraptor at 2017-06-22 10:14
  • 3. 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 image

    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

    Reviewed by fungilation at 2019-03-01 04:34
  • 4. 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

    1. Screenshot 2020-01-06 at 3 16 06 PM
    2. Screenshot 2020-01-06 at 3 15 43 PM

    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",

    Reviewed by Biplovkumar at 2020-01-06 09:49
  • 5. 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}/>
    
    Reviewed by tuhintechvill at 2018-10-16 15:05
  • 6. 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
    Reviewed by pranshuchittora at 2020-09-24 14:43
  • 7. 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.

    Reviewed by MillerGregor at 2017-12-05 03:56
  • 8. 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 :)

    Reviewed by MHase at 2018-10-30 21:01
  • 9. Unable to resolve module @expo/react-native-vector-icons/Materiallcons

    Description

    1. 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.

    1. What you expected to happen

    it should launch nicely in ios simulator

    1. 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.

    Reviewed by sw-yx at 2017-09-25 08:50
  • 10. 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

    img_3527

    Reviewed by eliasturbay at 2017-04-23 17:26
  • 11. 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: '...' }] }
      ...
    />
    
    Reviewed by dev-dano at 2018-08-23 21:55
  • 12. Typescript error when adding children to Card

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Explain what you did

    I am trying to add children to <Card /> component, but getting type error.

    Expected behavior

    I am able to add children to <Card /> exactly as described in docs.

    Describe the bug

    import { Card } from '@rneui/base';
    
    export const ProductDetail = ({ route }: Props) => {
      return (
        <View>
          <Card>
            <Text>{route.params.product.name}</Text>
          </Card>
        </View>
      );
    };
    

    I am trying to add children to Card component, but getting a Typescript error.

    Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & CardProps & { theme?: Theme | undefined; }'.

    Steps To Reproduce

    Add children to <Card />
    Version: 4.0.0-rc.4
    

    Screenshots

    No response

    Your Environment

    No response

    Reviewed by Lukaskaras at 2022-06-18 15:25
  • 13. activeOpacity does not work on mobile

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Explain what you did

    I tried to use the Avatar component from the@rneui/base lib. Everything seems to work fine, but I would like to get an opacity effect when the user presses their Avatar, and it looks like this attribute does not work.

    Expected behavior

    The Avatar component should be slightly less opaque when pressed on a mobile.

    Describe the bug

    Currently the activeOpacity seems to be ignored when pressed, as no opacity effect appear on the Avatar component. It looks exactly like activeOpacity was never provided to the component, or set to 1.0.

    Steps To Reproduce

    Here is my code, used with React Native (0.66.2) on both iOS (15.5) and Android (API 31):
    
    <Avatar
      title={"Z"}
      source={{uri: props.uri}}
      onPress={() => {}}
      size={30}
      rounded
      containerStyle={{backgroundColor: 'grey'}}
      activeOpacity={0.5}
    />
    

    Screenshots

    No response

    Your Environment

    `npx @rneui/envinfo` Does not have any output. It keeps loading and nothing is printed on the console. But here are some manual info:
    System:
      OS: macOS 12.4
      CPU: Apple M1 Pro
    Binaries:
      Node: 16.5.0
      npm: 8.12.1
    Utilities:
      Git: 2.32.1 (Apple Git-133)
    IDEs:
      VSCode: 1.68.0
      XCode: 13.4.1 (13F100)
    Libs:
      react: 17.0.2
      react-native: 0.66.2
      @rneui/base: 4.0.0-rc.4
      @rneui/themed: 4.0.0-rc.4
      @react-navigation/native: 6.0.6
      And a few others
    Targets:
      iOS (15.5)
      Android (API 31):
    
    Reviewed by ZRunner at 2022-06-10 09:57
  • 14. TabView & Tab Indicator are in reverse direction when device's language is RTL

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Explain what you did

    I've run the example code of Tab components from the docs on a device which its language is RTL.

    Expected behavior

    I should be able to navigate regularly as if the language was LTR.

    Describe the bug

    The first screen is visible as expected, but when clicking on the Tab Items, the animation is moving the the opposite direction, leading the interface to a blank screen. The Tab Indicator is gone out of the screen as well.

    When inserting negative values to "value" property in TabView, I am able to see the other screens, as if the screens are counted backward. So a temporary solution could be to multiply by -1: <TabView value={index * -1} >

    But this solution does not work for the indicator in TabView: // does not work, indicator is still not visible <Tab value={index *-1}>

    Anyway, this solution should be implemented into the framework by checking the language, and not be done by user.

    Steps To Reproduce

    1. Run the example code stated above in an RTL device.
    2. Try to navigate between the screens
    

    Screenshots

    No response

    Your Environment

    `npx @rneui/envinfo`
      ```
        System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 7.05 GB / 15.79 GB
    

    Binaries: Node: 16.13.1 - C:\Program Files\nodejs\node.EXE npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD Managers: pip3: 22.0.4 - C:\Python310\Scripts\pip3.EXE Utilities: Git: 2.27.0. - C:\Program Files\Git\cmd\git.EXE IDEs: Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6514223 VSCode: 1.67.2 - C:\Users\itaiz\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD Languages: Python: 3.10.1 - C:\Python310\python.EXE Browsers: Chrome: 101.0.4951.67 Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.47) Internet Explorer: 11.0.22000.120 ```

    Reviewed by itaizelther at 2022-05-21 15:14
  • 15. Example App Doesn't work on web on windows

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Explain what you did

    Installed the expo CLI

    Fresh cloned the repo and followed the instructions here: https://github.com/react-native-elements/react-native-elements/tree/next/example

    Ran yarn install

    Ran yarn web

    I'm not sure if this issue is because of an incompatible expo version etc.

    Expected behavior

    Application should run as per instructions

    Describe the bug

    The app throws the following exceptions and does not run

    `../packages/themed/src/index.ts 131:7 Module parse failed: Unexpected token (131:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | // Components Props exports

    export type { | AvatarProps, | BadgeProps, ../packages/base/src/Image/index.tsx 14:7 Module parse failed: Unexpected token (14:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Image }; export type { ImageProps }; | ../packages/base/src/Dialog/index.tsx 14:7 Module parse failed: Unexpected token (14:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | }); | export type { | DialogProps, | DialogLoadingProps, ../packages/base/src/helpers/index.tsx 15:7 Module parse failed: Unexpected token (15:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | const isIOS = Platform.OS === 'ios'; | export type StringOmit = K | Omit<string, K>; | | export type RneFunctionComponent = React.FunctionComponent< ../packages/base/src/LinearProgress/index.tsx 16:33 Module parse failed: Unexpected token (16:33) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | */ | const LinearProgress = Object.assign(LinearProgressBase, { INDETERMINATE: 'indeterminate' as LinearProgressProps['variant'], | DETERMINATE: 'determinate' as LinearProgressProps['variant'], | }); ../packages/base/src/Card/index.tsx 23:7 Module parse failed: Unexpected token (23:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Card }; export type { | CardProps, | CardDividerProps, ../packages/base/src/ListItem/index.tsx 33:7 Module parse failed: Unexpected token (33:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | }); | export type { | ListItemAccordionProps, | ListItemButtonGroupProps, ../packages/base/src/AirbnbRating/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { AirbnbRating }; export type { TapRatingProps }; | ../packages/base/src/BottomSheet/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { BottomSheet }; export type { BottomSheetProps }; | ../packages/base/src/Button/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Button }; export type { ButtonProps }; | ../packages/base/src/ButtonGroup/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { ButtonGroup }; export type { ButtonGroupProps }; | ../packages/base/src/CheckBox/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { CheckBox }; export type { CheckBoxProps }; | ../packages/base/src/Chip/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Chip }; export type { ChipProps }; | ../packages/base/src/Divider/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Divider }; export type { DividerProps }; | ../packages/base/src/FAB/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { FAB }; export type { FABProps }; | ../packages/base/src/Header/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Header }; export type { HeaderProps }; | ../packages/base/src/Icon/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Icon }; export type { IconProps, IconNode, IconObject, IconType }; | ../packages/base/src/Input/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Input }; export type { InputProps }; | ../packages/base/src/Overlay/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Overlay }; export type { OverlayProps }; | ../packages/base/src/PricingCard/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { PricingCard }; export type { PricingCardProps }; | ../packages/base/src/Rating/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Rating }; export type { SwipeRatingProps }; | ../packages/base/src/Skeleton/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Skeleton }; export type { SkeletonProps }; | ../packages/base/src/Slider/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Slider }; export type { SliderProps }; | ../packages/base/src/SocialIcon/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { SocialIcon }; export type { SocialIconProps }; | ../packages/base/src/Switch/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Switch }; export type { SwitchProps }; | ../packages/base/src/Text/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Text }; export type { TextProps }; | ../packages/base/src/Tile/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Tile }; export type { TileProps }; | ../packages/base/src/Tooltip/index.tsx 4:7 Module parse failed: Unexpected token (4:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { Tooltip }; export type { TooltipProps }; | ../packages/base/src/Badge/index.tsx 5:7 Module parse failed: Unexpected token (5:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { withBadge, Badge }; export type { BadgeProps }; | ../packages/base/src/SearchBar/index.tsx 7:7 Module parse failed: Unexpected token (7:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export { SearchBar }; export type { | SearchBarProps, | SearchBarAndroidProps, ../packages/base/src/TabView/index.tsx 7:7 Module parse failed: Unexpected token (7:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | Item: TabViewItem, | }); export type { TabViewProps, TabViewItemProps }; | ../packages/base/src/Tab/index.tsx 8:7 Module parse failed: Unexpected token (8:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | }); | export type { TabProps, TabItemProps }; | ../packages/base/src/SpeedDial/index.tsx 8:7 Module parse failed: Unexpected token (8:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | }); | export { DefaultSpeedDial as SpeedDial }; export type { SpeedDialProps, SpeedDialActionProps }; | ../packages/base/src/Avatar/index.tsx 9:7 Module parse failed: Unexpected token (9:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | export { Avatar, Accessory }; | export type { AccessoryProps, AvatarProps };`

    Steps To Reproduce

    Follow instructions using yarn on windows:
    https://github.com/react-native-elements/react-native-elements/tree/next/example
    
    The example app will not run
    

    Screenshots

    image

    Your Environment

    `npx @rneui/envinfo` npx: installed 2 in 2.032s

    npmGlobalPackages:

    • expo: Not Found
    • typescript: Not Found
    • react-native-cli: Not Found
    `npm list -g --depth 0`

    npm global packages I have installed:

    +-- [email protected] +-- [email protected] +-- [email protected] `-- [email protected]

    Reviewed by jdinard at 2022-05-17 03:08
  • 16. fix(SearchBar): onCancel called twice issue on platform android

    Motivation

    Fixes # (issue) https://github.com/react-native-elements/react-native-elements/issues/3247

    Type of change

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

    How Has This Been Tested?

    • [x] Checked with example app

    Checklist

    • [x] My code follows the style guidelines of this project
    • [x] My changes generate no new warnings

    Additional context

    Reviewed by kedar09 at 2022-05-16 08:59
  • 17. Blur on SearchBar doesn't occurs with Tab.Navigator

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Explain what you did

    I have a Tab.Navigator made with createBottomTabNavigator and I'm trying to implement a SearchBar inside it. But the blur event never happen when I click outside the SearchBar.

    Here's my Tab.Navigator :

    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    import {HomeStack} from './home';
    import {SearchStack} from './search';
    import {AddStack} from './add';
    import {NewsStack} from './news';
    import {ProfileStack} from './profile';
    import Ionicons from 'react-native-vector-icons/Ionicons';
    import colors from '../styles/colors';
    
    const Tab = createBottomTabNavigator();
    
    export function MainStack(){
        return (
          <Tab.Navigator
          initialRouteName="Home"
          activeColor="#333"
          inactiveColor="#333"
          screenOptions={({ route }) => ({
            tabBarIcon: ({ color, size }) => {
              let iconName;
    
              if (route.name === 'Accueil') {
                iconName = 'compass-outline';
              } 
              else if (route.name === 'Rechercher') {
                iconName = 'search-outline';
              }
              else if (route.name === 'Ajouter') {
                iconName = 'add-circle-outline';
              }
              else if (route.name === 'Actus') {
                iconName = 'newspaper-outline';
              }
              else if (route.name === 'Profil') {
                iconName = 'person-circle-outline';
              }
    
              // You can return any component that you like here!
              return <Ionicons name={iconName} size={size} color={color} />;
            },
            tabBarActiveTintColor: colors.primaryColor,
            tabBarStyle: {
              paddingBottom: 5,
            }
          })}
          
          >
            <Tab.Screen name="Accueil" component={HomeStack} options={{headerShown:false}}/>
            <Tab.Screen name="Rechercher" component={SearchStack} options={{headerShown:false}}/>
            <Tab.Screen name="Ajouter" component={AddStack} options={{headerShown:false}}/>
            <Tab.Screen name="Actus" component={NewsStack} options={{headerShown:false}}/>
            <Tab.Screen name="Profil" component={ProfileStack} options={{headerShown:false}}/>
          </Tab.Navigator>
        );
    }
    

    And my SearchBar :

        <SearchBar
        lightTheme={ scheme === 'dark' ? false : true} 
        onSubmitEditing={() => submitSearch(0)} 
        onChangeText={updateSearch} 
        value={search} 
        placeholder="Rechercher" 
        round 
        containerStyle={{backgroundColor: 'transparent', borderTopWidth:0, borderBottomWidth:0}}
        onCancel={() => {setResults([]); setSearch(''); setSearched(false); setSelectedIndex(0);}}
        onClear={() => {setResults([]); setSearch(''); setSearched(false); setSelectedIndex(0);}}
        />
    

    Expected behavior

    When we click outside of the SearchBar the blur event should be triggered.

    Describe the bug

    The focus works well. The blur event is only triggered when submitting the search. We can click everywhere around the SearchBar but the blur event never happens.

    Steps To Reproduce

    1. Make a Tab.Navigator with multiple Tab.Screens
    2. Add a SearchBar inside one of them
    3. Try to trigger the blur event while clicking outside the SearchBar
    

    Screenshots

    No response

    Your Environment

    `npx @rneui/envinfo`
      System:
        OS: Windows 10 10.0.22000
        CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
        Memory: 2.72 GB / 15.92 GB
      Binaries:
        Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
        Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
        npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
      Managers:
        Composer: 2.2.6 - C:\ProgramData\ComposerSetup\bin\composer.BAT
        pip3: 22.0.4
      Utilities:
        Git: 2.35.1. - C:\Program Files\Git\mingw64\bin\git.EXE
      Virtualization:
        Docker: 20.10.14 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
      IDEs:
        Android Studio: AI-212.5712.43.2112.8512546
        VSCode: 1.67.0 - C:\Users\Svartlake\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
      Languages:
        Bash: 4.4.23 - C:\Program Files\Git\usr\bin\bash.EXE
        Java: 17.0.2 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
        Perl: 5.34.0 - C:\Program Files\Git\usr\bin\perl.EXE
        PHP: 8.1.4 - C:\php\php.EXE
        Python: 3.10.4
        Python3: 3.10.4
      Databases:
        SQLite: 3.32.2 - C:\Users\Svartlake\AppData\Local\Android\Sdk\platform-tools\sqlite3.EXE
      Browsers:
        Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.39)
        Internet Explorer: 11.0.22000.120
    
    Reviewed by boreales at 2022-05-10 06:33
Mobile-first, accessible components for React Native & Web to build a customizable Design System.
Mobile-first, accessible components for React Native & Web to build a customizable Design System.

NativeBase is a mobile-first, accessible component library for building a consistent design system across android, iOS & web. Website Documentation Ta

Jun 21, 2022
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.

Teaset ???? 中文完整文档版 A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control. Installation

Jun 4, 2022
An "awesome" type curated list of how to use React Native and Meteor together
An

Awesome React Native Meteor An "awesome" type curated list of how to use React Native and Meteor together. Based on Awesome React Native which was bas

Feb 14, 2022
Component library for React Native
Component library for React Native

first-born Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purp

Jun 3, 2022
An utility style framework for React Native

An utility React Native style framework for rapidly building custom user interfaces. Documentation For full documentation, please check https://osmics

Jun 21, 2022
A framework to test a React Native app during runtime
A framework to test a React Native app during runtime

react-native-diagnose A react runtime diagnose component Rationale Testing native applications is complicated There are features that can only be test

Feb 14, 2022
Customizable set of components for React Native applications

Shoutem UI Shoutem UI is a set of styleable components that enables you to build beautiful React Native applications for iOS and Android. All of our c

Jun 20, 2022
react-native stateless functional UI components to get you up and running quickly
react-native stateless functional UI components to get you up and running quickly

panza Panza is a collection of ui-components for react-native modelled after iOS. This library is currently undergoing a rewrite and will be updated s

Feb 14, 2022
Highly customizable and theming components for React Native

@blankapp/ui English | 简体中文 Table of Contents Introduction Features Quick Start Prerequisites Installation Run the new app Discussion License Created

Feb 14, 2022
UI & API Components Library for React Native

React Native Common Cross Platform React Native UI Toolkit & API Get Started Installation $ yarn add react-native-common or $ npm install react-native

Feb 14, 2022
React Native Components and APIs for the Web

React Native for Web "React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM. Documentation The do

Jun 25, 2022
A framework for building native Windows apps with React.
A framework for building native Windows apps with React.

React Native for Windows Build native Windows apps with React. See the official React Native website for an introduction to React Native. React Native

Jun 19, 2022
iOS Today Widget in React Native
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Jun 10, 2022
🤖 React Native Android widgets bridged to JS, a proof of concept
 🤖 React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Jun 16, 2022
A simple Facebook Chat Head like bubble for react native
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

May 25, 2022
React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱
React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Jun 22, 2022
React Native Spring ScrollView V2 is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android)
React Native Spring ScrollView V2 is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android)

React Native Spring ScrollView! React Native Spring ScrollView V2 is a high performance cross-platform native bounces ScrollView for React Native.(iOS

Jun 19, 2022
React Native Spring ScrollView V3 is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android)
React Native Spring ScrollView V3 is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android)

React Native Spring ScrollView! React Native Spring ScrollView is a high performance cross-platform native bounces ScrollView for React Native.(iOS &

Jun 19, 2022
react-native-wheel-picker ★190 - React native cross platform picker.
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

Jun 19, 2022
Simple, performant & type-safe cross platform navigation in React Native / React Native Web
Simple, performant & type-safe cross platform navigation in React Native / React Native Web

Simple and performant cross platform navigation on iOS, Android and the web with simple and type-safe api for React 18 (alpha)

Mar 9, 2022