Material Design for React Native (Android & iOS)

Last update: Aug 4, 2022

react-native-paper

Material design for React Native.
reactnativepaper.com


Greenkeeper badge

Build Status Version MIT License All Contributors PRs Welcome Chat Sponsored by Callstack

Features

Currently supported React Native version: >= 0.50.3

Try it out

Run the example app with Expo to see it in action.

The source code for the examples are under the /example folder.

Getting Started

Refer to the getting started guide for instructions.

Documentation

Check the components and their usage in our documentation.

Contributing

Read the contribution guidelines before contributing.

Figma and Sketch component kits

Use official component kits provided by Material Design.

Made with ❀️ at Callstack

react-native-paper is an open source project and will always remain free to use. If you think it's cool, please star it 🌟 . Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Contributors

Thanks goes to these wonderful people (emoji key):

Satyajit Sahoo
Satyajit Sahoo

πŸ€” πŸ’» πŸ“–
Ferran Negre
Ferran Negre

πŸ€” πŸ’»
Dawid
Dawid

πŸ€” πŸ’» πŸ“–
Kacper Wiszczuk
Kacper Wiszczuk

πŸ€” πŸ’»
Luke Walczak
Luke Walczak

πŸ’» πŸ“–
Ahmed Elhanafy
Ahmed Elhanafy

πŸ€” πŸ’»
K. P. Sroka
K. P. Sroka

πŸ’» πŸ“–
Iyad Thayyil
Iyad Thayyil

πŸ’» πŸ“–
Julian Hundeloh
Julian Hundeloh

πŸ’» πŸ“–
Grzegorz Gawrysiak
Grzegorz Gawrysiak

πŸ’» πŸ“–
LuΓ­s
LuΓ­s

πŸ’»
Rajendran Nadar
Rajendran Nadar

πŸ’»
Brent Vatne
Brent Vatne

πŸ’»
Jakub BeneΕ‘
Jakub BeneΕ‘

πŸ’»
PaweΕ‚ SzymaΕ„ski
PaweΕ‚ SzymaΕ„ski

πŸ’» πŸ“–
Kuba
Kuba

πŸ’» πŸ€”
jbinda
jbinda

πŸ’» πŸ€”

This project follows the all-contributors specification. Contributions of any kind welcome!

GitHub

https://github.com/callstack/react-native-paper
Comments
  • 1. React native paper require cycle warnings

    Please provide all the information requested. Issues that do not follow this format are likely to stall.

    Description

    I tried to use react native paper components for my react native applications. Currently i use "react-native-paper": "^3.9.0", I launched the application in Android mobile I got warnings `[Tue May 05 2020 13:06:41.270] WARN Require cycle: node_modules\react-native-paper\lib\module\components\Checkbox\Checkbox.js -

    node_modules\react-native-paper\lib\module\components\Checkbox\CheckboxItem.js -> node_modules\react-native-paper\lib\module\compo nents\Checkbox\Checkbox.js

    Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. [Tue May 05 2020 13:06:41.272] WARN Require cycle: node_modules\react-native-paper\lib\module\components\FAB\FAB.js -> node_mod ules\react-native-paper\lib\module\components\FAB\FABGroup.js -> node_modules\react-native-paper\lib\module\components\FAB\FAB.js

    Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. [Tue May 05 2020 13:06:41.273] WARN Require cycle: node_modules\react-native-paper\lib\module\components\RadioButton\RadioButto n.js -> node_modules\react-native-paper\lib\module\components\RadioButton\RadioButtonItem.js -> node_modules\react-native-paper\lib
    module\components\RadioButton\RadioButton.js

    Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. [Tue May 05 2020 13:06:41.273] WARN Require cycle: node_modules\react-native-paper\lib\module\components\Appbar\Appbar.js -> no de_modules\react-native-paper\lib\module\components\Appbar\AppbarHeader.js -> node_modules\react-native-paper\lib\module\components
    Appbar\Appbar.js

    Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. [Tue May 05 2020 13:06:41.273] WARN Require cycle: node_modules\react-native-paper\lib\module\components\ToggleButton\ToggleBut ton.js -> node_modules\react-native-paper\lib\module\components\ToggleButton\ToggleButtonRow.js -> node_modules\react-native-paper\l ib\module\components\ToggleButton\ToggleButton.js`

    React Native version:

    info Fetching system and libraries information... System: OS: Windows 10 10.0.18363 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Memory: 12.35 GB / 23.88 GB Binaries: Node: 12.16.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 27, 28, 29 Build Tools: 28.0.3, 29.0.2 System Images: android-28 | Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom Android NDK: 20.0.5594570 IDEs: Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897 Languages: Java: 1.8.0_211 - /c/Program Files/Java/jdk1.8.0_211/bin/javac Python: Not Found npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.2 => 0.62.2 npmGlobalPackages: react-native: Not Found

    Steps To Reproduce

    1. yarn add react-native-paper
    2. react-native run-android

    Expected Results

    I don't want to see warnings about react native paper

    Reviewed by khaledBou at 2020-05-06 21:30
  • 2. App fails to compile with react-native-web

    I'm trying to use react-native-paper in conjunction with react-native-web. React-native-web is an npm package which aliases react-native, and allows you to run react-native apps in the browser (ie: no simulator). It renders components as android, and it uses react-native v0.55.

    Current behaviour

    When I run the app without using react-native-paper, it runs fine. When I use react-native-paper however, I currently get an error message (see below) and the app fails to compile.

    Expected behaviour

    I expect for the app to run as a react-native-web app, with* react-native-paper* providing components. Below is the error message I receive when I run npm start.

    Failed to compile
    ./node_modules/react-native-paper/src/index.js
    SyntaxError: /media/binyamin/Seagate Expansion Drive/Documents/Coding/react-native/my-web-app/node_modules/react-native-paper/src/index.js: Unexpected token (4:12)
    
      2 | 
      3 | import * as Colors from './styles/colors';
    > 4 | import type { Theme as _Theme } from './types';
        |             ^
      5 | 
      6 | export type Theme = _Theme;
      7 | 
    

    Code sample

    Github Repo: https://github.com/b3u/my-web-app Just run npm start to reproduce the issue

    Screenshots (if applicable)

    What have you tried

    1. Search Google
    2. Search existing issues
    3. Create a custom theme
    4. Opt out of using icons
    5. Downgrade to v2.1.3
    

    Your Environment

    | software | version | --------------------- | ------- | ios or android | n/a (the web app displays as android) | react-native | react-native-web v0.9.8 | react-native-paper | v2.2.8 | node | v10.13 | npm or yarn | npm v6.4.1

    Reviewed by binyamin at 2018-12-02 14:54
  • 3. Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

    Current behaviour

    Expected behaviour

    Code sample

    Screenshots (if applicable)

    What have you tried

    Your Environment

    | software | version | --------------------- | ------- | ios or android | | react-native | | react-native-paper | | node | | npm or yarn |

    Reviewed by isthaison at 2018-11-05 03:51
  • 4. Typescript error in version 4.10.0

    I use this [email protected]^4.10.0 with typescript but got some typing errors

    image

    package.json

    {
      "name": "expo-app-",
      "version": "1.0.0",
      "main": "index.js",
      "scripts": {
        "android": "expo run:android",
        "ios": "expo run:ios",
        "web": "expo start --web",
        "start": "react-native start"
      },
      "dependencies": {
        "expo": "~43.0.0",
        "expo-splash-screen": "~0.13.3",
        "expo-status-bar": "~1.1.0",
        "expo-updates": "~0.10.5",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-native": "0.64.2",
        "react-native-gesture-handler": "~1.10.2",
        "react-native-paper": "^4.10.0",
        "react-native-reanimated": "~2.2.0",
        "react-native-safe-area-context": "3.3.2",
        "react-native-screens": "~3.8.0",
        "react-native-web": "0.17.1"
      },
      "devDependencies": {
        "@babel/core": "^7.12.9",
        "@types/react": "~17.0.1",
        "@types/react-native": "~0.64.2",
        "typescript": "^4.4.4"
      },
      "private": true
    }
    
    Reviewed by cuongdo926 at 2021-11-06 06:14
  • 5. feat: ToggleButton component

    Motivation

    Implement Toggle Button component to the library, specified on the Material Design guidelines. Solves #124

    Test plan

    Go to Examples List and select Toggle Button to test the new feature.

    Reviewed by Moreno97 at 2018-10-05 08:36
  • 6. Typescript error: No overload matches this call.

    I just init a expo typescript project. Then add 'react-native-paper' in my project. When try to use Button component it gives me this typescript error. Do you have any idea why getting error?

    Error

    No overload matches this call.
      Overload 1 of 2, '(props: Pick<Props, "ref" | "style" | "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | ... 57 more ... | "contentStyle"> & { ...; }, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
        Type '{ children: string; mode: "outlined"; onPress: () => void; }' is missing the following properties from type
    

    Code -

    <PaperProvider>
      <View >
          <Button mode="outlined" onPress={() => {}}>
             press me
          </Button>
       </View>
    </PaperProvider>
    

    package.json

    {
      "main": "node_modules/expo/AppEntry.js",
      "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject"
      },
      "dependencies": {
        "expo": "~40.0.0",
        "expo-status-bar": "~1.0.3",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
        "react-native-paper": "^4.5.0",
        "react-native-web": "~0.13.12"
      },
      "devDependencies": {
        "@babel/core": "~7.9.0",
        "@types/react": "~16.9.35",
        "@types/react-dom": "~16.9.8",
        "@types/react-native": "~0.63.2",
        "typescript": "~4.0.0"
      },
      "private": true
    }
    
    
    Reviewed by rahadkc at 2021-01-05 04:28
  • 7. An in-range update of expo-cli is breaking the build 🚨

    The devDependency expo-cli was updated from 3.13.0 to 3.13.1.

    🚨 View failing branch.

    This version is covered by your current version range and after updating it in your project the build failed.

    expo-cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

    Status Details
    • ❌ ci/circleci: install-dependencies: Your tests failed on CircleCI (Details).

    Commits

    The new version differs by commits.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper Bot :palm_tree:

    Reviewed by greenkeeper[bot] at 2020-02-13 02:07
  • 8. EventEmitter.removeListener('change', ...): Method has been deprecated. Warning

    Warning

    EventEmitter.removeListener('change', ...): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener

    Code sample

    import { Menu } from 'react-native-paper'; <Menu visible={menu} onDismiss={() => setmenu(false)} anchor={<Ionicons onPress={() => setmenu(true)} name={"settings-sharp"} size={24} color={"#222"} />}> <Menu.Item onPress={() => { }} title="Download" /> <Menu.Item onPress={() => { }} title="Report" /> <Menu.Item onPress={() => { }} title="Cancel" />

    Screenshots (if applicable)

    image

    Your Environment

    | software | version | --------------------- | ------- | ios or android | android | react-native | 0.66.2 | react-native-paper | ^4.10.1 | node | v14.18.1 | npm or yarn | npm | expo sdk | no

    GITHUB REPO:- https://github.com/pushpender-singh-ap/sampleRepo

    Reviewed by pushpender-singh-ap at 2021-11-20 14:34
  • 9. Snackbar action is not working

    Current behaviour

    Snackbar action is not working

    Expected behaviour

    close snackbar or other function when click action buttons on snackbar

    Code sample

    <Snackbar visible={this.state.visible} onDismiss={() => this.setState({ visible: false })} action={{ label: 'Undo', onPress: () => { // Do something this.setState({ visible: false }) //<-- problem }, }} > Hey there! I'm a Snackbar.

    Reviewed by ManigandanRaamanathan at 2018-10-03 09:06
  • 10. Typescript Error with React native Paper Components.

    TO REPRODUCE: `// tsconfig file

    { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react", "lib": ["es6"], "moduleResolution": "node", "noEmit": true, "strict": true, "target": "esnext" }, "exclude": [ "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" ] }`

    SAMPLE CODE: = const StoreFront: React.FC = () => { return ( <ScrollView horizontal={true}> <Card key="key1"> <Card.Cover source={{ uri: "https://image" }} /> <Card.Actions> <Button>Cancel</Button> </Card.Actions> </Card> ))} </ScrollView> ); }; export default StoreFront;

    TYPESCRIPT ERROR: = note:( following error present on <Card >, <Button>, etc components of react native paper.) `(alias) const Card: (React.ComponentClass<Pick<Pick<ViewProps & React.RefAttributes & { children: React.ReactNode; style?: StyleProp; theme: Theme; }, "style" | "children" | "ref" | "onLayout" | ... 49 more ... | "onTouchEndCapture"> & { ...; } & { ...; } & { ...; }, "style" | ... 55 more ... | "elevation"> & { ...; }, any> & hoistNonReactStatics.NonReactStatics<...>) | (React.FunctionComponent<...> & hoistNonReactStatics.NonReactStatics<...>) import Card

    Property 'accessibilityStates' is missing in type '{ children: Element[]; key: string; }' but required in type 'Pick<Pick<ViewProps & RefAttributes & { children: ReactNode; style?: StyleProp; theme: Theme; }, "ref" | "style" | "removeClippedSubviews" | "hitSlop" | "onLayout" | ... 48 more ... | "accessibilityStates"> & { ...; } & { ...; } & { ...; }, "ref" | ... 55 more ... | "elevation">'.ts(2741) `

    Reviewed by proteche at 2020-06-05 08:31
  • 11. Paper's button seems to be slower

    Current behaviour

    The button seems to be not as responsive as expected. It just feels laggy. The onPress function seems to be fired after the animation is finished? Please take a look at the gif below where compare the Paper's button with Element's button. The logic in the onPress is exactly the same code.

    This only occur on mid/low end device. FYI, my device is running on SD 636.

    Expected behaviour

    Button should be responsive.

    Code sample

    https://snack.expo.io/@elabar/paper-button-slow

    Screenshots (if applicable)

    Highlight:

    • The button seems to be hold on at the 'pressIn' state for awhile? (I did not hold the button) validate_slow

    Highlight:

    • The button seems to be hold on at the 'pressIn' state for awhile? (I did not hold the button) And start the loading afterwards. loading_slow

    What have you tried

    The problem was found in one of my production apps first. I tried creating a reproduce with a clean npx react-native init, and I can confirm this is a valid issue. The gif above is run on development mode on purpose to show the sluggishness easily.

    Strange thing is, this problem is more severe with RN CLI. It feels much better with expo.

    I then check on react-native-elements codebase. The main difference I found is Paper is using requestAnimationFrame. Not sure if this is related tho.

    Your Environment

    | software | version | --------------------- | ------- | ios or android |Android 11 | react-native |0.64.2 | react-native-paper |4.9.2 | node |14.16.1 | yarn|1.22.10 | expo |42.0.1 |react-native-vector-icons|8.1.0

    Reviewed by Elabar at 2021-07-19 15:29
  • 12. Not able to set custom BottomNavigation backgroundColor with v3 theme.

    As you can see in the reference below, if the v3 theme is used it uses theme surface color no matter what backgroundColor one passes through the barStyle prop.

    The NavigationBar Guidelines says:

    The container can have a color fill to provide separation from the content behind it.

    https://github.com/callstack/react-native-paper/blob/6afa4fb98c6826c4d6b80db055ef8f21ed07b59a/src/components/BottomNavigation/BottomNavigation.tsx#L602-L605

    Also the elevation should probably be adjustable. According to the NavigationBar Spec it should actually have a default elevation of 2 but it is currently hardcoded to 0:

    https://github.com/callstack/react-native-paper/blob/6afa4fb98c6826c4d6b80db055ef8f21ed07b59a/src/components/BottomNavigation/BottomNavigation.tsx#L728

    One can barely see it in the example picture: Bildschirmfoto 2022-08-04 um 12 37 25

    Reviewed by DomiR at 2022-08-04 10:42
  • 13. Having issue in TextInput - mode={'outlined'} - multiline={true}.

    I have checked many doc's for resolve this issue but can't find anything. Here i have added the video how it works and image for what is should have to look like..

    1. Video: Issue is value is at center instead top.
    2. Image: The value should have on the top when it's not in focus.
    3. Here is my code.
          <TextInput
                mode="outlined"
                label="Outlined input"
                placeholder="Type something"
                multiline
                style={{height: 150}}
           />
    

    01

    https://user-images.githubusercontent.com/86836170/182808774-e149bf0c-8b3a-4f73-8cf3-66eebdb5a97b.mov

    Here is my version codes.

    react-native: 0.66.4 react-native-paper: 4.12.1 react-native-vector-icons: 9.1.0

    Expo code example: https://snack.expo.dev/@shravancentricwave/textinput.affix?name=TextInput.Affix&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Ftext-input-affix.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20TextInput%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Btext%2C%20setText%5D%20%3D%20React.useState(%27%27)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20mode%3D%22outlined%22%0A%20%20%20%20%20%20label%3D%22Outlined%20input%22%0A%20%20%20%20%20%20placeholder%3D%22Type%20something%22%0A%20%20%20%20%20%20right%3D%7B%3CTextInput.Affix%20text%3D%22%2F100%22%20%2F%3E%7D%0A%20%20%20%20%2F%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper

    Reviewed by ShravanCentricwave at 2022-08-04 09:06
  • 14. dispatch command called without surface id

    Current behaviour

    crashed on react native 0.69.1 with fabric enabled

    crashes saying dispatch command called without surface id - fabric dispatch command must be called through fabric jsi api

    Expected behaviour

    to work normally

    work normally

    Code sample



    Screenshots (if applicable)

    What have you tried

    works in paper

    debug crash information

    Your Environment

    windows 10 | software | version | --------------------- | ------- | ios or android | android | react-native | 0.69.1 | react-native-paper | 4.11.1 | node | 14.0 | npm or yarn | 6 | expo sdk | none

    fabric is enabled

    Reviewed by aleluiah at 2022-08-03 22:08
  • 15. How to use custom Appbar.BackAction type in Appbar?

    Currently in Appbar, .type of the children is used to determine what the child is for e.g. AppbarBackAction

    Is it possible to override a component's .type so that it can be picked up as the back action?

    I can see how this would be done if a different property was used, such as displayName

    AppbarBack.displayName = Appbar.BackAction.displayName;
    

    | software | version | --------------------- | ------- | react-native-paper | 5.0.0-rc.3

    Reviewed by hbriese at 2022-08-03 04:36
  • 16. New component: SegmentedButton

    This PR introduces new component named: SegmentedButton.

    Summary

    General overview of the component: https://m3.material.io/components/segmented-buttons/overview

    Highlights:

    • single or multi-selection
    • segmented buttons can have 2-5 segments, segments cannot wrap into a new line
    • icons can be used in place of labels
    • icon next to the label is optional

    Screenshot: Simulator Screen Shot - iPhone 13 - 2022-08-02 at 09 52 23

    Test plan

    Write tests for this component.

    Reviewed by okwasniewski at 2022-07-30 18:29
A FAB button component for Android and iOS, customizable, simple and as per material design specs.

react-native-fab A FAB button component for Android and iOS, customizable, simple and as per material design specs. See Google Material Design for mor

Jun 22, 2022
Material Design "Backdrop" component for Android and iOS.
Material Design

react-native-material-backdrop-modal Material Design "Backdrop" component for Android and iOS. Setup Usage Props Setup Install: Using npm: npm install

Jul 4, 2022
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Aug 2, 2022
A react native module to show toast like android, it works on iOS and Android.
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Jul 18, 2022
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

May 23, 2021
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Jun 29, 2022
react-native-wheel-picker-android β˜…186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.
react-native-wheel-picker-android β˜…186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Jul 28, 2022
πŸŽ‰ toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!
πŸŽ‰ toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native ?? toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

May 7, 2022
Native CardView for react-native (All Android version and iOS)
Native CardView for react-native (All Android version and iOS)

react-native-card-view Native CardView that compatible for iOS and Android( both lollipop and pre-lolipop). Website Material Design Card Spec CardView

Jul 24, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Aug 5, 2022
iOS and Android native search component for react native

react-native-search-bar iOS native search bar for react native. Installation In your react native project, run npm install react-native-search-bar --s

Jul 25, 2022
πŸ”½ A Picker component for React Native which emulates the native select> interfaces for iOS and Android
πŸ”½ A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native <select> interfaces for iOS and Android For iOS, by default w

Aug 6, 2022
Bringing Material Design to React Native
Bringing Material Design to React Native

A set of UI components, in the purpose of introducing Material Design to apps built with React Native, quickly and painlessly. Getting Started First,

Jul 30, 2022
Highly customizable material design components for React Native
Highly customizable material design components for React Native

React Native Material UI (iOS and Android supported) Highly customizable material design components for React Native! Documentation Getting Started Us

Aug 6, 2022
React Native TextInput styled with Material Design.
React Native TextInput styled with Material Design.

React Native Material Design TextInput React Native TextInput styled with Material Design. Installation npm install react-native-md-textinput Usage I

Jul 12, 2022
Smooth and fast cross platform Material Design date and time picker for React Native Paper
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

Jul 28, 2022
Modular and customizable Material Design UI components for React Native
Modular and customizable Material Design UI components for React Native

react-native-material Modular and customizable Material Design UI components for React Native Try it out Take a look at our example app: iOS Android W

Jul 30, 2022
A simple material-themed calendar for react native android

react-native-calendar-android A simple material-themed calendar for react native android Installation Android npm install --save react-native-calendar

Dec 11, 2021