This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.

Last update: Aug 15, 2022

Kitten Tricks Eva Design System Build Status runs with expo Netlify Status

This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support. It’s completely free and Open Source. Compose the application from available screens, add backend integration and you will end up with A-grade cross-platform mobile application. The themes can be changed in the runtime, without any need of reloading the application.

Download a live Demo published on both App Store and Google Play or simply run it yourself by cloning a GitHub repo.

Kitten Material

Preview

Key features:

  • Built with TypeScript.
  • Dark and Light themes could be used simultaneously and changed on the fly.
  • 40 ready-to-use stunning screens – for any domain: e-commerce, social, fitness, etc.
  • Huge variety of customizable layouts, use “as is” or add new blocks from the UI Kit.
  • Integration with Eva Design System allows you to create mobile application staying in brand style and get clean, consistency design

Documentation:

This template is using UI Kitten components, here you can find documentation and other useful articles.

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/kittenTricks
Comments
  • 1. Can we run this after expo eject?

    I'm trying to get this project running after expo ejectand seeing some build errors on the pod files. Does anybody know how I can get this running after doing expo eject? Thanks!

    Screen Shot 2019-07-14 at 3 08 41 PM
    Reviewed by joshbedo at 2019-07-14 19:09
  • 2. How to use the screens in my own project

    i'm trying to use this kit to implement some UI mainly the article screens , there is no documentation on how to use them whatsoever , all help is appreciated.

    Reviewed by Hashedx99 at 2019-07-10 13:34
  • 3. Warning: Failed prop type: Invalid props.style key `fontSize` supplied to `View`

    Warning: Failed prop type: Invalid props.style key fontSize supplied to View

    • [x] bug report
    • [ ] feature request

    Issue description

    After:

    react-native run-android
    

    If I'm going to Auth section and select any item I obtain this warning:

    13:10:25: Warning: Failed prop type: Invalid props.style key `fontSize` supplied to `View`.
    Bad object: {
      "flexDirection": "row",
      "borderBottomWidth": 1,
      "borderBottomColor": "#0000003B",
      "marginVertical": 9,
      "backgroundColor": "#ffffff",
      "borderRadius": 100,
      "borderWidth": 1,
      "borderColor": "#0000003B",
      "fontSize": 17.63265306122449,
      "opacity": 1
    }
    Valid keys: [
      "display",
      "width",
      "height",
      "start",
      "end",
      "top",
      "left",
      "right",
      "bottom",
      "minWidth",
      "maxWidth",
      "minHeight",
      "maxHeight",
      "margin",
      "marginVertical",
      "marginHorizontal",
      "marginTop",
      "marginBottom",
      "marginLeft",
      "marginRight",
      "marginStart",
      "marginEnd",
      "padding",
      "paddingVertical",
      "paddingHorizontal",
      "paddingTop",
      "paddingBottom",
      "paddingLeft",
      "paddingRight",
      "paddingStart",
      "paddingEnd",
      "borderWidth",
      "borderTopWidth",
      "borderStartWidth",
      "borderEndWidth",
      "borderRightWidth",
      "borderBottomWidth",
      "borderLeftWidth",
      "position",
      "flexDirection",
      "flexWrap",
      "justifyContent",
      "alignItems",
      "alignSelf",
      "alignContent",
      "overflow",
      "flex",
      "flexGrow",
      "flexShrink",
      "flexBasis",
      "aspectRatio",
      "zIndex",
      "direction",
      "shadowColor",
      "shadowOffset",
      "shadowOpacity",
      "shadowRadius",
      "transform",
      "transformMatrix",
      "decomposedMatrix",
      "scaleX",
      "scaleY",
      "rotation",
      "translateX",
      "translateY",
      "backfaceVisibility",
      "backgroundColor",
      "borderColor",
      "borderTopColor",
      "borderRightColor",
      "borderBottomColor",
      "borderLeftColor",
      "borderStartColor",
      "borderEndColor",
      "borderRadius",
      "borderTopLeftRadius",
      "borderTopRightRadius",
      "borderTopStartRadius",
      "borderTopEndRadius",
      "borderBottomLeftRadius",
      "borderBottomRightRadius",
      "borderBottomStartRadius",
      "borderBottomEndRadius",
      "borderStyle",
      "opacity",
      "elevation"
    ]
        in View (at createAnimatedComponent.js:134)
        in AnimatedComponent (at TouchableOpacity.js:245)
        in TouchableOpacity (at rkTextInput.js:184)
        in RkTextInput (at login1.js:64)
        in RCTView (at View.js:112)
        in View (at login1.js:52)
    ...
    

    Other information:

    **OS, device, application version **

    Android.
    
    
    Reviewed by monchopena at 2018-01-30 12:17
  • 4. Build Fails with message- Failed to notify project evaluation listener

    I cloned the app to my local system. Ran Yarn Install successfully. But when I try to deply it to my device, Its throwing error A problem occurred starting process 'command 'security'

    Reviewed by hemant07rulz at 2017-08-01 23:48
  • 5. Can I ask how does String.fromCharCode(61444) work to render FontAwesome Heart Icon?

    I've asked to the StackOverFlow and googled it but nobody understand how it works.

    https://github.com/akveo/kittenTricks/blob/master/app/assets/icons.js Here is my actual question: https://stackoverflow.com/questions/46733687/how-to-use-string-fromcharcode-to-call-fontawesome-font-in-react

    Reviewed by jbaek7023 at 2017-10-13 23:52
  • 6. 80% of elements position isn't right !!

    Issue type

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

    • [x] bug report
    • [ ] feature request

    Issue description

    Current behavior: Text are getting padding-bottom so it's go up

    Expected behavior: Text should be viewed correctly

    Other information:

    **OS, device, application version **

    Resolution: 2340x1080
    OS: Android 9
    Device: huawei p30 pro
    

    ScreenShots:

    Screenshot_20190614_195910_com akveo kittenTricks Screenshot_20190614_195921 Screenshot_20190614_195146 Screenshot_20190614_195209 Screenshot_20190614_195658 Screenshot_20190614_195712_com akveo kittenTricks Screenshot_20190614_195723 Screenshot_20190614_195736_com akveo kittenTricks Screenshot_20190614_195753 Screenshot_20190614_195850_com akveo kittenTricks Screenshot_20190614_195904

    Reviewed by deounix at 2019-06-14 17:02
  • 7. Hooks inside Class component

    💬 Question

    Hi team, I have only one question. I just saw the source code of KittenTricks that I get to know you're using hooks inside the class component. Can anyone tell me how is it possible? I'm posting the code for your reference

    export class Theming {
       static useTheming = (themes: Record<Mapping, Record<Theme, any>>,
                           mapping: Mapping,
                           theme: Theme): [ThemeContextValue, any] => {
    
        const [currentTheme, setCurrentTheme] = React.useState<Theme>(theme);
    
        React.useEffect(() => {
          const subscription = Appearance.addChangeListener((preferences: AppearancePreferences): void => {
            const appearanceTheme: Theme = Theming.createAppearanceTheme(
              preferences.colorScheme,
              theme,
            );
            setCurrentTheme(appearanceTheme);
          });
    
          return () => subscription.remove();
        }, []);
    
        const isDarkMode = (): boolean => {
          return currentTheme === 'dark';
        };
    
        const createTheme = (upstreamTheme: Theme): any => {
          return { ...themes[mapping][currentTheme], ...themes[mapping][upstreamTheme][currentTheme] };
        };
    }
    
    Reviewed by karthikcodes6 at 2020-05-21 18:49
  • 8. Web Version

    🚀 Feature Proposal

    Is this app working on React Native Web ? If yes, it would be great to make up a CodeSandbox or a web version up and running, accessible for all to play with. If not, it would be great to make it properly render on react-native-web 💪

    Motivation

    This would help us discover, use & tests UI Kitten ❤️

    Let's get it on

    What do you think?

    Reviewed by rdewolff at 2020-04-15 13:15
  • 9. Question about using this repo as a module

    Question about using kittenTricks directly as a node_module.

    I want to bootstrap an app using this repo (typescript + expo 33 too), and I did yarn add https://github.com/akveo/kittenTricks.git. I got the following problem when running expo. Unable to resolve "@kitten/theme".

    I feel like the webpack process is having a problem understanding an alias path even tho they are defined in tsconfig in the module level. Does anyone know how to resolve this? Thanks.

    Reviewed by s0s0s0 at 2019-06-17 06:00
  • 10. Not working after ejecting from expo to native

    I need this project as react native init app structure, so i ejecting using npm run eject, after that its not working. Please make this native project of kittenTricks.

    Reviewed by msameerbm at 2018-03-27 11:22
  • 11. Custom Menu but loading other routes

    Hello,

    How to create a system where I have a series of routes loaded in my App, and then I want a separate list of routes which are in the sideMenu?

    I tried splitting the routes into the two exports, and rather than doing a clone of mainRoutes into Menu, I had fewer routes in the menuRoutes so I could pare it back.

    It's just not very clear how to avoid the scenario of routes only working when they are in the Menu system... or should I rip out the menu system and build another from scratch? (Which seems a waste as I want to use DrawerNavigator).

    Reviewed by bonbonio at 2018-02-07 12:44
  • 12. fix autocomplete showcases - pick the wrong item onSelect

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

    Short description of what this resolves:

    Autocomplete Simple Usage and Autocomplete Handle Keyboard examples pick the wrong item onSelect Issue: https://github.com/akveo/react-native-ui-kitten/issues/1628

    Reviewed by AndreiPirovich at 2022-07-12 09:22
  • 13. Use `Pressable` instead of `TouchableWithoutFeedback` for wrapping password eye icon in auth layouts.

    🐛 Bug Report

    The examples now use TouchableWithoutFeedbak which cases an error (the component works fine but still)

    To Reproduce

    Steps to reproduce the behavior: Open auth pages and observe the console output.////

    Expected behavior

    Link to runnable example or repository (highly encouraged)

    UI Kitten and Eva version

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

    Environment information

    
    
    Reviewed by obayit at 2022-06-20 12:28
  • 14. Can't run yarn ios

    🐛 Bug Report

    When I run yarn ios I get the following error: Pods-KittenTricks/Pods-KittenTricks.debug.xcconfig:1:1: error: unable to open file (in target "KittenTricks" in project "KittenTricks")

    To Reproduce

    • clone this repo
    • run yarn
    • run yarn ios

    Expected behavior

    Build the ios app and run it in the simulator

    Link to runnable example or repository (highly encouraged)

    https://github.com/akveo/kittenTricks v.2.5

    UI Kitten and Eva version

    | Package | Version | | ----------- | ----------- | | @eva-design/eva | 2.1.0 | | @ui-kitten/components | 5.1.0 |

    Environment information

    System:
        OS: macOS 12.4
        CPU: (10) x64 Apple M1 Max
      Binaries:
        Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
        Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.0/bin/yarn
        npm: 8.10.0 - ~/.nvm/versions/node/v14.17.0/bin/npm
        Watchman: 2022.03.21.00 - /usr/local/bin/watchman
      SDKs:
        iOS SDK:
          Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
      IDEs:
        Android Studio: 2021.1 AI-211.7628.21.2111.8309675
        Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
      npmPackages:
        react: 16.13.1 => 16.13.1 
        react-native: ~0.63.4 => 0.63.4 
    
    Reviewed by jkohlin at 2022-06-09 20:45
  • 15. Error while running npm install

    🐛 Bug Report

    console output

    npm ERR! code EWORKSPACESCONFIG
    npm ERR! workspaces config expects an Array
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/shrey/.npm/_logs/2022-01-08T20_38_19_312Z-debug.log
    

    file: /home/shrey/.npm/_logs/2022-01-08T20_38_19_312Z-debug.log

    0 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'install', '--legacy-peer-deps' ]
    1 info using [email protected]
    2 info using [email protected]
    3 timing config:load:defaults Completed in 1ms
    4 timing config:load:file:/usr/share/nodejs/npm/npmrc Completed in 2ms
    5 timing config:load:builtin Completed in 2ms
    6 timing config:load:cli Completed in 2ms
    7 timing config:load:env Completed in 0ms
    8 timing config:load:file:/home/shrey/Downloads/kittenTricks/.npmrc Completed in 0ms
    9 timing config:load:project Completed in 1ms
    10 timing config:load:file:/home/shrey/.npmrc Completed in 0ms
    11 timing config:load:user Completed in 0ms
    12 timing config:load:file:/etc/npmrc Completed in 1ms
    13 timing config:load:global Completed in 1ms
    14 timing config:load:cafile Completed in 0ms
    15 timing config:load:validate Completed in 0ms
    16 timing config:load:setUserAgent Completed in 0ms
    17 timing config:load:setEnvs Completed in 1ms
    18 timing config:load Completed in 8ms
    19 verbose npm-session 92a05858e8a034c7
    20 timing npm:load Completed in 17ms
    21 timing arborist:ctor Completed in 0ms
    22 timing idealTree Completed in 6ms
    23 timing command:install Completed in 21ms
    24 verbose stack TypeError: workspaces config expects an Array
    24 verbose stack     at getError (/usr/share/nodejs/@npmcli/map-workspaces/index.js:72:24)
    24 verbose stack     at getPatterns (/usr/share/nodejs/@npmcli/map-workspaces/index.js:36:11)
    24 verbose stack     at mapWorkspaces (/usr/share/nodejs/@npmcli/map-workspaces/index.js:88:20)
    24 verbose stack     at Arborist.[loadWorkspaces] (/usr/share/nodejs/@npmcli/arborist/lib/arborist/load-workspaces.js:20:30)
    24 verbose stack     at /usr/share/nodejs/@npmcli/arborist/lib/arborist/build-ideal-tree.js:297:42
    24 verbose stack     at async Arborist.buildIdealTree (/usr/share/nodejs/@npmcli/arborist/lib/arborist/build-ideal-tree.js:206:7)
    24 verbose stack     at async Promise.all (index 1)
    24 verbose stack     at async Arborist.reify (/usr/share/nodejs/@npmcli/arborist/lib/arborist/reify.js:127:5)
    24 verbose stack     at async install (/usr/share/nodejs/npm/lib/install.js:38:3)
    25 verbose cwd /home/shrey/Downloads/kittenTricks
    26 verbose Linux 5.11.0-41-generic
    27 verbose argv "/usr/bin/node" "/usr/bin/npm" "install" "--legacy-peer-deps"
    28 verbose node v12.21.0
    29 verbose npm  v7.5.2
    30 error code EWORKSPACESCONFIG
    31 error workspaces config expects an Array
    32 verbose exit 1
    

    To Reproduce

    Steps to reproduce the behavior:

    1. clone the repo
    2. cd to the repo
    3. run npm install

    Expected behavior

    npm install should download the required deps

    Link to runnable example or repository (highly encouraged)

    current repo

    UI Kitten and Eva version

    | Package | Version | | ----------- | ----------- | | @eva-design/eva | "@eva-design/eva": "^2.1.0" | | @ui-kitten/components | "@ui-kitten/components": "5.1.0" |

    Environment information

    [email protected]:~/Downloads/kittenTricks$ npx envinfo --preset react-native
    npm ERR! code EWORKSPACESCONFIG
    npm ERR! workspaces config expects an Array
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/shrey/.npm/_logs/2022-01-08T20_41_12_302Z-debug-0.log
    
    Reviewed by shreyanshsaha at 2022-01-08 20:42
  • 16. [Warning] Extending warning on SafeAreaLayout

    🐛 Bug Report

    To Reproduce

    I notices that in vs code, there is a warning on this line:

    Interface 'SafeAreaLayoutProps' cannot simultaneously extend types 'StyledComponentProps' and 'LayoutProps'.
      Named property 'appearance' of types 'StyledComponentProps' and 'LayoutProps' are not identical.ts(2320)
    

    UI Kitten and Eva version

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

    Environment information

      System:
        OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
        CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
      Binaries:
        Node: 14.17.6 - /opt/node/bin/node
        Yarn: 1.22.11 - /opt/node/bin/yarn
        npm: 8.1.4 - /opt/node/bin/npm
      npmPackages:
        react: 16.13.1 => 16.13.1 
        react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2 
      npmGlobalPackages:
        react-native-cli: 2.0.1
    
    
    Reviewed by obayit at 2021-12-21 09:33
  • 17. Is Eva Design Color Generator broken?

    💬 Question

    Sorry if its not the best place to post this but I haven't found any email address for support.

    I have been discovering Kitten UI just today and followed the Getting started tutorial... Apparently, the color generator site isn't working and as it's only step 2 of the tutorial, I thought I'd mention it here. It looks pretty cool and it's a bummer not being able to use it.

    It keeps on loading until its not even possible to pick a color.

    image

    I tried on Chrome, Edge and Safari

    Links

    https://colors.eva.design/

    https://akveo.github.io/react-native-ui-kitten/docs/guides/branding#branding

    Reviewed by YannickLeRoux at 2021-09-17 22:45

Related

Flutter chat-app UI with multiple themes & light + Dark mode.
Flutter chat-app UI with multiple themes & light + Dark mode.

Chat-App UI Only a PART of code available, for complete code ping here Features of the app - Light Mode + Dark Mode 4 different color themes - pink/te

Jul 25, 2022
react-native native module for In App Purchase.
react-native native module for In App Purchase.

Documentation Published in website. Announcement Version 8.0.0 is currently in release candidate. The module is completely rewritten with Kotlin and S

Aug 10, 2022
Experiment with dark themes based on popular apps.
Experiment with dark themes based on popular apps.

Fast Dark Theme This project is a Flutter web experiment. It allows you to prototype dark mode colors based on popular apps: WhatsApp, Twitter and Sha

Dec 10, 2021
Ml kit ocr - Plugin which provides native ML Kit OCR APIs

MLKit OCR Plugin which provides native ML Kit OCR APIs Requirements Android Set

Aug 3, 2022
Hotel-Booking-App-UI - Beautiful Hotel Booking App UI with support for dark and light mode
Hotel-Booking-App-UI - Beautiful Hotel Booking App UI with support for dark and light mode

Flutter Hotel Booking App UI with support for dark and light mode. Flutter 2.8.1

Jul 29, 2022
Shoes-Store-App-UI-Flutter - Beautiful Shoes Store App UI with support for dark and light mode
Shoes-Store-App-UI-Flutter - Beautiful Shoes Store App UI with support for dark and light mode

Flutter Shoes Store App UI with support for dark and light mode. Flutter 2.8.1 N

Jun 22, 2022
Easiest way to add support for light and dark theme in your flutter app.
Easiest way to add support for light and dark theme in your flutter app.

Adaptive Theme Easiest way to add support for light and dark theme in your Flutter app. It allows to manually set light or dark theme and also lets yo

Aug 9, 2022
Starter-Flutter - Starter flutter project for best architecture and seperation of code
Starter-Flutter - Starter flutter project for best architecture and seperation of code

Modular-Architecture Codebase CodeBase , Infrastructure and the common Layers (c

Feb 16, 2022
This repo provides a starter kit thats include Getx package.
This repo provides a starter kit thats include Getx package.

Getx_Starter This repo provides a starter kit thats include Getx package. It includes key-value databases, sample pages, and components which they are

Apr 27, 2022
A Flutter e-commerce starter kit built using ScopedModel

Flutter E-Commerce App A Flutter e-commerce starter kit built using ScopedModel for state management that allows you to view a list of paginated produ

Jun 29, 2022
Chat Messaging App Light and Dark Theme
Chat Messaging App Light and Dark Theme

Chat/Messaging App Light and Dark Theme - Flutter UI Watch it on YouTube Complete Source Code (Patreon only) Packages we are using: goole_fonts: link

Aug 8, 2022
An awesome flutter app which artistically animates light and dark mode 😍
An awesome flutter app which artistically animates light and dark mode 😍

Light Dark Toggle Made with ?? in India This flutter app is based on the design made by Matthieu Souteyrand on Dribble.He describes the design as: Bac

Aug 6, 2022
Flutter-Theme-Changer - Change theme of your app from light to dark theme and vice versa

Flutter Theme Changer - Hard Coded This is a flutter theme changer without using

Feb 13, 2022
Custom Clock App With GetX And Dark Theme & Light Mode
Custom Clock App With GetX And Dark Theme & Light Mode

Clock App ✍?? Clock App with GetX [MVC pattern] ????‍?? Clock App app is open-source app for Android & ios. It is built with Dart on top of Google's F

Aug 5, 2022
This is a message/chat app with light and dark theme options
This is a message/chat app with light and dark theme options

this is a message/chat app #ui using #flutter that runs both Android and iOS devices also has a dark and light theme. We create in total 4 screens all

Jul 31, 2022
Widget for selecting between ThemeMode.dark and ThemeMode.light
Widget for selecting between ThemeMode.dark and ThemeMode.light

ThemeModeSelector Widget I am currently working with the concept of Theme's in Flutter and I wanted to build a widget which would allow me to switch b

Sep 6, 2021
Light and Dark mode with cubit

Light and Dark mode with cubit This project will explain how we can implement the light and dark mode with Cubit state management architecture. Projec

Aug 10, 2022
Starter project for Flutter plugins willing to access native and synchronous rust code using FFI

Flutter Rust FFI Template This project is a Flutter Plugin template. It provides out-of-the box support for cross-compiling native Rust code for all a

Aug 16, 2022
Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG
Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

GTK ❤️ Flutter Unofficial implementation of GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME Human Interface Guidelines. Featur

Aug 6, 2022