2.0.0

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     'react-native/react-native': true,
     node: true,
     jest: true,
+    // TODO? browser
   },
   rules: {
     'react-native/no-unused-styles': 'error',

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pre-commit

.npmignore

@@ -2,12 +2,11 @@ src
 assets
 __tests__
 coverage
+.husky
 .jest
-
 tsconfig.json
 .travis.yml
 .prettierrc
-
 .eslintrc.js
 global.d.ts
 yarn-error.log

README.md

@@ -1,11 +1,12 @@
-# [native-color-picker](https://github.com/native-ly/native-color-picker)
+# [Native Color Picker](https://github.com/native-ly/native-color-picker)
 
 [![NPM version](https://img.shields.io/npm/v/native-color-picker?style=flat-square)](https://www.npmjs.com/package/native-color-picker)
 [![NPM downloads](https://img.shields.io/npm/dm/native-color-picker?style=flat-square)](https://www.npmjs.com/package/native-color-picker)
 [![NPM license](https://img.shields.io/npm/l/native-color-picker?style=flat-square)](https://www.npmjs.com/package/native-color-picker)
 [![run in expo snack](https://img.shields.io/badge/Run%20in%20Snack-4630EB?style=flat-square&logo=EXPO&labelColor=FFF&logoColor=000)](https://snack.expo.io/@jbiesiada/native-color-picker)
 [![Codecov](https://img.shields.io/codecov/c/github/native-ly/native-color-picker?style=flat-square)](https://codecov.io/gh/native-ly/native-color-picker)
-[![Travis](https://img.shields.io/travis/com/native-ly/native-color-picker/main?style=flat-square)](https://travis-ci.com/native-ly/native-color-picker)
+[![Travis](https://img.shields.io/travis/com/native-ly/native-color-picker/main?style=flat-square)](https://app.travis-ci.com/github/native-ly/native-color-picker)
+[![Bundle size](https://flat.badgen.net/packagephobia/install/native-color-picker)](https://packagephobia.com/result?p=native-color-picker)
 
 <p align="center">
   <img width="420" src="https://raw.githubusercontent.com/native-ly/native-color-picker/main/assets/preview.jpg" alt="Native Color Picker">
@@ -54,31 +55,31 @@ $ yarn add expo-linear-gradient
 
 ## Getting Started
 
-**• Connect libary with project using ES6 import:**
+**Connect the library with the project using ES6 import:**
 
 ```js
 import NativeColorPicker from 'native-color-picker'
 ```
 
 ## Options
 
-| Name                    | Type                  | Default                                          | Description                                          | Available options                       |
-| ----------------------- | --------------------- | ------------------------------------------------ | ---------------------------------------------------- | --------------------------------------- |
-| **colors**              | string[]              | `[]`                                             | Colors to display in a color picker                  | e.g.: `['#f96204', '#43d8c9']`          |
-| **columns**             | number                | `5`                                              | Number of columns in color list (only vertical)      | Number of columns                       |
-| **gradient**            | boolean               | `false`                                          | Enable or disable gradient layer over the color item | `true` - enable, `false` - disable      |
-| **horizontal**          | boolean               | `false`                                          | Enable or disable horizontal scroll direction        | `true` - horizontal, `false` - vertical |
-| **itemSize**            | number                | `44`                                             | Size (`width` & `height`) of list item               | Size of list item                       |
-| **onSelect**            | function              | `item => item`                                   | Select color item                                    | e.g.: `elem => { /* code */ }`          |
-| **selectedColor**       | string                | ` ` | Marked item | Color from the list `colors` |
-| **shadow**              | boolean               | `false`                                          | Display shadow for list items                        | `true` - enable, `false` - disable      |
-| **sort**                | boolean               | `false`                                          | Order colors by perception                           | `true` - enable, `false` - disable      |
-| **itemProps**           | TouchableOpacityProps | `{}`                                             | Item props                                           | TouchableOpacity props                  |
-| **itemStyle**           | StyleProps<ViewStyle> | `{}`                                             | Styles for Item                                      | View styles                             |
-| **markerProps**         | ViewProps             | `{}`                                             | Item props                                           | View props                              |
-| **markerStyle**         | StyleProps<ViewStyle> | `{}`                                             | Styles for Item                                      | View styles                             |
-| **linearGradientProps** | LinearGradientProps   | `{}`                                             | Gradient props                                       | LinearGradientProps props               |
-| **linearGradientStyle** | StyleProps<ViewStyle> | `{}`                                             | Styles for Gradient                                  | View styles                             |
+| Name                    | Type                  | Default        | Description                                          | Available options                       |
+| ----------------------- | --------------------- | -------------- | ---------------------------------------------------- | --------------------------------------- |
+| **colors**              | string[]              | `[]`           | Colors to display in a color picker                  | e.g.: `['#f96204', '#43d8c9']`          |
+| **columns**             | number                | `5`            | Number of columns in color list (only vertical)      | Number of columns                       |
+| **gradient**            | boolean               | `false`        | Enable or disable gradient layer over the color item | `true` - enable, `false` - disable      |
+| **horizontal**          | boolean               | `false`        | Enable or disable horizontal scroll direction        | `true` - horizontal, `false` - vertical |
+| **itemSize**            | number                | `44`           | Size (`width` & `height`) of list item               | Size of list item                       |
+| **onSelect**            | function              | `item => item` | Select color item                                    | e.g.: `elem => { /* code */ }`          |
+| **selectedColor**       | string                | ` `            | Marked item                                          | Color from the list `colors`            |
+| **shadow**              | boolean               | `false`        | Display shadow for list items                        | `true` - enable, `false` - disable      |
+| **sort**                | boolean               | `false`        | Order colors by perception                           | `true` - enable, `false` - disable      |
+| **itemProps**           | TouchableOpacityProps | `{}`           | Item props                                           | TouchableOpacity props                  |
+| **itemStyle**           | StyleProps<ViewStyle> | `{}`           | Styles for Item                                      | View styles                             |
+| **markerProps**         | ViewProps             | `{}`           | Item props                                           | View props                              |
+| **markerStyle**         | StyleProps<ViewStyle> | `{}`           | Styles for Item                                      | View styles                             |
+| **linearGradientProps** | LinearGradientProps   | `{}`           | Gradient props                                       | LinearGradientProps props               |
+| **linearGradientStyle** | StyleProps<ViewStyle> | `{}`           | Styles for Gradient                                  | View styles                             |
 
 ## License
 

__tests__/index.test.tsx

@@ -1,21 +1,22 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react-native";
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
 
-import NativeColorPicker from "../src";
+import NativeColorPicker from '../src'
 
-jest.mock("native-icons", () => "Icon");
-jest.mock("react-native/Libraries/Animated/src/NativeAnimatedHelper");
+jest.mock('native-icons', () => 'Icon')
+jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper')
 
-describe("NativeColorPicker", () => {
-  const colors = ["#d73964", "#d23440", "#db643a", "#e88334"];
+// TODO
+describe('NativeColorPicker', () => {
+  const colors = ['#d73964', '#d23440', '#db643a', '#e88334']
 
-  it("should render colors grid with default props", () => {
-    const { toJSON } = render(<NativeColorPicker colors={colors} />);
+  it('should render colors grid with default props', () => {
+    const { toJSON } = render(<NativeColorPicker colors={colors} />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
-  it("should render colors grid with custom props", () => {
+  it('should render colors grid with custom props', () => {
     // jest.mock('Platform', () => {
     //   const Platform = require.requireActual('Platform');
 
@@ -29,72 +30,72 @@ describe("NativeColorPicker", () => {
       gradient: true,
       shadow: true,
       columns: 4,
-    };
+    }
 
     const { toJSON, getAllByTestId } = render(
-      <NativeColorPicker colors={colors} {...customProps} />,
-    );
+      <NativeColorPicker colors={colors} {...customProps} />
+    )
 
-    expect(toJSON()).toMatchSnapshot();
-    expect(getAllByTestId("item-gradient").length).toBe(4);
-  });
+    expect(toJSON()).toMatchSnapshot()
+    expect(getAllByTestId('item-gradient').length).toBe(4)
+  })
 
-  it("should render horizontal colors list with fade marker", () => {
+  it('should render horizontal colors list with fade marker', () => {
     const customProps = {
       horizontal: true,
       // markerProps: {
       //   size: 10,
       //   // markerType: 'fade'
       //   // markerDisplay: 'adjust',
       // },
-    };
+    }
 
     const { toJSON } = render(
-      <NativeColorPicker colors={colors} {...customProps} />,
-    );
+      <NativeColorPicker colors={colors} {...customProps} />
+    )
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it.each([
     {
       markerProps: {
         // markerType: 'fade'
-        markerDisplay: "#fff",
-        animate: "scale",
+        markerDisplay: '#fff',
+        animate: 'scale',
       },
     },
     {
       markerProps: {
-        markerType: "fade",
+        markerType: 'fade',
       },
     },
     {
       markerProps: {
-        markerType: "icon",
-        markerDisplay: "adjust",
-        animate: "rotate",
+        markerType: 'icon',
+        markerDisplay: 'adjust',
+        animate: 'rotate',
       },
     },
-  ])("should select color items", (customProps) => {
+  ])('should select color items', (customProps) => {
     // TODO handlePress?
-    const onPress = jest.fn();
+    const onPress = jest.fn()
 
     const { getAllByTestId } = render(
       <NativeColorPicker
         colors={colors}
         onSelect={onPress}
         selectedColor={colors[0]}
         {...customProps}
-      />,
-    );
+      />
+    )
 
-    fireEvent.press(getAllByTestId("color-item")[1]);
-    fireEvent.press(getAllByTestId("color-item")[2]);
+    fireEvent.press(getAllByTestId('color-item')[1])
+    fireEvent.press(getAllByTestId('color-item')[2])
 
-    expect(onPress).toBeCalledWith(colors[1]);
-    expect(onPress).toBeCalledWith(colors[2]);
-  });
+    expect(onPress).toBeCalledWith(colors[1])
+    expect(onPress).toBeCalledWith(colors[2])
+  })
 
   // it('should select color items', () => {
   //   const onPress = jest.fn()
@@ -126,4 +127,4 @@ describe("NativeColorPicker", () => {
   //   expect(onPress).toBeCalledWith(colors[1])
   //   expect(onPress).toBeCalledWith(colors[2])
   // })
-});
+})

global.d.ts

@@ -1 +1,2 @@
+// TODO?
 declare module 'color-sort'

package.json

@@ -7,16 +7,19 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "prepack": "npm run clean && npm run prettier && npm run lint && npm run build",
+    "prepack": "npm run prettier && npm run lint && npm run build",
     "clean": "rimraf lib/*",
     "build": "tsc",
+    "prebuild": "npm run clean",
     "test": "jest --coverage",
     "watch": "npm run build -- --watch",
     "watch:test": "npm run test -- --watch",
     "lint": "eslint --fix 'src/**/*.{tsx,ts}'",
     "prettier": "prettier --write 'src/**/*.{tsx,ts}'",
     "commit": "git-cz",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "prepare": "husky install",
+    "pre-commit": "lint-staged"
   },
   "repository": {
     "type": "git",
@@ -38,37 +41,38 @@
   "dependencies": {
     "color": "^3.1.3",
     "color-sort": "^0.0.1",
-    "expo-linear-gradient": "^8.3.1",
-    "native-icons": "^1.1.0",
-    "react-native-linear-gradient": "^2.5.6"
+    "expo-linear-gradient": "^10.0.3",
+    "native-icons": "^1.3.0",
+    "react-native-linear-gradient": "^2.5.6",
+    "react-native-reanimated": "^2.2.4"
   },
   "devDependencies": {
-    "@testing-library/jest-native": "^3.4.2",
-    "@testing-library/react-native": "^7.0.2",
-    "@types/color": "^3.0.1",
-    "@types/jest": "^26.0.14",
-    "@types/react": "^16.9.49",
-    "@types/react-native": "^0.63.22",
-    "@types/react-native-vector-icons": "^6.4.6",
-    "@typescript-eslint/parser": "^4.2.0",
-    "babel-jest": "^26.3.0",
+    "@testing-library/jest-native": "^4.0.4",
+    "@testing-library/react-native": "^8.0.0",
+    "@types/color": "^3.0.2",
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.34",
+    "@types/react-native": "^0.66.3",
+    "@types/react-native-vector-icons": "^6.4.9",
+    "@typescript-eslint/parser": "^5.3.1",
+    "babel-jest": "^27.3.1",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^7.9.0",
-    "eslint-config-prettier": "^6.12.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-react-native": "^3.9.1",
-    "husky": "^4.3.0",
-    "jest": "^26.4.2",
-    "lint-staged": "^10.4.0",
-    "prettier": "^2.1.2",
-    "react": "^16.13.1",
-    "react-native": "^0.62.1",
-    "react-test-renderer": "^16.13.1",
-    "semantic-release": "^17.1.2",
-    "ts-jest": "^26.4.0",
-    "typescript": "^4.0.3"
+    "eslint": "^8.2.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react-native": "^3.11.0",
+    "husky": "^7.0.4",
+    "jest": "^27.3.1",
+    "lint-staged": "^11.2.6",
+    "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-native": "^0.66.3",
+    "react-test-renderer": "^17.0.2",
+    "semantic-release": "^18.0.0",
+    "ts-jest": "^27.0.7",
+    "typescript": "^4.4.4"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -79,11 +83,6 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "src/**/*.{tsx,ts}": [
       "npm run prettier",

src/components/Gradient.tsx

@@ -1,21 +1,22 @@
-import React, { memo } from 'react'
+import React from 'react'
 import { StyleSheet } from 'react-native'
 
 import { LinearGradient } from '../imports'
 
+// TODO
 import { GradientProps } from '../interfaces'
 
-export const Gradient = memo<GradientProps>(({ style, size, ...props }) => (
+export const Gradient = ({ style, size, ...props }: GradientProps) => (
   <LinearGradient
     {...props}
     style={StyleSheet.flatten([style, gradientStyles({ size })])}
   />
-))
+)
 
 const gradientStyles = StyleSheet.create(
   ({ size }: Pick<GradientProps, 'size'>) => ({
     ...StyleSheet.absoluteFillObject,
-    borderRadius: size / 2,
+    borderRadius: size / 2, // TODO?
     zIndex: -1,
   })
 )

src/components/InsetShadow.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+
+// TODO test
+// TODO add custom props
+export const InsetShadow = () => {
+  return <View style={styles.container} />
+}
+
+// TODO
+const styles = StyleSheet.create({
+  container: {
+    margin: 10,
+    flex: 1,
+    backgroundColor: 'transparent',
+    borderColor: 'white',
+    borderWidth: 30,
+    overflow: 'hidden',
+    shadowColor: 'black',
+    shadowRadius: 10,
+    shadowOpacity: 1,
+  },
+})