README
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
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
- Fork this repository to your own GitHub account and then clone it to your local device
- Make the necessary changes and ensure that the tests are passing
- 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