v1.3.2

.github/workflows/continuous-integration-workflow.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v1
         with:
-          node-version: '13.x'
+          node-version: '14.x'
 
       - name: Install
         run: yarn
@@ -27,4 +27,4 @@ jobs:
         run: npm run lint:tslint
 
       - name: Test
-        run: npm run ci:test
+        run: npm t -- --ci --coverage && cat ./dist/jest/coverage/lcov.info | coveralls

README.md

@@ -8,6 +8,8 @@
 
 ```bash
 npm i react-native-eva-icons
+# Using Yarn?
+# yarn add react-native-eva-icons
 ```
 
 This framework assumes you have already installed **react-native-svg**, but if not - you should [install it][link:react-native-svg:install] too.
@@ -20,7 +22,7 @@ Icons can be used by it's name using only `Icon` component.
 import { Icon } from 'react-native-eva-icons';
 
 export const GithubIcon = () => (
-  <Icon name='github' width={48} height={48}/>
+  <Icon name='github' width={48} height={48} fill='green' />
 );
 ```
 
@@ -30,7 +32,7 @@ You can also use a direct imports.
 import GithubIcon from 'react-native-eva-icons/icons/Github';
 
 export const GithubIcon = () => (
-  <GithubIcon width={48} height={48}/>
+  <GithubIcon width={48} height={48} fill='green' />
 );
 ```
 
@@ -44,7 +46,7 @@ For example, you can change icon fill color with the following code
 import { Icon } from 'react-native-eva-icons';
 
 export const GithubIcon = () => (
-  <Icon name='github' fill='red'/>
+  <Icon name='github' fill='green' />
 );
 ```
 
@@ -59,15 +61,15 @@ import { Icon } from 'react-native-eva-icons';
 
 export const GithubIcon = () => {
 
-  const iconRef = React.useRef();
+  const iconRef = React.useRef(null);
 
   const onIconPress = () => {
     iconRef.current?.startAnimation();
   };
 
   return (
     <TouchableWithoutFeedback onPress={onIconPress}>
-      <Icon ref={iconRef} animation='pulse' name='activity' />
+      <Icon ref={iconRef} animation='pulse' name='activity' fill='green' />
     </TouchableWithoutFeedback>
   );
 };

jest.config.ts

@@ -0,0 +1,7 @@
+export default {
+  transform: {
+    '^.+\\.jsx$': 'babel-jest',
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  coverageDirectory: './dist/jest/coverage',
+};

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-eva-icons",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Eva Icons for React Native",
   "repository": {
     "type": "git",
@@ -17,9 +17,10 @@
     "url": "https://github.com/artyorsh/react-native-eva-icons/issues"
   },
   "homepage": "https://github.com/artyorsh/react-native-eva-icons#readme",
-  "peerDependencies": {
-    "react": "16.5.0",
-    "react-native-svg": "^9.4.0"
+  "devDependencies": {
+    "react-native-svg": "~13.4.0"
   },
-  "devDependencies": {}
+  "peerDependencies": {
+    "react-native-svg": "*"
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-eva-icons",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "private": true,
   "description": "Eva Icons for React Native",
   "workspaces": {
@@ -11,19 +11,15 @@
   },
   "scripts": {
     "playground": "yarn --cwd ./playground",
-    "build": "tsc",
-    "generate": "ts-node ./scripts/ts-node/start.ts ./lib/icons && npm run lint:all:fix",
-    "clean:build": "rimraf ./dist",
-    "clean:lib": "rimraf ./lib/icons",
-    "lint:tslint": "tslint -c ./tslint.json ./lib/icons/**/*.{ts,tsx}",
-    "lint:prettier": "prettier ./lib/icons/**/*.{ts,tsx} --single-quote --jsx-single-quote",
-    "lint:all": "npm run lint:prettier && npm run lint:tslint",
-    "lint:all:fix": "npm run lint:prettier -- --write && npm run lint:tslint -- --fix",
-    "release:prepare": "npm run clean:build && npm run build",
-    "release": "npm run clean:build && npm run build",
-    "publish": "npm run release:prepare && npm publish --access=public ./dist/tsc-out",
-    "test": "jest",
-    "ci:test": "npm t -- --ci --coverage && cat ./dist/jest/coverage/lcov.info | coveralls"
+    "build": "npm run build:lib && tsc && npm run lint",
+    "build:lib": "ts-node ./scripts/ts-node/start.ts ./lib/icons",
+    "rebuild": "npm run clean && npm run build",
+    "clean": "rimraf ./lib/icons ./dist",
+    "lint": "npm run lint:prettier && npm run lint:tslint",
+    "lint:tslint": "tslint -c ./tslint.json ./lib/icons/**/*.{ts,tsx} --fix",
+    "lint:prettier": "prettier ./lib/icons/**/*.{ts,tsx} --single-quote --jsx-single-quote --write",
+    "publish": "npm publish --access=public ./dist/tsc-out",
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -41,31 +37,19 @@
   },
   "homepage": "https://github.com/artyorsh/react-native-eva-icons#readme",
   "devDependencies": {
-    "@types/jest": "ts3.8",
-    "@types/node": "ts3.8",
-    "@types/react-native": "ts3.8",
-    "@types/rimraf": "ts3.8",
-    "@types/stringify-object": "ts3.8",
-    "babel-jest": "24.9.0",
-    "babel-plugin-module-resolver": "^3.2.0",
-    "change-case": "^3.1.0",
+    "@types/jest": "ts4.9",
+    "@types/node": "ts4.9",
+    "@types/react-native": "ts4.9",
+    "babel-jest": "~29.0.0",
+    "change-case": "^4.1.0",
     "coveralls": "^3.0.4",
-    "eva-icons": "^1.1.3",
-    "jest": "24.9.0",
-    "prettier": "^1.17.1",
-    "react": "16.9.0",
-    "react-native": "^0.61.5",
-    "react-native-svg": "9.13.3",
-    "rimraf": "^2.6.3",
-    "stringify-object": "^3.3.0",
-    "ts-jest": "^24.0.2",
-    "ts-node": "^8.2.0",
+    "eva-icons": "~1.1.3",
+    "jest": "~29.0.0",
+    "prettier": "^2.8.0",
+    "rimraf": "^3.0.0",
+    "ts-jest": "~29.0.0",
+    "ts-node": "^10.8.0",
     "tslint": "^5.16.0",
-    "typescript": "^3.8.3"
-  },
-  "resolutions": {
-    "react": ">=16.9.0",
-    "react-native": ">=0.61.5",
-    "react-native-svg": ">=9.13.3"
+    "typescript": "~4.9.0"
   }
 }

playground/App.tsx

@@ -4,86 +4,76 @@ import {
   StyleSheet,
   Text,
   TouchableWithoutFeedback,
+  TouchableWithoutFeedbackProps,
   View,
 } from 'react-native';
 import { Icon } from 'react-native-eva-icons';
 import GithubIcon from 'react-native-eva-icons/icons/Github';
 
-export default (): React.ReactElement => {
-
-  const zoomIconRef: React.RefObject<Icon> = React.useRef();
-  const pulseIconRef: React.RefObject<Icon> = React.useRef();
-  const shakeIconRef: React.RefObject<Icon> = React.useRef();
-  const infiniteAnimationIconRef: React.RefObject<Icon> = React.useRef();
-
-  const onZoomIconPress = (): void => {
-    zoomIconRef.current.startAnimation();
-  };
+const Section: React.FC<TouchableWithoutFeedbackProps & { title: string }> = ({ title, ...props }) => (
+  <View style={styles.showcaseContainer}>
+  <Text>{title}</Text>
+    <TouchableWithoutFeedback {...props} />
+  </View>
+);
 
-  const onPulseIconPress = (): void => {
-    pulseIconRef.current.startAnimation();
-  };
+export default (): React.ReactElement => {
 
-  const onShakeIconPress = (): void => {
-    shakeIconRef.current.startAnimation();
-  };
+  const zoomIconRef = React.useRef<Icon>(null);
+  const pulseIconRef = React.useRef<Icon>(null);
+  const shakeIconRef = React.useRef<Icon>(null);
+  const infiniteAnimationIconRef = React.useRef<Icon>(null);
 
   const onInfiniteAnimationIconPress = (): void => {
-    if (infiniteAnimationIconRef.current.isAnimating()) {
-      infiniteAnimationIconRef.current.stopAnimation();
+    if (infiniteAnimationIconRef.current?.isAnimating()) {
+      infiniteAnimationIconRef.current?.stopAnimation();
     } else {
-      infiniteAnimationIconRef.current.startAnimation();
+      infiniteAnimationIconRef.current?.startAnimation();
     }
   };
 
   const onTestEndCallbackPress = (): void => {
-    zoomIconRef.current.startAnimation(() => {
-      pulseIconRef.current.startAnimation(() => {
-        shakeIconRef.current.startAnimation();
+    zoomIconRef.current?.startAnimation(() => {
+      pulseIconRef.current?.startAnimation(() => {
+        shakeIconRef.current?.startAnimation();
       });
     });
   };
 
   return (
     <View style={styles.container}>
 
-      <View style={styles.showcaseContainer}>
-        <Text>{'Default Icon\nIcons that are statically imported\nare not animateable'}</Text>
+      <Section title={'Default Icon\nIcons that are statically imported\nare not animateable'}>
         <GithubIcon {...styles.icon}/>
-      </View>
-
-      <View style={styles.showcaseContainer}>
-        <Text>{'Zoom Animation\nPress to animate. Second press to stop'}</Text>
-        <TouchableWithoutFeedback onPress={onZoomIconPress}>
-          <Icon ref={zoomIconRef} width={64} height={64} name='maximize-outline' animation='zoom' />
-        </TouchableWithoutFeedback>
-      </View>
-
-      <View style={styles.showcaseContainer}>
-        <Text>{'Pulse Animation\nPress to animate'}</Text>
-        <TouchableWithoutFeedback onPress={onPulseIconPress}>
-          <Icon ref={pulseIconRef} width={64} height={64} name='activity' animation='pulse' />
-        </TouchableWithoutFeedback>
-      </View>
-
-      <View style={styles.showcaseContainer}>
-        <Text>{'Shake Animation\nPress to animate'}</Text>
-        <TouchableWithoutFeedback onPress={onShakeIconPress}>
-          <Icon ref={shakeIconRef} width={64} height={64} name='shake' animation='shake' />
-        </TouchableWithoutFeedback>
-      </View>
-
-      <View style={styles.showcaseContainer}>
-        <Text>{'Infinite Animation\nPress to start / end animation'}</Text>
-        <TouchableWithoutFeedback onPress={onInfiniteAnimationIconPress}>
-          <Icon ref={infiniteAnimationIconRef} width={64} height={64} name='star' animationConfig={{ cycles: Infinity }} />
-        </TouchableWithoutFeedback>
-      </View>
-
-      <View style={styles.showcaseContainer}>
-        <Text>{'Completion Callback\nPress to test callback for animation end'}</Text>
-        <Button title='TEST' onPress={onTestEndCallbackPress}/>
-      </View>
+      </Section>
+
+      <Section 
+        title={'Zoom Animation\nPress to animate. Second press to stop'}
+        onPress={() => zoomIconRef.current?.startAnimation()}>
+        <Icon ref={zoomIconRef} {...styles.icon} name='maximize-outline' animation='zoom' />
+      </Section>
+
+      <Section 
+        title={'Pulse Animation\nPress to animate'}
+        onPress={() => pulseIconRef.current?.startAnimation()}>
+        <Icon ref={pulseIconRef} {...styles.icon} name='activity-outline' animation='pulse' />
+      </Section>
+
+      <Section 
+        title={'Shake Animation\nPress to animate'}
+        onPress={() => shakeIconRef.current?.startAnimation()}>
+        <Icon ref={shakeIconRef} {...styles.icon} name='shake' animation='shake' />
+      </Section>
+
+      <Section 
+        title={'Infinite Animation\nPress to animate'}
+        onPress={onInfiniteAnimationIconPress}>
+        <Icon ref={infiniteAnimationIconRef} {...styles.icon} name='star' animationConfig={{ cycles: Infinity, useNativeDriver: true }} />
+      </Section>
+
+      <Section title={'Completion Callback\nPress to test callback for animation end'}>
+        <Button title='TEST' onPress={onTestEndCallbackPress} />
+      </Section>
 
     </View>
   );
@@ -102,7 +92,8 @@ const styles = StyleSheet.create({
     marginVertical: 8,
   },
   icon: {
-    // width: 64,
-    // height: 64,
+    width: 64,
+    height: 64,
+    fill: 'black',
   },
 });

playground/app.json

@@ -3,10 +3,10 @@
     "name": "react-native-eva-icons-playground",
     "slug": "playground",
     "privacy": "public",
-    "sdkVersion": "36.0.0",
     "platforms": [
       "ios",
-      "android"
+      "android",
+      "web"
     ],
     "version": "1.0.0",
     "orientation": "portrait",