Iblis React Native Undraw

React Native component library for undraw.co (1263 illustrations)

You can find all undraw illustrations here: Undraw.co

Why

Undraw is wonderful and you can use the illustrations published on unDraw for personal and commercial projects, without the need to include attribution. I always think my projects looks more professional and funnier with illustrations. As we say a picture is worth a thousand words.

I didn't find any React native library with Undraw and react-native-svg

For this project I want the following requirements :

• Written in pure Typescript
• Have up-to-date illustrations
• Compile with esNext (I don't want have all the svg in my final bundle when I use only one illustration)
• Can customize the main colors

Documentation and Basic Usage

All props can be found here

• Properties

Basic Usage

import React, { FC } from 'react';
import { StyleSheet, View } from 'react-native';
import { Svg3DModeling } from 'iblis-react-native-undraw';

export const BasicUsage: FC = () => {
  return (
    <View style={styles.container}>
      <Svg3DModeling />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

You can extend all the properties of SvgProps from react-native-svg

By default the height of the components is 200 and the width will be set to '100%'

Install

Install the library and the dependencies to your React project

npm install iblis-react-native-undraw

With expo:

expo install react-native-svg

Without expo follow the react-native-svg installation instructions.

Test

You can launch test by running npm run test

To rebuild the project and update with the new undraw design

First download all new svg

cd scripts/scrap_website/
npm install
node index.js

Then generate the typescript components

cd ../generate_components/
npx @svgr/cli --config-file .svgrrc.js --native --ext tsx --out-dir ../../src/components ../scrap_website/undraw

Then add the new components in src/index.ts

Build the library

npm run tsc

or

export NODE_OPTIONS=--max_old_space_size=4096
npm run build

Contribute

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Make the necessary changes and ensure that the tests are passing
3. Send a pull request

Todo

• Write more tests with jest

Known issues

• None for the moment

Thanks

• Undraw.co for the fantastic work and the keep going illustrations. It's just amazing!

License

Please, refer to LICENSE file