react-native-thumbnail-selector - npm Package Compare versions

Comparing version 4.2.0 to 5.0.0

babel.config.js

 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['module:metro-react-native-babel-preset', '@babel/preset-typescript'],
 };

package.json

 {
   "name": "react-native-thumbnail-selector",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "A thumbnail selector.",
   "main": "ThumbnailSelector.js",
   "scripts": {
-    "test": "npx jest --coverage",
+    "test": "npx jest",
     "lint": "npx eslint .",
@@ -25,2 +25,4 @@ "lint:fix": "npx eslint . --fix",
     "flatlist",
+    "flat",
+    "list",
     "horizontal",
@@ -32,19 +34,20 @@ "react-native-thumbnail-selector"
   "devDependencies": {
-    "@babel/core": "7.12.9",
-    "@babel/preset-env": "7.16.5",
-    "@react-native-community/eslint-config": "2.0.0",
-    "babel-jest": "26.6.3",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "enzyme-to-json": "3.6.2",
-    "eslint": "7.14.0",
-    "eslint-config-prettier": "8.3.0",
-    "jest": "26.6.3",
-    "metro-react-native-babel-preset": "0.66.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.67.3",
-    "react-test-renderer": "17.0.2",
-    "typescript": "4.5.4"
+    "@babel/preset-typescript": "7.21.0",
+    "@jest/globals": "29.5.0",
+    "@testing-library/jest-native": "5.4.2",
+    "@testing-library/react-native": "12.0.0",
+    "@tsconfig/react-native": "2.0.3",
+    "@types/jest": "29.4.1",
+    "@types/react": "18.0.24",
+    "@types/react-test-renderer": "18.0.0",
+    "babel-jest": "29.5.0",
+    "jest": "29.5.0",
+    "metro-react-native-babel-preset": "0.73.7",
+    "react": "18.2.0",
+    "react-native": "0.71.3",
+    "react-test-renderer": "18.2.0",
+    "ts-jest": "29.0.5",
+    "ts-node": "10.9.1",
+    "typescript": "4.8.4"
   }
 }

README.md

@@ -15,8 +15,10 @@ # react-native-thumbnail-selector
 - [Usage](#usage)
-- [Props](#props)
+- [Props](/ThumbnailSelector.tsx)
 
 ## Installation
 
-- `yarn add react-native-thumbnail-selector`
-- `npm install react-native-thumbnail-selector --save`
+|      |                                                      |
+| :--: | ---------------------------------------------------- |
+| yarn | `yarn add react-native-thumbnail-selector`           |
+| npm  | `npm install react-native-thumbnail-selector --save` |
 
@@ -26,3 +28,3 @@ ## Support
 | react version | react-native version | package version |                     reason                     |
-| :-----------: | :------------------: | :-------------: | :--------------------------------------------: |
+| :-----------: | :------------------: | :-------------: | -------------------------------------------- |
 |    v16.8.0    |       v0.61.0        |     >=3.0.0     | React hooks and usage of `useWindowDimensions` |
@@ -36,48 +38,30 @@
 
-1. Import `import ThumbnailSelector from 'react-native-thumbnail-selector';`
-2. Create an array of object(s) that have image and caption properties. Example:
+```tsx
+import React from "react";
+import ThumbnailSelector from "react-native-thumbnail-selector";
 
-   ```javascript
-   const thumbnails = [
-     {
-       image: 'https://reactnative.dev/docs/assets/favicon.png',
-       caption: 'React-native',
-     },
-     {
-       image: 'https://placeimg.com/125/125/any',
-       caption: 'Any',
-     },
-   ];
-   ```
+const thumbnails = [
+  {
+    caption: "react-native",
+    imageSrc: { uri: "https://reactnative.dev/img/tiny_logo.png" },
+  },
+  {
+    caption: "Dolore do magna ullamco nisi quis.",
+    imageSrc: { uri: "https://reactnative.dev/img/tiny_logo.png" },
+  },
+];
 
-3. Add `ThumbnailSelector` component and allocate thumbnailSelectorRef prop.
+function Example(): JSX.Element {
+  // use toggle to show and hide ThumbnailSelector
+  let toggle = () => {};
 
-   ```javascript
-   let thumbnailSelectorRef = useRef();
-   <ThumbnailSelector
-     thumbnailSelectorRef={(obj) => {
-       thumbnailSelectorRef.current = obj;
-     }}
-     thumbnails={thumbnails}
-   />;
-   ```
+  return (
+    <ThumbnailSelector
+      thumbnails={thumbnails}
+      toggle={(func) => (toggle = func)}
+    />
+  );
+}
 
-4. Then to show or hide it use: `thumbnailSelectorRef.current.animate();`.
-
-## Props
-
-| Name                   |   Type   | Description                                                                              | Default                                                                       |
-| :--------------------- | :------: | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `thumbnails`           |  Array   | thumbnails for the Flatlist                                                              | `[]`                                                                          |
-| `renderThumbnail`      | Function | render the thumbnails                                                                    | undefined                                                                     |
-| `onThumbnailSelect`    | Function | invoked at thumbnail selection                                                           | `() => {}`                                                                    |
-| `thumbnailSelectorRef` | Function | passes animate function reference                                                          | `() => {}`                                                                    |
-| `initialIndex`         |  Number  | the index that is selected initially                                                     | -1                                                                            |
-| `horizontal`           | Boolean  | thumbnail stack position                                                                 | true                                                                          |
-| `active`               |  Object  | opacity and border color for thumbnail when selected                                     | `{ opacity: 1, borderColor: 'black' }`                                        |
-| `inactive`             |  Object  | opacity and border color for thumbnail when not selected                                 | `{ opacity: 0.5, borderColor: 'transparent' }`                                |
-| `thumbnailProps`       |  Object  | props passed to Image component                                                          | `{ style: { width: 125, height: 125, borderWidth: 2 } }`                      |
-| `captionProps`         |  Object  | props passed to Text component                                                           | `{style: {fontSize: 16, textAlign: 'center'}}`                                |
-| `buttonProps`          |  Object  | props passed to TouchableOpacity component                                               | `{style: {flexDirection: 'column', padding: 8}}`                              |
-| `animatedViewStyle`    |  Object  | style for Animated.View                                                                  | `{ elevation: 1, zIndex: 1,position: 'absolute', top: 0, left: 0, right: 0 }` |
-| `animationConfig`      |  Object  | style for [Animated.SpringAnimationConfig](https://reactnative.dev/docs/animated#spring) | `{ toValue: 0, duration: 600, friction: 9, useNativeDriver: false }`          |
+export default Example;
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8018078

213.67%

Lines of code

317

77.09%

Worsened metrics

Dev dependency count

17

6.25%

Number of package files

9

-30.77%

Number of lines in readme file

65

-19.75%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes