DEV Community

Cover image for React Native UI Kitten Library Basics
ashad nasim
ashad nasim

Posted on

React Native UI Kitten Library Basics

Components

1) ApplicationProvider

It is a top level Wrapper for your Application.Generraly, wrap the root level of your App

export default () => (
  <ApplicationProvider {...eva} theme={eva.light}>
    <HomeScreen />
  </ApplicationProvider>
);
Enter fullscreen mode Exit fullscreen mode

Docs for ApplicationProvider

2) Layout

Layout is just like the View element of the React Native or Container in the Native Base. Layout has some styling as per the Level of the Layout you are using, and its Background color changes as the theme of the app changes. Wrap each screen with the Layout as it will come usefull when you later on add theme to your application.
There are 4 levels of the layout and can be configured using the level props.

image

When we changes the theme of the app, then automatically the background changes to dark theme.

image

Example Code for Layout

<Layout style={styles.layout} level='1'>
      <Text>1</Text>
 </Layout>
Enter fullscreen mode Exit fullscreen mode

3) Text

The text component in the UI Kitten was same as Text in React Native with some basic styling passed via the props. We can have multiple types of text style from h1 to h6 by passing the props category.

      <Text category='h1'>H1</Text>
Enter fullscreen mode Exit fullscreen mode

image

3) Icon

If you had created your application by using ui-kitten template, then you can use the Icon otherwise you need to add an additional package.

To use Icon component, first you need to import the Icon like below

import { Icon } from '@ui-kitten/components';
Enter fullscreen mode Exit fullscreen mode

and then you need to just pass the Icon name,color and size.

<Icon
    style={styles.icon}
    fill='#8F9BB3'
    name='star'
  />
Enter fullscreen mode Exit fullscreen mode

You can also add icons to button by passing accessoryLeft or accessoryRight props to the Button component of the UI Kitten

image

<Button
      style={styles.button}
      accessoryLeft={HeartIcon}
      onPress={toggleMenu}>
      PRESS ME
 </Button>
Enter fullscreen mode Exit fullscreen mode
const HeartIcon = (props) => (
  <Icon {...props} name='heart'/>
);
Enter fullscreen mode Exit fullscreen mode

3) Button

Button can be used in the UI kitten by importing component. We can pass some of the props like appearance, status, size

image

<Button  size='medium' appearance='filled'  status='warning'>
      FILLED
</Button>
Enter fullscreen mode Exit fullscreen mode

Button Docs

More component will be dicsussed in the Next part of this blog.

Thanks for Reading.

Top comments (0)