React Native UI Kitten Npm / Example / Github / Expo / Components / Eva Icons / Tutorial / Design

React Native UI Kitten Npm / Example / Github / Expo / Components / Eva Icons / Tutorial / Design :

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.

Configure Application Root

Wrap the root component of your App into ApplicationProvider component. In your App.js:

import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';

const HomeScreen = () => (
  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
    <Text category='h1'>HOME</Text>
  </Layout>
);

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

That’s it. UI Kitten is ready now. Next, you might be interested in branding the application with Eva Design System.

Leave a Comment