Feat: version 1.0.4

Author: Marcuz Larsen

README.md

@@ -23,28 +23,34 @@ Or fork the react-native-reanimated and integrate my solution noticed in the lin
 
   | Prop | Type | Description |
 | :--- | :---: | :---:|
-  | scrollY | Animated.SharedValue<number> | An outside prop that can be connected to the BottomSheet. Then it reacts to other scroll events
+  | isBottomSheetInactive | boolean | Set the bottom to an inactive state. Can be used for async handling og UX requirements
+  | initializeBottomSheetAsClosed | boolean | In some cases it might be relevant to show the background content before showing the bottomSheet
+  | contentResizeHeightTriggerOnFocusedInputField | number | At which content height should a resize in content height occour when the input field is focused?
+  | contentResizeHeightOnFocusedInputField | number | If contentResizeHeightTriggerOnFocusedInputField is met what should be the new content height size when input field is focused?
   | snapEffectDirection | Animated.SharedValue<string> | Used together with SnapEffect component. It tells the BottomSheet how to react to the effect. Please look in examples for more information
-  | snapPointBottom* | number | this prop is required for the BottomSheet to work
-  | isScrollableOffset | number | In some cases there can be a header or an outside component that will fill some of the screen. If this is the case then the BottomSheet needs to know the height dimensions of these components in order to determine scrollability correct.
-  | isStaticOffset | number | Same concept as for isScrollableOffset but instead of determine scrollability then it determins when the snappable effect will be enabled / disabled. Etc. if the background content do not overlap the BottomSheet, then there is no need for the SnapEffect. This prop helps to finetune when this effect triggers
+  | snapPointBottom* | number | This prop is required for the BottomSheet to work
+  | extraOffset | number | If you need some extra offset when it comes to the panning event hitting the footer
   | borderTopRightRadius and borderTopLeftRadius | number | Sets the border top radius'
   | backgroundColor | string | Sets the background color
   | contentComponent | node | Content component
   | footerComponent | node | Footer component
   | headerComponent | node | Header component
   | hideFooterOnCardCollapse | object | { isEnabled: boolean, offset: number }
   | hideContentOnCardCollapse | object | { isEnabled: boolean, offset: number }
-  | scrollArrowTopComponent | node | Scroll arrow top component
-  | scrollArrowBottomComponent | node | Scroll arrow bottom component
+  | scrollArrowTopComponent (currently disabled) | node | Scroll arrow top component
+  | scrollArrowBottomComponent (currently disabled) | node | Scroll arrow bottom component
   | scrollArrows = { isEnabled: boolean, fill: string, dimensions: number, topArrowOffset: number, bottomArrowOffset: number } | object | When there is no scrollArrowBottom- or top component then this object can be used for styling the scroll arrows.
   | extraSnapPointBottomOffset | number | Minor differences occours depending on the Platform. This prop helps to get the perfect snap point on all platforms
+  | keyboardAvoidBottomMargin (currently disabled) | number | An extra margin wrapper is implemented instead. The prop was used to create extra spacings when an input field is focused
+  | maxHeight | number | max height of the bottom sheet
   | header = { height: number } | object | If there is no header component then this object can be used to style the header
   | morphingArrow = { isEnabled: boolean, offset: number, fill: string } | object | As there currently is a bug on web when interpolating SVG's with reanimated, then the morphing arrow can be disabled for specific platforms using this prop
   | fadingScrollEdges = { isEnabled: boolean, androidFadingEdgeLength: number, iOSAndWebFadingEdgeHeight: number, nativeBackgroundColor: string, webBackgroundColorTop: { from: string to: string}, webBackgroundColorBottom: { from: string, to: string } | object | This prop ensures that there is a scrolling edge when the content is scrollable
+  | outerScrollEvent = { isEnabled?: boolean, scrollY?: Animated.SharedValue<number>, autoScrollTriggerLength?: number } | object | Connect an outer scrolling event that the bottom sheet should react to
+  | testID | string | add testID to the bottomSheet
+  | openBottomSheetRequest & closeBottomSheetRequest | { isEnabled: boolean; callback: ((cb) => void) => void } | Custom trigger functions to make the bottom sheet go to bottom or top
   | getCurrentConfigRequest(config) | function with callback | This function will provide the current configuration
   | onLayoutRequest(cardHeight) | function with callback | In some use cases the card height of the BottomSheet might become useful
-  | resetCardPosition(resetCallback) | function with callback | In some cases where there is no rerendering effect when changing screens etc. then this helper will ensure that the card will fold out nicely if its initially collapsed. An implementation example can be found in ./src/components/Example/NoHardRerenderingEffect.tsx
 
 </details>
 <details>

__tests__/App-test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, Button, Text } from 'react-native';
+import { render, fireEvent } from '@testing-library/react-native';
+import { useSharedValue } from 'react-native-reanimated';
+
+const ViewTestComponent: React.FC = () => {
+  const sv = useSharedValue(1);
+  return <Text testID="text">{sv.value}</Text>;
+};
+
+const TestComponentWithSV: React.FC = () => {
+  const sv = useSharedValue(1);
+
+  return (
+    <View>
+      <Text testID="text">{sv.value}</Text>
+      <Button
+        testID="button"
+        title="run"
+        onPress={(): void => {
+          sv.value = sv.value + 1;
+        }}
+      />
+    </View>
+  );
+};
+
+describe('SharedValue basic render', () => {
+  test('Contains default value', () => {
+    const { getByTestId } = render(<ViewTestComponent />);
+    const text = getByTestId('text');
+    expect(text.children[0]).toBe('1');
+  });
+
+  test('No changes value after click', () => {
+    const { getByTestId } = render(<TestComponentWithSV />);
+    const text = getByTestId('text');
+    const button = getByTestId('button');
+
+    expect(text.children[0]).toBe('1');
+    fireEvent.press(button);
+    expect(text.children[0]).toBe('1');
+    fireEvent.press(button);
+    expect(text.children[0]).toBe('1');
+  });
+});

__tests__/reanimated.test.tsx

@@ -0,0 +1 @@
+require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests();

jest-setup.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: 'react-native',
+  setupFiles: ['./jest-setup.js'],
+  testEnvironment: 'node',
+  testResultsProcessor: 'jest-sonar-reporter',
+  transformIgnorePatterns: [],
+};

jest.config.js

@@ -1,18 +1,17 @@
 {
   "name": "@marcuzgabriel/reanimated-animation-library",
   "author": "Marcuz Gabriel Larsen <marcuzgabriel@gmail.com>",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/marcuzgabriel/reanimated-animation-library.git"
-  },
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start --reset-cache",
-    "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "test:unit": "jest",
+    "test:jest:ci": "jest --coverage",
+    "test:jest:watch": "jest --watch",
+    "format": "prettier --write --list-different ./src/**",
+    "lint-diff": "eslint --ext '.js,.ts,.tsx' src/** && yarn prettier --check src/**",
     "web": "cross-env NODE_ENV=development webpack serve --config web/webpack.config.js",
     "web:clean": "rimraf web/vendor/ web/build",
     "web:build": "rimraf web/build/; cross-env NODE_ENV=production webpack --config web/webpack.config.js",
@@ -36,6 +35,7 @@
     "lib/",
     "reanimated-animation-library.d.ts",
     "README.md",
+    "!__tests__",
     "!__snapshots__",
     "!*.test.js"
   ],
@@ -62,6 +62,9 @@
     "@babel/preset-typescript": "7.13.0",
     "@babel/runtime": "^7.13.17",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@testing-library/jest-native": "^4.0.1",
+    "@testing-library/react-hooks": "^7.0.0",
+    "@testing-library/react-native": "^7.2.0",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.3.0",
     "@types/react": "^17.0.5",
@@ -70,18 +73,26 @@
     "@types/styled-components": "^5.1.9",
     "@types/styled-components-react-native": "^5.1.1",
     "@typescript-eslint/parser": "^4.22.1",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.0.6",
     "babel-loader": "8.2.1",
     "babel-plugin-module-resolver": "^3.1.3",
     "babel-plugin-styled-components": "^1.12.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "core-js": "^3.11.0",
     "cross-env": "^5.1.4",
-    "eslint": "^7.14.0",
+    "eslint": "^7.28.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-standard": "^5.0.0",
     "html-webpack-plugin": "^5.3.1",
-    "jest": "^26.6.3",
+    "jest": "^27.0.6",
+    "jest-sonar-reporter": "^2.0.0",
     "metro-react-native-babel-preset": "^0.66.0",
-    "prettier": "^2.1.1",
+    "prettier": "^2.3.1",
     "process": "^0.11.10",
     "react": "17.0.2",
     "react-dom": "^17.0.2",
@@ -96,6 +107,7 @@
     "react-test-renderer": "17.0.1",
     "style-loader": "^0.23.1",
     "styled-components": "^5.0.1",
+    "ts-jest": "^27.0.5",
     "typescript": "^4.2.3",
     "webpack": "^5.26.0",
     "webpack-cli": "^4.2.0",
@@ -104,15 +116,8 @@
   "resolutions": {
     "@types/react": "^17"
   },
-  "jest": {
-    "preset": "react-native",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/marcuzgabriel/reanimated-animation-library.git"
   }
 }