:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode

Last update: Aug 8, 2022

UI Kitten Eva Design System npm Build Status Coverage Status

Documentation

UI Kitten is a React Native UI Library that allows you creating stunning multi-brand cross-platform mobile applications. The library is based on Eva Design System which brings consistency and scalability in the design and development process. It contains a set of general purpose UI components styled in a similar way. And the most awesome thing: the themes can be changed in the runtime, with no need to reload the application.

100% Free and Open Source!

Kitten Material

What's included

  • 25+ general-purpose components designed and tested to save your time.

  • Comprehensive clear documentation with the tons of examples.

  • Theming System - Use Light and modern Dark themes and create your own.

  • SVG Eva Icons support - 480+ general purpose icons

  • Eva Design System Support - Construct an interface using basic components following Eva specifications and it will always have a stunning design.

Starter App

Kitten Tricks โ€“ react-native starter kit allows you to boost the development of a mobile app. There is a huge variety of customizable layouts, use โ€œas isโ€ or add new blocks.

Over 40 screens in dark and light themes give you the possibility to create a bright and exclusive app while saving your time on compiling numerous details. Also, you can download the source code and use it for your own benefit.

Quick Start

Start a new app with UI Kitten template from a scratch:

npx react-native init MyApp --template @ui-kitten/template-js

Or, if you want to init with TypeScript:

npx react-native init MyApp --template @ui-kitten/template-ts

This will setup a new React Native application configured with UI Kitten. Refer to the Documentation for more options to start.

Mobile backend Bundles

Easy way to integrate UI Kitten with backend (Java, .NET Core).

How can I support the developers?

  • Star our GitHub repo โญ
  • Create pull requests, submit bugs, suggest new features or documentation updates ๐Ÿ”ง
  • Read us on Medium
  • Follow us on Twitter
  • Like our page on Facebook

License

MIT license.

More from Akveo

  • Eva Icons - 480+ beautiful Open Source icons

From Developers

Made with โค๏ธ by Akveo team. Follow us on Twitter to get the latest news first! We're always happy to receive your feedback!

GitHub

https://github.com/akveo/react-native-ui-kitten
Comments
  • 1. theme file is too huge!

    ๐Ÿ› Bug Report

    after running yarn start, and taking a look at the generated.json file, it seems the file is 3.8MB. This is too huge for a theme file. We should potentially use babel to tree-shake and remove the config for components that are not being used.

    Also noted that this file is included as res in android. I'd expect this to be in index.bundle.js so that codepush can affect theme changes.

    The final bundle also has these two files included, not sure why:

    1. node_modules_evadesign_eva_themes_light.json
    2. node_modules_evadesign_eva_themes_dark.json

    To Reproduce

    1. Create a new app with ui kitten v4
    2. ./gradlew bundleRelease
    3. run size-analyzer check-bundle -d app-release.aab

    Expected behavior

    generated.json should be included in index.bundle.js

    Sample project

    https://github.com/heroic/uikitten-test

    run, yarn, and then yarn start and then ls -la node_modules/@eva-design/eva/generated.json

    The file size is abount 3.8MB

    UI Kitten and Eva version

    | Package | Version | | ----------- | ----------- | | @eva-design/eva | 1.4.0 | | @ui-kitten/components | 4.4.1 |

    Environment information

    System:
        OS: macOS 10.15.4
        CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
        Memory: 112.74 MB / 16.00 GB
        Shell: 5.7.1 - /bin/zsh
      Binaries:
        Node: 13.13.0 - /usr/local/bin/node
        Yarn: 1.22.4 - ~/.yarn/bin/yarn
        npm: 6.14.4 - /usr/local/bin/npm
        Watchman: 4.9.0 - /usr/local/bin/watchman
      Managers:
        CocoaPods: 1.9.1 - /usr/local/bin/pod
      SDKs:
        iOS SDK:
          Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
        Android SDK:
          API Levels: 28, 29
          Build Tools: 28.0.3, 29.0.2
          System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom_64
          Android NDK: 21.0.6113669
      IDEs:
        Android Studio: 3.5 AI-191.8026.42.35.6010548
        Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
      Languages:
        Python: 2.7.17 - /usr/local/bin/python
      npmPackages:
        @react-native-community/cli: Not Found
        react: 16.11.0 => 16.11.0 
        react-native: 0.62.0 => 0.62.0 
      npmGlobalPackages:
        *react-native*: Not Found
    
    Reviewed by heroic at 2020-04-28 14:38
  • 2. ๐Ÿ“ [Sticky] UI Kitten 5.0 Discussion & Roadmap

    This is a communication-open issue indicating version 5.0 roadmap. Yes, we're going to skip future 4.x releases since it will introduce some breaking changes ๐Ÿ’ฃ

    Our plan is:

    Features

    • ~๐Ÿ“† Time Picker #778~ (postponed)

    • ๐Ÿ“š Documentation for Eva Theme System.

    For now, we realize that background-basic-color-1 looks like a magic string. And that's why we should describe all theme variables exported from Eva and describe how and where they're used and where not.

    Bug Fixes

    • We're going to close several minor issues during the 4.4.x patch releases. If you have some, please open an issue or send us a PR so we can handle it.

    Refactoring

    • ๐Ÿค”More flexibility in component props by rethinking current APIs.

    We're going to add support of passing Component classes as well as Functional components to component props. A good example for this is a title property of TopNavigation component which more likely can include an Image.

    This should close the following issues: #564 #737 #777 #810 #863

    Currently, we're investigating this feature and looking for a good architecture solution. If you have any suggestions, feel free to mention them in the discussion.

    • ๐Ÿ’ฃ BREAKING: Unification of property names. For example, Select and Autocomplete items should have a same property name for a title. Currently, text and title are used.

    • ๐Ÿ’ฃ [NOT ACCEPTED] BREAKING: Unification with React Native property names. For example, use title property for button instead of passing text as children. Let us know how do you feel about that.

    Migration

    • Starting from v5, this repository will be moved under Eva Design project.

    • Also, keep in mind that we're going to completely deprecate react-native-ui-kitten package in order to use @ui-kitten/components.


    โš ๏ธ

    We're not going to include more feature requests in 5.0. In this discussion, we accept proposals regarding the features described above.

    Please open a new issue if you have a feature request or questions regarding the current API in order to help us keep this conversation clean.

    Reviewed by artyorsh at 2020-02-19 09:43
  • 3. font not applied to all of my components

    | Package | Version | | ----------- | ----------- | | @eva-design/eva | 1.4.0 | | @ui-kitten/components | 4.4.0 |

    Hi I followed the tutorials on how to implement and add fonts, but the font does not apply to some components. For example, fonts do not apply to buttons.

    app.tsx:

    import React from 'react';
    import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
    import { EvaIconsPack } from '@ui-kitten/eva-icons';
    import { mapping } from '@eva-design/eva';
    import { default as customMapping } from './custom-mapping.json';
    import { lightTheme, darkTheme } from './custom-theme';
    
    import { AppNavigator } from './src/navigation/navigation.component';
    import { ThemeContext } from './theme-context';
    
    
    const App = () => {
      return (
    
        <React.Fragment>
          <IconRegistry icons={EvaIconsPack} />
          <ThemeContext.Provider value={{ theme, toggleTheme }}>
            <ApplicationProvider
              mapping={mapping}
              theme={lightTheme}
              customMapping={customMapping}
              >
              <AppNavigator />
            </ApplicationProvider>
          </ThemeContext.Provider>
        </React.Fragment>
      );
    };
    
    export default App;
    
    

    custom-mapping.json:

    {
      "strict": {
        "text-font-family": "bad_bold_college"
      }
    }
    

    image

    Reviewed by amira133 at 2020-02-16 10:40
  • 4. How to use icon in button?

    ๐Ÿ’ฌ Question

    UI Kitten and Eva version

    | Package | Version | | ----------- | ----------- | | @eva-design/eva | 1.3.2 | | @ui-kitten/components | 4.3.2 |

    File 1: MyIcons.js

    import React from 'react';
    import { Icon } from '@ui-kitten/components';
    
    export default FacebookIcon = (style) => (
      <Icon name='facebook' {...style} />
    );
    

    File 2: Login Screen

    import React, {Component} from 'react';
    import {AsyncStorage, ScrollView, View, StyleSheet} from 'react-native';
    import {LOGIN} from "../api/endpoints";
    import {Text, Button, Input, Layout, Icon} from "@ui-kitten/components";
    import axiosInstance from "../api/axiosInstance";
    import FacebookIcon from '../MyIcons'
    
    export default class LoginScreen extends Component {
      
      render() {
    		const {username, password} = this.state;
    		return  (
    			<Layout style={styles.container}>
    	
    
    				<Button
    				style={styles.signUpButton}
    				textStyle={styles.signUpText}
    				icon={FacebookIcon} //added icon to button
    				size='large'
    				>Hello</Button>
                            </Layout>
    
    		)
    	}
    }
    

    This is not working. Right now I'm testing it on Android device.

    The error get is:

    **Error while updating property 'fill' of a view managed by: RNSVGRect

    null

    java.lang.Double cannot be cast to java.lang.String**

    Reviewed by samapara at 2020-02-08 03:12
  • 5. rkCalendar cause application to crash at start

    Issue type

    I'm submitting a ... (check one with "x")

    • [X ] bug report
    • [ ] feature request

    Issue description

    Current behavior:

    Some components in node_modules, like RkCalendarDay, cause application to crash at start. Even if the components aren't used in the application.

    Dependency: react-native-ui-kitten": "github:akveo/react-native-ui-kitten

    Expected behavior:

    Application will be launched after expo start.

    Steps to reproduce:

    Delete node_modules, run npm install, start application with `expo startยด and try to run the application on your device.

    Related code:

     base: View.propTypes.style,
     today: View.propTypes.style,
     selected: View.propTypes.style,
    
    Bildschirmfoto 2019-04-16 um 18 14 47

    Other information:

    OS, device, package version

    iOS, Simulator and physical device
    
    Reviewed by JaWoGit at 2019-04-16 16:23
  • 6. ๐Ÿ“† [Sticky] UI Kitten 4.2 Discussion & Roadmap

    This is a communication-open issue indicating version 4.2 roadmap. Our plan is:

    Features

    • Popover auto-placement #258
    • RTL support #561

    UI components

    • Select #523
    • Calendar #520
    • Drawer #521
    • Activity Indicator #519

    Modules

    In version 4.2, we're going to become a modular framework. This means it will help you with creating apps with more flexibility allowing to install the only things you need! Besides the main package of UI components, we also going to introduce following easily adaptable to UI Kitten packages:

    • Eva Icons #522. A pack of more than 480 beautifully crafted Open Source icons.
    • Moment and date-fns adapters for Calendar component. By default, a calendar component will work with a native date object, but we also going to introduce additional packages that will allow you to work with moment or date-fns (if you're looking for easier formatting)
    • Template App Module #553. Supporting module to make a start as easy as react-native init --template ui-kitten

    Documentation

    • Add more ready-to-go examples in the component Overview section #442

    Feel free to add your proposals on what we need to include!

    Reviewed by artyorsh at 2019-07-22 06:51
  • 7. Adding the ability to use TopNavigation component for rendering the popover-based components

    Issue type

    I'm submitting a ... (check one with "x")

    • [ ] bug report
    • [x] feature request

    Issue description

    Current behavior: At the moment there is no possibility to use the TopNavigationAction component for showing Popover-based components since the TopNavigation component restricts the expected element by the properties of TopNavigationAction component.

    Expected behavior: No ts errors. For example: Type 'OverflowMenuProps' is not assignable to type 'TopNavigationActionProps'.

    Related code:

      private renderRightControl = (): React.ReactElement<OverflowMenuProps> => {
        const { themedStyle } = this.props;
    
        return (
          <OverflowMenu
            style={themedStyle.menu}
            visible={this.state.menuVisible}
            placement='bottom end'
            items={this.items}
            onRequestClose={this.onMenuPress}
            onSelect={this.onMenuItemPress}>
            <TopNavigationAction
              icon={MenuIconAuth}
              onPress={this.onMenuPress}
            />
          </OverflowMenu>
        );
      };
    
      private renderRightControls = (): React.ReactElement<TopNavigationActionProps>[] => {
        return ([
          this.renderRightControl(),
        ]);
      };
    
    Reviewed by 32penkin at 2019-07-01 14:31
  • 8. Webpack config issue after manual install of 4.3.1

    Issue type

    I'm submitting a ... (check one with "x")

    • [x] bug report
    • [ ] feature request

    Issue description

    Current behavior: After a fresh install of expo and then a manual install of UI Kitten, a webpack-related compilation error is the result when run on web.

    Expected behavior: That a manual install on top of a fresh expo install would run without issue.

    Steps to reproduce: Clone this repo: https://github.com/educational-resources-and-services/react-native-ui-kitten-test-4.3.1

    Related code: The exact commands I ran to produce the above repo:

    expo init test
    cd test
    npm i @ui-kitten/components @eva-design/eva
    

    Then I copied the code here for App.js. Then:

    npm run web
    

    Other information:

    I did not install react-native-svg since I am using expo and therefore cannot do linking.

    OS, device, package version

    MacOS 10.15.1
    @ui-kitten/components 4.3.1
    
    Reviewed by AndyHubert at 2019-12-05 06:57
  • 9. The app crashes when using new Hermes engine

    Issue type

    • [x] bug report
    • [ ] feature request

    Issue description

    Current behavior:

    The app crashes when using new Hermes engine.

    This only happened once I added the Icons Module, before that the app was working correctly with the Hermes engine. Screenshot_1570497400

    Expected behavior:

    The app works with or without the Hermes engine.

    Steps to reproduce:

    Other information:

    OS, device, package version

    "@eva-design/eva": "^1.2.0"
    "@ui-kitten/eva-icons": "^4.2.0"
    "react-native": "0.61.1"
    "react-native-ui-kitten": "^4.2.0"
    
    Reviewed by johanquiroga at 2019-10-08 01:24
  • 10. ApplicationProvider shouldn't process mappings everytime it's mounted

    I'm submitting a ...

    • [ ] bug report
    • [ x] feature request

    Issue description

    This is not an issue with UI Kitten itself, but rather a request to make play well with a very popular library (react-native-navigation by Wix) and maybe others.

    Current behavior: In order to use the framework with its theming capabilities we should wrap our app with UI Kitten ApplicationProvider. ApplicationProvider uses Eva System to process mapping schemas upon its construction, which takes a couple of seconds on an average Android phone (Which is fine).

    Now, In case we're using react-navigation as a navigation solution, ApplicationProvider will be mounted only once at startup (process mapping once), and then all the navigation will take place inside that provider node, and there are no issues in this case.

    however, if react-native-navigation is being used, and as you may know, it works by registering each screen component individually and in isolation of others after the app is launched, we have to wrap each screen component with whatever providers being used, including redux, and in this case, UI Kitten ApplicationProvider, thus, whenever a page is being pushed or a modal being shown, the Application provider will process the mapping again which is causing a few seconds delay before the screen component being mounted.

    Expected behavior: Unless mapping prop has changed, Application provider should use a pre-processed data from previous component construction.

    Steps to reproduce: It can be simply reproduced by using react-native-navigation with UI Kitten.

    Other information:

    OS, device, package version

    React-native 0.60
    Platforms: Android, iOS
    UI Kitten Version: 4.1.0
    react-native-navigation: 3.0.0
    
    Reviewed by DaniShalash at 2019-09-14 11:51
  • 11. Failed prop type on iOS < 13 and Android 5.x

    ๐Ÿ’ฌ Question

    I have a project developed under Expo SDK 38 / React 16.11.0 / React Native 0.62. Everything works fine when I run it under iOS 13 or Android 9+. However, running it under a previous version of these OSs, all sorts of Failed prop type errors showed in the console. The UI is completely broken on these.

    This is how the project looks like on iOS 13.x and Android 9+: (the green rectangles are added manually to cover some logos and login information) Screenshot 2020-07-09 at 20 01 51 Screenshot 2020-07-09 at 20 03 25

    And this is how it looks like on iOS 12 and lower (same on Android 5.x emulator) Screenshot 2020-07-09 at 20 00 30 Screenshot 2020-07-09 at 19 59 14 Screenshot 2020-07-09 at 20 04 39

    These are the errors logged in the console:

    Warning: Failed prop type: Invalid prop `placeholderTextColor` supplied to `ForwardRef(TextInput)`: text-hint-color
    Valid color formats are
      - '#f0f' (#rgb)
      - '#f0fc' (#rgba)
      - '#ff00ff' (#rrggbb)
      - '#ff00ff00' (#rrggbbaa)
      - 'rgb(255, 255, 255)'
      - 'rgba(255, 255, 255, 1.0)'
      - 'hsl(360, 100%, 100%)'
      - 'hsla(360, 100%, 100%, 1.0)'
      - 'transparent'
      - 'red'
      - 0xff00ff00 (0xrrggbbaa)
    
    Warning: Failed prop type: Invalid prop `color` supplied to `ForwardRef(TextInput)`: text-basic-color
    Valid color formats are
      - '#f0f' (#rgb)
      - '#f0fc' (#rgba)
      - '#ff00ff' (#rrggbb)
      - '#ff00ff00' (#rrggbbaa)
      - 'rgb(255, 255, 255)'
      - 'rgba(255, 255, 255, 1.0)'
      - 'hsl(360, 100%, 100%)'
      - 'hsla(360, 100%, 100%, 1.0)'
      - 'transparent'
      - 'red'
      - 0xff00ff00 (0xrrggbbaa)
    
    Bad object: {
      "marginHorizontal": 8,
      "fontFamily": "regular",
      "fontSize": 15,
      "fontWeight": "normal",
      "color": "text-basic-color",
      "flexGrow": 1,
      "flexShrink": 1,
      "flexBasis": "auto"
    }
    
    Warning: Failed prop type: Invalid prop `tintColor` supplied to `Image`: text-hint-color
    Valid color formats are
      - '#f0f' (#rgb)
      - '#f0fc' (#rgba)
      - '#ff00ff' (#rrggbb)
      - '#ff00ff00' (#rrggbbaa)
      - 'rgb(255, 255, 255)'
      - 'rgba(255, 255, 255, 1.0)'
      - 'hsl(360, 100%, 100%)'
      - 'hsla(360, 100%, 100%, 1.0)'
      - 'transparent'
      - 'red'
      - 0xff00ff00 (0xrrggbbaa)
    
    Bad object: {
      "width": 20,
      "height": 20,
      "marginHorizontal": 8,
      "tintColor": "text-hint-color"
    }
    
    Warning: Failed prop type: Invalid prop `color` supplied to `Text`: text-hint-color
    Valid color formats are
      - '#f0f' (#rgb)
      - '#f0fc' (#rgba)
      - '#ff00ff' (#rrggbb)
      - '#ff00ff00' (#rrggbbaa)
      - 'rgb(255, 255, 255)'
      - 'rgba(255, 255, 255, 1.0)'
      - 'hsl(360, 100%, 100%)'
      - 'hsla(360, 100%, 100%, 1.0)'
      - 'transparent'
      - 'red'
      - 0xff00ff00 (0xrrggbbaa)
    
    Bad object: {
      "color": "text-hint-color",
      "fontSize": 12,
      "fontWeight": "400",
      "fontFamily": "regular",
      "width": "50%",
      "minWidth": 290,
      "marginBottom": 10,
      "textAlign": "center"
    }
    

    I have checked for issues with package dependencies, it seems everything is fine. I had issues with [email protected] in the past, I have tried with [email protected] (minimum required by UI Kitten), but other than multiple warnings of incorrect dependencies, I have no better result.

    I also have a metro configuration file used to apply a custom mapping, but even removing it does not help - so I think it's not the issue.

    Can you help me figure out what is wrong ?

    UI Kitten and Eva version

    | Package | Version | | ----------- | ----------- | | @eva-design/eva | 2.0.0 | | @ui-kitten/components | 5.0.0 | | metro-config | 0.60.0 | | expo | SKD 38 | | react | 16.11.0 | | react-native | 0.62 | | react-native-svg | ^9.13.6 / ^12.1.0 |

    Reviewed by CostachescuCristinel at 2020-07-09 18:15
  • 12. Adjust animation duration of ViewPager

    ๐Ÿš€ Feature Proposal

    Adjusting the animation duration of the ViewPager change index animation as a prop.

    Motivation

    For my app the 300ms feels a bit laggy and slow, if i could adjust it with a prop i could customize the ViewPager to fit my app better.

    Example

    <ViewPager
         duration={150}
    >
        {children}
    </ViewPager>
    
    Reviewed by Matyno at 2022-08-04 11:01
  • 13. Custom mapping: couldn't find DrawerItem

    Hi,

    I wanted to increase the font size and icon size of the DrawerItem by using custom mapping, but couldn't find the component in mapping.json. How come ?

    Note that I tested the custom mapping with MenuItem and it worked fine.

    "components": {
        "MenuItem": {
          "appearances": {
            "default": {
              "mapping": {
                "titleFontSize": 14,
                "iconWidth": 24,
                "iconHeight": 24,
              }
            }
          }
        },
     }
    

    Thanks in advance!

    UI Kitten and Eva version

    | Package | Version | | ----------- | ----------- | | @eva-design/eva | 2.1.1 | | @ui-kitten/components | 5.1.2 |

    Reviewed by celinedupuis at 2022-07-27 08:18
  • 14. Feat/floating label text input

    Please read and mark the following check list before creating a pull request:

    Fixes #1631

    Add Floating Label Text Input variant.

    Short description of what this resolves:

    image image

    Reviewed by joaoGabriel55 at 2022-07-26 14:13
  • 15. Button Unsupported configuration

    ๐Ÿ’ฌ Question

    UI Kitten and Eva version

    | Package | Version | | ----------- | ----------- | | @eva-design/eva | ^2.1.1 | | @ui-kitten/components | ^5.1.2 |

    Hello, Good day.

    We are pretty new on the usage of UI Kitten, upon our custom component implementations we are having the warning for UIKitten button. Both in our props and UIKitten button's props there are no variants and states properties. But the error says to check one of the following prop values.

    The code block is here: image

    image

    Looking forward to hearing from you.

    Reviewed by fatihozkir at 2022-07-22 10:34
  • 16. Text, Icon and maybe other components are not responsive.

    Text and Icon are not responsive according to different devices.

    In iPad, Text looks small and if I add responsive font size to Text then Icon beside Text doesn't looks good.

    Tablet - Normal UI image

    Tablet - UI after adding responsive text image

    Is there a way to make UI Kitten components to be responsive?

    I thought to add device type checks for styling like width, height, fontSize but it didn't feel good to me. I would like to know what is the best approach to achieve responsiveness.

    Please provide the suggestions or any resources, it will be really helpful.

    Thanks.

    Reviewed by TechSaq at 2022-07-20 03:15
  • 17. How to pass any variable to StyleService.create?

    Hello,

    Is it possible to pass any variable to StyleService.create so that we can applying conditional styling or pass the prop value to styles?

    Please check below code for more clarity.

    image

    For my use case, I want to pass the size prop to StyleService.create and give the fontSize there.

    I can achieve this using inline style but I am avoiding inline styles.

    I would also love to hear other better approaches to achieve this. Please any help is appreciated.

    Thanks.

    Reviewed by TechSaq at 2022-07-20 02:58
MonalisaUI :sparkles: React Native UI Library
MonalisaUI :sparkles: React Native UI Library

MonalisaUI React Native UI Library. MonalisaUI is a free and open source UI component library for React Native to build native mobile apps for iOS and

Jun 24, 2022
A tiny and simple helper set to make it easy to switch your styles in React Native when switching between light and dark mode. ๐ŸŒŸ

A tiny and simple helper set to make it easy to switch your styles in React Native when switching between "light" and "dark" mode

Jun 1, 2022
Blend-mode-demo-using-react-p5-wrapper - React+p5.js app demonstrating p5.js blend modes, Uses react-p5-wrapper
Blend-mode-demo-using-react-p5-wrapper - React+p5.js app demonstrating p5.js blend modes, Uses react-p5-wrapper

React + p5.js blend mode demonstrator This is a React + p5.js app which demonstr

Jan 29, 2022
Image carousel with support for fullscreen mode with swiping and pinch-to-zoom.
Image carousel with support for fullscreen mode with swiping and pinch-to-zoom.

react-native-image-carousel Image carousel with support for heading, captions, fullscreen mode, image swiping and pinch-to-zoom in fullscreen mode. Su

Jun 10, 2022
Declarative API exposing platform native touch and gesture system to React Native.

React Native Gesture Handler Declarative API exposing platform native touch and gesture system to React Native. React Native Gesture Handler provides

Aug 9, 2022
Android's Native key value storage system in React Native

React Native Shared Preferences Android's Native key value storage system in React Native Installation < RN 0.47 npm install react-native-shared-prefe

May 5, 2022
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.

react-native-styled-toast Themeable react-native toast component built using styled-components & styled-system. Features Pure JS implementation Suppor

Jul 25, 2022
React-Native image caching in file system with progressive loading for iOS and Android
React-Native image caching in file system with progressive loading for iOS and Android

React Native Image Cache on File System with Progressive Loading Inspired by: wcandillon/react-native-expo-image-cache (William Candillon) WrathChaos/

Jul 25, 2022
React-native-customizable-toast: yet another toast library based on reanimated 2 layout animations
React-native-customizable-toast: yet another toast library based on reanimated 2 layout animations

react-native-customizable-toast yet another toast library based on reanimated 2 layout animations Features Imperative API Fully Customizable Custom to

Jul 8, 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
Material Design for React Native (Android & iOS)
Material Design for React Native (Android & iOS)

Material design for React Native. reactnativepaper.com Features Follows material design guidelines Works on both iOS and Android following platform ad

Aug 4, 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
Create your own complete Web color system fast and easy
Create your own complete Web color system fast and easy

Simpler Color Create your own complete Web color system fast and easy! Color is at the heart of every UI design system. A cohesive color system enable

Jul 25, 2022
A QR Code generator for React Native based on react-native-svg and node-qrcode.
A QR Code generator for React Native based on react-native-svg and node-qrcode.

react-native-qrcode-svg A QR Code generator for React Native based on react-native-svg and javascript-qrcode. Discussion: https://discord.gg/RvFM97v F

Aug 6, 2022
React-native-squircle-skia - Skia based squircle for React Native. draws with Figma squirce style

react-native-squircle-skia Disclaimer @shopify/react-native-skia is alpha releas

Aug 7, 2022
Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.
Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | ็ฎ€ไฝ“ไธญๆ–‡ Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

Aug 5, 2022