UI Kitten: Eva Icons in React Native

What is UI Kitten?

UI Kitten is React Native library which is based on Eva Design System, it's an Open Source React Native framework of UI components, it enables you to create customizable amazing UI layouts, packed with an awesome set of general-purpose UI components, giving you more time to focus on business logic and other aspects of your app while it takes care of your app's looks and the themes can be toggled in the runtime, without need to reload the application, how cool is that?

UI kitten being Eva Design System based gives us consistency and scalability in the development and design process.

UI Kitten Specifications

• 30+ general-purpose UI components with browser support for React Native Web.
• Theming System: Light, Dark and Custom.
• 480+ general-purpose SVG Eva icons.
• Eva Design System support.
• UI Kitten Moment and Date functions: Modules allowing * UI Kitten components to work with dates.
• Both JavaScript and TypeScript Supported.

Installation & Usage

New project:

npx react-native init MyApp --template @ui-kitten/template-js

If you build with TypeScript run :

npx react-native init MyApp --template @ui-kitten/template-ts

Existing project:

yarn add @ui-kitten/components @eva-design/eva react-native-svg

if you use Expo, you should use expo install react-native-svg@9.13.6 to install SVG package.

We will need to restart our bundler to make sure changes are made

yarn start --reset-cache

Setting up our application root

	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>Hello Kitten</Text>
	</Layout>
	);
	export default () => (
	<ApplicationProvider {...eva} theme={eva.light}>
	<HomeScreen />
	</ApplicationProvider>
	);

view raw App.js hosted with ❤ by GitHub

Output

Eva Icons:

Eva Icons is a pack of 480+ beautiful icons, UI kitten has it as a module for React Native applications to add it's Open Source, using Eva will enable full consistency with Eva Design System.

Eva Icons supports 4 animation types

1. Zoom.
2. Pulse.
3. Shake.
4. Infinite.

Eva Icon Installation & Usage

• Install Eva Icons: yarn add @ui-kitten/eva-icons
• Implementation:

  	import React from 'react';
  	import {StyleSheet} from 'react-native';
  	import * as eva from '@eva-design/eva';
  	import {
  	ApplicationProvider,
  	Icon,
  	IconRegistry,
  	} from '@ui-kitten/components';
  	import {EvaIconsPack} from '@ui-kitten/eva-icons';
  	const IconUsage = () => (
  	<Icon style={styles.icon} name="code-outline" fill="#ff6721" />
  	);
  	export default () => (
  	<>
  	<IconRegistry icons={EvaIconsPack} />
  	<ApplicationProvider {...eva} theme={eva.light}>
  	<IconUsage />
  	</ApplicationProvider>
  	</>
  	);
  	const styles = StyleSheet.create({
  	icon: {
  	flex: 1,
  	justifyContent: 'center',
  	alignItems: 'center',
  	},
  	});

  view raw App.js hosted with ❤ by GitHub
• Rebuild bundle: npx react-native run-android or npx react-native run-ios

Output:

Animated Icons:

	import React, {useEffect, useRef} from 'react';
	import {StyleSheet} from 'react-native';
	import {Button, Icon, Layout} from '@ui-kitten/components';
	const IconAnimationShowcase = () => {
	const zoomIconRef = useRef();
	const pulseIconRef = useRef();
	const shakeIconRef = useRef();
	const infiniteAnimationIconRef = useRef();
	useEffect(() => {
	infiniteAnimationIconRef.current.startAnimation();
	}, []);
	const renderZoomIcon = (props) => (
	<Icon
	{...props}
	ref={zoomIconRef}
	animation="zoom"
	name="maximize-outline"
	/>
	);
	const renderPulseIcon = (props) => (
	<Icon {...props} ref={pulseIconRef} animation="pulse" name="activity" />
	);
	const renderShakeIcon = (props) => (
	<Icon {...props} ref={shakeIconRef} animation="shake" name="shake" />
	);
	const renderInfiniteAnimationIcon = (props) => (
	<Icon
	{...props}
	ref={infiniteAnimationIconRef}
	animationConfig={{cycles: Infinity}}
	animation="shake"
	name="clock-outline"
	/>
	);
	const renderNoAnimationIcon = (props) => <Icon {...props} name="eye" />;
	return (
	<Layout style={styles.container}>
	<Button
	style={styles.button}
	accessoryLeft={renderZoomIcon}
	onPress={() => zoomIconRef.current.startAnimation()}>
	ZOOM
	</Button>
	<Button
	appearance="outline"
	status="success"
	style={styles.button}
	accessoryLeft={renderPulseIcon}
	onPress={() => pulseIconRef.current.startAnimation()}>
	PULSE
	</Button>
	<Button
	appearance="ghost"
	status="danger"
	style={styles.button}
	accessoryLeft={renderShakeIcon}
	onPress={() => shakeIconRef.current.startAnimation()}>
	SHAKE
	</Button>
	<Button
	appearance="ghost"
	status="info"
	style={styles.button}
	accessoryRight={renderInfiniteAnimationIcon}>
	INFINITE
	</Button>
	<Button
	appearance="ghost"
	status="warning"
	style={styles.button}
	accessoryRight={renderNoAnimationIcon}>
	NO ANIMATION
	</Button>
	</Layout>
	);
	};
	export default IconAnimationShowcase;
	const styles = StyleSheet.create({
	container: {
	flex: 1,
	justifyContent: 'space-evenly',
	flexDirection: 'row-reverse',
	flexWrap: 'wrap-reverse',
	alignContent: 'center',
	},
	button: {
	margin: 10,
	},
	});

view raw animate.js hosted with ❤ by GitHub

Root file:

	import React from 'react';
	import {StyleSheet} from 'react-native';
	import * as eva from '@eva-design/eva';
	import {
	ApplicationProvider,
	IconRegistry,
	} from '@ui-kitten/components';
	import {EvaIconsPack} from '@ui-kitten/eva-icons';
	import IconAnimationShowcase from './animate';
	export default () => (
	<>
	<IconRegistry icons={EvaIconsPack} />
	<ApplicationProvider {...eva} theme={eva.light}>
	<IconAnimationShowcase />
	</ApplicationProvider>
	</>
	);

view raw App.js hosted with ❤ by GitHub

Output:

UI Kitten has a beautiful and rich documentation, do check it out.

Thanks for reading

I hope this was helpful, don't forget to like and share this article, you can tweet at @Godswillokokon if you have any questions or drop a comment below.