removed svg default star

Author: cnilton

metro.config.js

@@ -5,30 +5,13 @@
  * @format
  */
 
-// module.exports = {
-//   transformer: {
-//     getTransformOptions: async () => ({
-//       transform: {
-//         experimentalImportSupport: false,
-//         inlineRequires: false,
-//       },
-//     }),
-//   },
-// };
-
-const {getDefaultConfig} = require('metro-config');
-
-module.exports = (async () => {
-  const {
-    resolver: {sourceExts, assetExts},
-  } = await getDefaultConfig();
-  return {
-    transformer: {
-      babelTransformerPath: require.resolve('react-native-svg-transformer'),
-    },
-    resolver: {
-      assetExts: assetExts.filter((ext) => ext !== 'svg'),
-      sourceExts: [...sourceExts, 'svg'],
-    },
-  };
-})();
+module.exports = {
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rating-component",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "description": "A simple and customizable React Native Rating Component.",
   "repository": {
@@ -15,10 +15,6 @@
     "lint": "tsc --noEmit && eslint --ext .ts,.tsx ./",
     "prettier:write": "npx prettier --write **/*.{js,jsx,ts,tsx,json} && npx prettier --write *.{js,jsx,ts,tsx,json}"
   },
-  "dependencies": {
-    "react-native-svg-transformer": "^0.14.3",
-    "react-native-svg": "^12.1.0"
-  },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
@@ -46,7 +42,6 @@
     "jest": "^25.1.0",
     "metro-react-native-babel-preset": "^0.59.0",
     "prettier": "^2.2.1",
-    "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "16.13.1",
     "typescript": "^3.8.3"
   },

src/assets/star.png

@@ -1 +1,2 @@
 declare module '*.svg';
+declare module '*.png';

src/index.d.ts

@@ -5,9 +5,11 @@ import {
   Animated,
   TouchableWithoutFeedback,
   View,
+  Image,
 } from 'react-native';
 import {styles} from './styles';
-import Star from './assets/star.svg';
+
+const Star = require('./assets/star.png');
 
 interface Props {
   /** Custom height of each star */
@@ -109,9 +111,14 @@ const Rating: FC<Props> = ({
             })}
           </View>
         ) : (
-          <Star
-            style={[index < stars.length - 1 && {marginRight: distance}]}
-            fill={rate >= star ? fillColorActive : fillColorInactive}
+          <Image
+            resizeMode="contain"
+            resizeMethod="resize"
+            source={Star}
+            style={[
+              index < stars.length - 1 && {marginRight: distance},
+              {tintColor: rate >= star ? fillColorActive : fillColorInactive},
+            ]}
             width={customWidth}
             height={customHeight}
           />