akveo / react-native-ui-kitten

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

UI Kitten

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!

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.

UI Bakery

Need to quickly build an admin panel for your mobile app? Check out UI builder UI Bakery.

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!

react-native-ui-kitten's Issues

Image rkCardImg doesn't work

I've tried code from examples:

<RkCard>
        <View rkCardHeader>
          <Text>Header</Text>
        </View>
        <Image rkCardImg source={require('../img/sea.jpg')}/>
        <View rkCardContent>
          <Text> quick brown fox jumps over the lazy dog</Text>
        </View>
        <View rkCardFooter>
          <Text>Footer</Text>
        </View>
</RkCard>

But image doesn't shown on the screen. See screenshot

But if I set style={{width: 200, height: 200}} and remove rkCardImg attribute for Image element - it appears on the screen. Probably something wrong with processing of rkCardImg attribute

Add flow support

https://flow.org/

Check prop-types before applying styles to component

RkChoiceGroup selected value

I have a question. How link value of selected radio button in RkChoiceGroup

              <TouchableOpacity choiceTrigger onPress={() => console.log('puff')}>
                <View style={[styles.radioRow, styles.spaceBottom]}>
                  <RkChoice rkType='radio' style={styles.radio} onPress={() => console.log('puff')}/>
                  <RkText rkType='bold'>Female</RkText>
                </View>
              </TouchableOpacity>
              <TouchableOpacity choiceTrigger onPress={() => console.log('puff')}>
                <View style={styles.radioRow}>
                  <RkChoice rkType='radio' style={styles.radio} onPress={() => console.log('puff')}/>
                  <RkText rkType='bold'>Male</RkText>
                </View>
              </TouchableOpacity>
            </RkChoiceGroup>```

Focusing RkTextInput

Hi,

I tried to implement the code to focus on the next text input field but I cannot get it to work.

<RkTextInput style={InputStyles.inputContainer} labelStyle={InputStyles.label} inputStyle={InputStyles.text} label='Password' placeholder="minimum 8 characters" secureTextEntry={true} autoCapitalize='none' autoCorrect={false} returnKeyType='next' keyboardType='default' ref="password" onSubmitEditing={() => this.refs.confirmPassword.focus() }/>

Any idea on how I can focus on the next RkTextInput please?

docs: Generation of methods info works incorrect

See returns param

Change TextInput's icon size

The following code does not change the icon's size

import {RkTextInput} from 'react-native-ui-kitten';
import Icon from 'react-native-vector-icons/EvilIcons'
    <RkTextInput
      placeholder='Login'
      label={<Icon name="user" size={80}/>}
      rkType="rounded"
    />

It always appear as small icon

Failed to notify ProjectEvaluationListener.afterEvaluate(),

im getting this erros guys... :-(

I just did a clone... npm install... and react-native run-android... :-(

Packager failing to start after installation (create-react-native-app)

If you start a new project with crna then do an npm (or yarn, I tried both) installation of react-native-ui-kitten, the packager (and subsequently the app itself), stop working. The exact error message is:

`yarn start v0.27.5
$ react-native-scripts start
12:42:40 PM: Starting packager...
ERROR STARTING PACKAGER

Error: You are using npm version 5.0.4. Please use an npm version that is >= 3.0.0 and < 5.0.0.
12:42:41 PM: Error starting packager: Error: Couldn't start project. Please fix the errors and restart the project.
at /xdl/src/Project.js:1038:11
at next (native)
at step (/Users/mike/Developer/clubready/presentation-viewer/node_modules/xdl/build/Project.js:1468:191)
at /Users/mike/Developer/clubready/presentation-viewer/node_modules/xdl/build/Project.js:1468:361
error Command failed with exit code 1.`

This issue led to believe there was something wrong with my Node/NPM installation, so I completely uninstalled and re-installed the LTS version. My node is 6.11.0 and my NPM is 3.10.10 (so I have NO idea why the error message says I'm using npm 5.0.4).

Simply uninstalling the package again fixes everything, which is unfortunate because I'm unable to use this library entirely.

Multiline Text Input

can i use a multiline text input like in this docs https://facebook.github.io/react-native/docs/textinput.html ?
i use some code like this

              <RkTextInput 
              props={{multiline:true, numberOfLines:4}}
              containerStyle={{marginTop: 15}}
              label='Category'/>

it's not showing an error but the text input doesn't work.

RkModalImage is not working properly on iPad

Hello there.
First of all many thanks for your great UI Framework you created.
I created a small app for an iPad and the gallery functionality does not work there. If I click on an image the selected image is not shown but the first image in the collection is displayed.
Any help would be appreciated.
Example Code here:

`export default class Overview extends React.Component {

static navigationOptions = ({navigation, screenProps}) => ({
    header: (
        <Header navigation={navigation}/>
    )
});

state = {
    products: [],
    images: []
};

constructor(props) {
    super(props);
    this.renderItem = this._renderItem.bind(this);
    this.renderFooter = this._renderFooter.bind(this);
}

async componentDidMount() {
    const products = await api.getProductsByCategory(this.props.navigation.state.params);
    const images = products.map((p) => {
        return {uri: p.src}
    });
    this.setState({products, images});
}

_renderFooter(options) {
    if (this.state.products.length === 0) {
        return null;
    }

    const currentProduct = this.state.products[options.pageNumber - 1];

    return (
        <View style={{justifyContent: 'center'}}>
            <View style={{width: 350, justifyContent: 'space-between', alignItems: 'center'}}>
                <View>
                    <Text style={{color: 'white'}}>{currentProduct.name}</Text>
                    <Text style={{color: 'white'}}>{currentProduct.price}</Text>
                </View>
                <View>
                    <Like product={currentProduct}/>
                </View>
            </View>
        </View>
    );
}

_renderItem(product, imageIndex) {
    return (
        <TouchableOpacity
            delayPressIn={70}
            activeOpacity={0.8}
            key={imageIndex}>
            <RkCard style={styles.listItem}>
                <View rkCardHeader>
                    <View
                        style={{flexDirection: 'row', justifyContent: 'space-between', width: '100%'}}>
                        <View>
                            <RkText rkType='header4' style={{fontSize: 25, fontWeight: 'bold'}}>{product.name}</RkText>
                            <RkText rkType='secondary2 hintColor'>Grösse</RkText>
                        </View>
                        <View>
                            <Like product={product}/>
                            <RkText>{product.price.toString()}</RkText>
                        </View>
                    </View>
                </View>
                <RkModalImg
                    source={this.state.images} index={imageIndex}
                            style={{width: '100%', height: 600, resizeMode: 'cover'}} modalImgStyle={{resizeMode: 'contain'}}/>
            </RkCard>
        </TouchableOpacity>
    )
}

render() {
    if (this.state.products.length === 0) {
        return (
            <Loader/>
        )
    }

    return (
        <ScrollView>
            <View style={styles.list}>
                {this.state.products.map((product, imageIndex) => this.renderItem(product, imageIndex) )}
            </View>
        </ScrollView>
    );
}

}

const styles = RkStyleSheet.create(theme => ({
container: {
margin: 8
},
list: {
flexDirection: 'row',
flexWrap: 'wrap'
},
listItem: {
maxWidth: Dimensions.get('window').width / 3,
flex: 0.33333,
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#363636',
margin: 8
},
}));`

Facing Issue while installing

Below are the steps.. Run below commands on windows 10

1. npm install -g react-native-cli
2. npm install -g yarn
3. react-native init SignUp
4. cd SignUp
5. npm install --save react-native-ui-kitten
6. react-native run-android and getting below error
   Command run-android unrecognized. Make sure that you have run npm install and that you are inside a react-native project.

Any suggestion ?

Thank you

headerRight doesn't work.

Thanks for your wonderful work on RN UI kitten. So fat I love it.

I'm facing the issue that headerRight is not showing up.

My problem is briefly explained here with code: https://stackoverflow.com/questions/46730083/headerright-is-shown-in-a-millisecond-and-it-disappear-react-navigation

Could you confirm your headerRight component on your screen?

Thanks!

Missing StartScreen in ExploreApp

When I try to run the ExploreApp it returns StartScreen is missing

Unknown named module: './screens/StartScreen'
_require
require.js:93

index.android.js:13
loadModuleImplementation
require.js:171
guardedLoadModule
require.js:116
_require
require.js:107
global code
require-0.js:1

Regards,

RkChoice onPress ignored

Hi:

<RkChoice onPress={() => console.log('test')} />

Results in nothing being logged? Does onPress not work?

Use System Font?

This may be a silly question but how do I just have my theme use the default system font (San Francisco on iOS, and Roboto on Android)? Do I need to set that in my theme.js file? Or does that just happen automatically if I don't set any font?

can't add prop to RkButton to disable TouchableOpacity

It would be nice to be able to disable an RkButton.

RkAvoidKeyboard not working for iOS

Hello,

The RkAvoidKeyboard is not working fine on iOS. In the demo app (Chat screen) on the first click everything is fine, but if you click again on the text field he doesn't do the job.

How can I (and you) fix this?

TabNavigator & RKTabView

Do you have an example of using the TabNavigator with RKTabView?

RkModalImg works incorrectly in full screen mode

RkModalImg works incorrectly in full-screen mode in v3.0.0

Display Scrollable Grid view in RkTabView component

Please find the source code in snack.expo.io
https://snack.expo.io/@przbadu/navigationtest

Expected:

RkTabView

and ScrollView with flex grid

should work. Please let me know what I am missing here.

I have also added some description in: https://stackoverflow.com/questions/47825742/make-scrollview-work-with-rktabview

Remove 'Rk' from components

What do you think about removing "Rk" from components for simplicity like react-native base components?
NativeBase, React Native Elements use this approach

<RkText rkType="hero"></RkText>
<Text type="hero"></Text>

SideMenu open same menu multiple times

Opening the same view 2 times consecutively from the SideMenu will invoke componentWillUnmount on the current rendering view and create problems. By selecting the same view rendered from the SideMenu should simply close the SideMenu.

Demo Dashboard gives red screen

I've downloaded the demo app. Every other screen works fine, but the dashboard gives a red screen. This is a fresh clone from github and I've run "yarn install" then "react-native run-ios"

Is there something I can fix quickly on my end? I'm really liking this UI toolkit.

How to use this library?

Maybe I'm the dumbest person in the world, but I could not figure out how to use the library the same way as it was shown in the demo. In the "Documentation" section of the website shows a clear limited options compared to the many different(cool) components in the "Demo", like List Menu, Progress Bar, Walkthrough, etc...
What am I missing? Thanks in advance, great library <3 looking foward to use in my next app!

Is there a chance you would make UI Kitten for React

I really like this kit for React Native, and I was wondering if you'd do a similar component set for the web? like Bootstrap or Bulma, but in the style of UI Kitten and perhaps something in the style of http://akveo.com/ngx-admin/#/pages/dashboard but usable for React?

Just wondering, keep up the good work!

Write end to end tests

Needs to cover all existing code with tests.
https://github.com/wix/detox

Remove sidebar

Hello,

it is possible to remove the side menu of the home view in ui kitten?
Thanks for reply.

it support android platform?

I wonder if it will support andorid platform?

RkModalImage zoom and pan feature

Hi, this is a great ui library and I like it so much.
I would like to propose an enhancement.
In RkModalImage would be nice to have the opportunity to zoom an pan the image.
I apologize in advance for my bad english.

Bundling error

I am getting a bundling error, can someone please shed some light on what is causing this

Loading dependency graph, done.
Bundling index.js [development, non-minified] 0.0% (0/1), failed.
error: bundling failed: ambiguous resolution: module /Users/gouthamgandhi/Desktop/Riku/index.js tries to require react-native, but there are several files providing this module. You can delete or fix them:

• /Users/gouthamgandhi/Desktop/Riku/node_modules/react-native-drawer-layout-polyfill/node_modules/react-native/package.json
• /Users/gouthamgandhi/Desktop/Riku/node_modules/react-native-drawer-layout/node_modules/react-native/package.json
• /Users/gouthamgandhi/Desktop/Riku/node_modules/react-native-progress-bar/node_modules/react-native/package.json
• /Users/gouthamgandhi/Desktop/Riku/node_modules/react-native-svg/node_modules/react-native/package.json
• /Users/gouthamgandhi/Desktop/Riku/node_modules/react-native-tab-view/node_modules/react-native/package.json
• /Users/gouthamgandhi/Desktop/Riku/node_modules/react-native-ui-kitten/node_modules/react-native/package.json
• /Users/gouthamgandhi/Desktop/Riku/node_modules/react-native/package.json
• /Users/gouthamgandhi/Desktop/Riku/node_modules/react-navigation/node_modules/react-native/package.json
• /Users/gouthamgandhi/Desktop/Riku/node_modules/victory-native/node_modules/react-native/package.json

Ui kitten for web

Hello team,

I know you are focus on android an IOS support, but do you think make a version of ui kitten for the web?

thanks for your answer.

RkTabView question

Created by request:

I’m using RkTabView to create custom tab and I want to make the tabs changes another components view based on which tab that is selected.

I just want to ask is there any props that works like onPress in TouchableOpacity? Or is there any way for me to pass action creator (to trigger reducer) when a tab is selected?

I tried to pass action creator in title prop but that will triggers error since in always run in render function. Can you guide me the best way to do that?
Thanks.

Example of the way that I tried but fail

<RkTabView.Tab 
            title={(selected) => {
                if(selected){
                    This.props.changeTab(‘Badge');
                }
                return this.renderTab(selected, '610', 'Badges');
            }}
        >
            <Text>Train</Text>
        </RkTabView.Tab>

Render Tabs on Bottom of Screen

Is it possible to render the tabs of a RkTabView on the bottom of the screen vice the top?

Fix document: RkChoice onPress should be onChange

Document:

https://akveo.github.io/react-native-ui-kitten/#/docs/ui-components/rkchoice

I pass in onPress and it didn't work at all

so I check the source, it should be onChange

https://github.com/akveo/react-native-ui-kitten/blob/2f31d91cabaaa4420ada37e27a7f54774af0dfcb/src/components/choice/rkChoice.js

and I try onChange, it work
document are wrong, please fix it

Thanks!

Add RkSwitch component

Add RkSwith component like the one from Kitten Tricks application.

Where i can change my DEFAULT THEME to DARK THEME?

Sorry guys.. i not find in code... the CONST where i can change my default theme...

Could u help me please?

Thanks

RkAvoidKeyboard is not reacting dynamic for text inputs

Hey guys,

if I have a text input field within a RkAvoidKeyboard and focus on the upmost text input the keyboard comes up and the focused text input slides out of the visible screen. I'm now not able to see what im typing. Is there any solution for that?

best regards
kay

Demo: Side Menu -> Walkthrough -> [Get Started] = no function

where:

• Demo iPhone "Kitten Tricks"
• open Side Menu
• select Walkthrough
• tap on button "Get Startet"

what i see:

• it does nothing

what i expect:

• close modal window

Note

this error is only if come from "Side Menu" (via the hamburger icon or via navigation / side menu )

[RkChoise] contentStyle properties fail if setting 'color'

Hey guys,

first of all, thanks for your great ui library!

I want to change the content color of a clear RkChoice-Component.

<RkChoice contentStyle={{color: '#000'}} rkType='clear' selected={[TRUE|FALSE]}/>

But the color property is not set directly on the Text element rather on the enclosing View element.
The following warning appears:

Warning: Failed prop type: Invalid props.style key color supplied to View.
Bad object: {
"width": 26,
"height": 26,
"justifyContent": "center",
"alignItems": "center",
"color": "#000"
}
Valid keys: [
"display",
"width",
...

Maybe you can tell me if this is a bug of ui-kitten or if I make any mistakes.

Thanks and regards
Kay

Keyboard avoiding broken second and subsequent time a text input is focused

Hi,

Thanks so much for making this available! Your components look great and I'm eager to use them.

There seems to be a bug in your keyboard avoiding on text inputs in your Kitten Tricks iOS app. I just downloaded the latest version from the iOS App Store, 1.0.9, on iOS 11 on an iPhone 6.

Here's what happens:

1. Launch app.
2. Tap Auth from Grid Menu.
3. Tap Login V1 from Login Menu.
4. Tap Username text input field. The scrollview containing the Username field scrolls up to avoid the keyboard. Good!
5. Type something into the Username field using the onscreen keyboard.
6. Tap Login to dismiss the screen.
7. Repeat steps 3-5 again. This time, at step 4, the scrollview does NOT scroll up to avoid the keyboard, and it obscures the the Username field. This seems broken.

I do notice that in step 6, the first time around, the keyboard does not dismiss until after the login screen has been popped off the nav stack and we've returned to the main Login Menu. Not sure if that helps.

I'm happy to try stuff or attach debug logs if you can give me some hints.

I'd really love to use (and credit) your kitten UI, but I'm hesitant to do so if the keyboard avoiding behavior doesn't work consistently.

Any ideas?

Thanks, and thanks again for making this available!

Add prop-types to all components

Modifying the text in RkTextInput

Hello,
https://facebook.github.io/react-native/docs/direct-manipulation.html#setnativeprops-to-clear-textinput-value
I tried to change the text like this, but I got this error.
TypeError: this._email.setNativeProps is not a function

How do I change the text in RkTextInput?

Centering of support icons

As you can see here, the text descriptions would look much more aesthetic if they were aligned with the image.

If you disagree, no worries :) Looks like a really cool project!

strip invalid View props

I've been using ui-kitten with react-native-web with a fair amount of success, but get the following warning quite frequently:

React does not recognize the rkCardContainer prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase rkcardcontainer instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Installing ui-kitten give me npm version error

Hello,

I have node v8.0.0
npm v4.6.1

Here is what i'm doing :

create-react-native-app AwesomeProject
cd AwesomeProject
npm start
*it works, expo start*

Then
npm install --save react-native-ui-kitten
I got :

Starting packager...
***ERROR STARTING PACKAGER***

Error: You are using npm version 5.0.4. Please use an npm version that is >= 3.0.0 and < 5.0.0.
17:38:39: Error starting packager: Error: Couldn't start project. Please fix the errors and restart the project.
    at /xdl/src/Project.js:1038:11
    at Generator.next (<anonymous>)
    at step (/var/www_repo/kheyfinder_client/reactnat/node_modules/xdl/build/Project.js:1468:191)
    at /var/www_repo/kheyfinder_client/reactnat/node_modules/xdl/build/Project.js:1468:361
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:169:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-native-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vito/.npm/_logs/2017-07-02T15_38_39_075Z-debug.log

Link to complete log : https://gist.github.com/vitoo/8834670146e120a3c86fa231b5fc05da

If i do npm remove react-native-ui-kitten it works again :/

Any idea why i got this ? =/

RkButton disabled

It would be handy to add disabled implementation to RkButton component

Add linter and adopt current code

https://eslint.org/

extractNonStyleValue doesn't consider rkType

if you use extractNonStyleValue in a component that has an rkType, it will find the base value and not the one from the specified rkType.

Add hitSlop to RkButton type

If button is relatively small it's very common to set hitSlop. But if you make rkType for such buttons it would be nice to have hitSlop property too.