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

Overview

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!

Comments
  • Can we run this after expo eject?

    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 help wanted 
    opened by joshbedo 25
  • How to use the screens in my own project

    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.

    help wanted 
    opened by Hashedx99 13
  • Warning: Failed prop type: Invalid props.style key `fontSize` supplied to `View`

    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.
    
    
    opened by monchopena 13
  • Build Fails with message- Failed to notify project evaluation listener

    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'

    opened by hemant07rulz 11
  • Can I ask how does String.fromCharCode(61444) work to render FontAwesome Heart Icon?

    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

    opened by jbaek7023 10
  • 80% of elements position isn't right !!

    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

    bug 
    opened by deounix 7
  • Hooks inside Class component

    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] };
        };
    }
    
    help wanted 
    opened by karthikcodes6 6
  • Web Version

    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?

    opened by rdewolff 6
  • Question about using this repo as a module

    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.

    help wanted 
    opened by s0s0s0 6
  • Not working after ejecting from expo to native

    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.

    needs info 
    opened by msameerbm 6
  • Custom Menu but loading other routes

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

    help wanted needs info 
    opened by bonbonio 6
  • Is this library in active development?

    Is this library in active development?

    💬 Question

    UI Kitten and Eva version

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

    opened by carlosjunod 0
  • fix autocomplete showcases - pick the wrong item onSelect

    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

    opened by AndreiPirovich 0
  • Use `Pressable` instead of `TouchableWithoutFeedback` for wrapping password eye icon in auth layouts.

    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

    
    
    opened by obayit 1
  • Can't run yarn ios

    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 
    
    opened by jkohlin 0
  • Error while running npm install

    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

    shrey@ub:~/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
    
    opened by shreyanshsaha 6
  • [Warning] Extending warning on SafeAreaLayout

    [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
    
    
    opened by obayit 0
Releases(v2.4.0)
Owner
Akveo
Akveo is a devoted team of engineers, consultants and designers. We'll help you envision, build, and optimize cutting-edge digital products and solutions.
Akveo
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

Deepa Pandey 31 Oct 5, 2022
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

dooboolab 2.3k Dec 31, 2022
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

Bernardo Ferrari 47 Dec 10, 2021
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

Martin Gogołowicz 11 Nov 1, 2022
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

Jakub Sobański 4 Nov 23, 2022
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

Birju Vachhani 287 Dec 27, 2022
Ml kit ocr - Plugin which provides native ML Kit OCR APIs

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

Madhav tripathi 0 Aug 3, 2022
Flutter's [FlatList] widget for React Native friendly developers

FlatList for Flutter [FlatList] widget in Flutter which will be familiar to React Native developers. Motivation While there are opinionated ways to bu

Hyo 5 Dec 21, 2022
Starter-Flutter - Starter flutter project for best architecture and seperation of code

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

Ahmed Tawfiq 13 Feb 16, 2022
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

Abu Anwar 1.4k Jan 6, 2023
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

Shubham Soni 221 Nov 9, 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

Shametha K G 4 Oct 17, 2022
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

null 12 Oct 21, 2022
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

Enes Aydoğdu 17 Dec 30, 2022
Chat messaging app for multiple users in light/dark theme with ios/android.

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

null 7 Dec 3, 2022
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

Okan 2 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

Rohan Taneja 126 Nov 10, 2022
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

null 10 Oct 26, 2022