diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..fc47808
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+resources
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index 914e13e..06bc47d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,76 +1,27 @@
module.exports = {
+ "root": true,
"env": {
"es2021": true,
- "node": true
+ "node": true,
+ "react-native/react-native": true // *2
},
"extends": [
- "eslint:recommended",
- "plugin:react/recommended",
- "plugin:react-hooks/recommended",
- "plugin:@typescript-eslint/recommended",
- "plugin:@typescript-eslint/recommended-requiring-type-checking",
+ "plugin:@typescript-eslint/recommended-requiring-type-checking", // *1
+ "eslint-config-gev/react-native", // https://github.com/SrBrahma/eslint-config-gev
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
- "ecmaFeatures": {
- "jsx": true
- },
+ "tsconfigRootDir": __dirname, // *1
+ "project": ['./tsconfig.json'], // *1
"ecmaVersion": 12,
"sourceType": "module",
- "tsconfigRootDir": __dirname,
- "project": "./tsconfig.json",
+ "ecmaFeatures": { // *2
+ "jsx": true
+ }
},
- "plugins": [
- "react",
- "react-native",
- "@typescript-eslint"
- ],
"rules": {
- "indent": ["warn", 2],
- "linebreak-style": ["error", "unix"],
- "quotes": ["warn", "single", { "allowTemplateLiterals": true }],
- "semi": ["warn", "always"],
- "comma-spacing": ["warn"],
- "object-curly-spacing": ["warn", "always"], // Spacing { beforeAndAfter }
-
- // "no-prototype-builtins": "off", // Dont allow obj.hasOwnProperty https://eslint.org/docs/rules/no-prototype-builtins
-
- "react/prop-types": "off",
- "react/display-name": "off",
-
- "@typescript-eslint/ban-ts-comment": "off", // Else would complain about // @ts-ignore in .js files. If I didn't need this ts-comment, this could be removed
- "@typescript-eslint/no-inferrable-types": "off", // ?
- "@typescript-eslint/no-explicit-any": "off",
- "@typescript-eslint/explicit-module-boundary-types": "off", // ?
- "@typescript-eslint/no-non-null-assertion": "off", // ?
-
- // TS doesn't allow "== false" yet (4.1.2), so, this rule isn't good enough to test for falsy values.
- // // "@typescript-eslint/strict-boolean-expressions": ["warn", {
- // // allowNullableBoolean: true,
- // // }],
-
- "@typescript-eslint/no-empty-interface": "off",
- "@typescript-eslint/no-unsafe-assignment": "off", // ?
-
-
- "@typescript-eslint/no-floating-promises": "off",
-
- // This wasn't allowing different data types in `templates string`. Why the fuck not?
- "@typescript-eslint/restrict-template-expressions": "off",
-
- // wasn't allowing eg setTimeout(async () =>...). Any good reason to keep it on? https://stackoverflow.com/a/63488201/10247962
- "@typescript-eslint/no-misused-promises": "off",
-
- // Allow acessing props of any type var. Useful for if ((X as any).Y), to check if it exists.
- "@typescript-eslint/no-unsafe-member-access": "off",
-
- // To allow the return as any. I know what I am doing!
- "@typescript-eslint/no-unsafe-return": "off",
-
- // To allow calling new (Intl as any).RelativeTimeFormat(...), as TS doesn't know it yet.
- "@typescript-eslint/no-unsafe-call": "off",
-
- // Wasn't simply allowing `const a = x.y.functionA`.
- "@typescript-eslint/unbound-method": "off"
}
-};
\ No newline at end of file
+};
+
+// [*1] - https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md#getting-started---linting-with-type-information
+// [*2] - https://github.com/Intellicode/eslint-plugin-react-native#configuration
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 5279294..6daa654 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
-/node_modules
+node_modules
/lib
.vscode
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 14c0d3f..e1bb5b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,25 @@
-### 1.1.1 - March 23th 2021
+### 3.0.0 - 2021/07/17
+
+* **Shadow with automatic size is applied on the same render!**. Lib rewritten to allow it. 1 month of pure suffering and despair trying to find new html/svg/react hacks to do what I wanted. :') #7, #8, #9,
+* Now it works on Web (React Native Web / Expo)
+* Added `getChildRadius` prop.
+* Added `paintInside` prop.
+* Added `viewStyle` prop.
+* Removed `contentViewStyle` prop.
+* Changed default `startColor` from `'#00000010'` to `'#00000020'`, so it's more noticeable when first trying the lib.
+* Looks like the pixel gaps/overlaps are all solved. It was a very long and frustrating marathon to achieve this!
+* [code] Added a partial README filler, using [this](https://github.com/tgreyuk/typedoc-plugin-markdown/issues/59#issuecomment-867300957) (mine!)
+* Added Sandbox! Used it a lot while developing this lib.
+* Changed minor functionalities
+* Minor fixes
+
+> We are calling this 3.0.0 because 2.0.0 would be ambiguous. One could think that the 1.0.0 is a reference to the original react-native-shadow package and the 2.0.0 would just be the react-native-shadow-2.
+
+
+### 1.1.1 - 2021/03/23
* Fixed sides shadow position when not having top/left side shadow.
-## 1.1.0 - March 6th 2021
+## 1.1.0 - 2021/03/06
* Added offset
\ No newline at end of file
diff --git a/README.MD b/README.MD
deleted file mode 100644
index 5406e6c..0000000
--- a/README.MD
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
-[](http://makeapullrequest.com)
-[](http://www.typescriptlang.org/)
-[](https://www.npmjs.com/package/react-native-shadow-2)
-[](https://www.npmjs.com/package/react-native-shadow-2)
-
-
-
-# react-native-shadow-2
-
-[react-native-shadow](https://github.com/879479119/react-native-shadow) is dead for years. This one is an improved version with more functionalities, Typescript support and written from scratch.
-
-It solves the problem of React Native not having the same shadow appearence for Android and iOS. It also works on old Android versions, where `elevation` wasn't available.
-
-The [ethercreative/react-native-shadow-generator](https://ethercreative.github.io/react-native-shadow-generator) website won't give you very similar results between the two platforms, for the reasons I described [here](https://github.com/ethercreative/react-native-shadow-generator/issues/2#issuecomment-738130722), when I started to think about the solution to this shadow issue.
-
-**2021/05/01**: You should also check the [react-native-neomorph-shadows](https://github.com/tokkozhin/react-native-neomorph-shadows) package before deciding to use this one. You may prefer using it, looks really great! It doesn't support expo though, as my package does.
-
-
-## Installation
-
-You will need to install [react-native-svg](https://github.com/react-native-svg/react-native-svg). For RN > 0.60, it's just `npm i react-native-svg` / `yarn add react-native-svg`.
-
-Then, install this package:
-
-`npm i react-native-shadow-2` / `yarn add react-native-shadow-2`
-
-
-## Usage
-
-```js
-import { Shadow } from 'react-native-shadow-2';
-
-
- ... // your component
-
-```
-
-### Properties
-
-* `startColor` (string, default: `'#00000010'`)
-* `finalColor` (string, default: `'#00000000' (= 'transparent')`)
-* `distance` (number, default: `10`) - How far the shadow will go from the borders
-* `radius` (number, default: `0`) - The border radius of your component. You may specify each corner value.
-* `offset` ([x: number, y: number], default: `[0, 0]`)
-* `size` ([width: number, height: number]) - It isn't required, as it is with react-native-shadow. If you do not pass the size, it will automatically get your component size with onLayout and on the next render apply the shadow properly. So, if not declaring the size, it won't have a shadow on the first render. Looks like I found a way to apply it on the first render automatically, but requires further research. You may open an issue about it so I may feel more motivated to do it hehe
-
-There are other optional properties available that will be added here in this README later. Intellisense will be your guide for now.
-
-## Roadmap
-
-* Fix visual error when setting too high radiuses
-* Offset with transparent content, without shadow below the content.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..066d2cc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,123 @@
+
+
+
+
+
+[](http://makeapullrequest.com)
+[](http://www.typescriptlang.org/)
+[](https://www.npmjs.com/package/react-native-shadow-2)
+[](https://www.npmjs.com/package/react-native-shadow-2)
+
+
+
+
+# react-native-shadow-2
+
+[react-native-shadow](https://github.com/879479119/react-native-shadow) is dead for years. This one is an improved version with more functionalities, Typescript support and written from scratch.
+
+It solves the old React Native issue of not having the same shadow appearence and implementation for Android, iOS and Web.
+
+The [ethercreative/react-native-shadow-generator](https://ethercreative.github.io/react-native-shadow-generator) website won't give you very similar results between the two platforms, for the reasons I described [here](https://github.com/ethercreative/react-native-shadow-generator/issues/2#issuecomment-738130722), when I started to think about the solution to this shadow issue.
+
+Compatible with Android, iOS and Web. And Expo!
+
+Implementation: [./src/index.tsx](./src/index.tsx)
+
+
+## 🥳 New version 3.0.0! (2021-07-17) 🥳
+
+### The long waited and most wanted feature is out!
+
+Before this new version, it was required to manually enter your component size or leave it as undefined and the integrated onLayout would get its size and apply the shadow on the next render.
+
+Now, **the shadow is applied on the same render without entering its size!**
+
+
+## 💿 Installation
+
+### 1. First install [react-native-svg](https://github.com/react-native-svg/react-native-svg).
+
+### 2. Then install react-native-shadow-2:
+
+```bash
+npm i react-native-shadow-2
+# or
+yarn add react-native-shadow-2
+```
+
+
+## 📖 Usage
+
+### Structure
+```tsx
+import { Shadow } from 'react-native-shadow-2';
+
+
+ {/* Your component */}
+
+```
+
+### Basic
+```tsx
+
+
+ 🙂
+
+
+```
+
+
+
+### Advanced
+```tsx
+
+
+ 🤯
+
+
+```
+
+
+
+## Properties
+
+| Property | Type | Default | Description
+ | --- | --- | --- | ---
+| **startColor** | `string` | `'#00000020'` | The color of the shadow when it's right next to the given content, leaving it.` | `undefined` | The style of the view that contains the shadow and your child component.
+| **size** | `[width: number, height: number]` | `undefined` | If you don't want the 2 renders of the shadow (first applies the relative positioning and sizing that may contain a quick pixel gap, second uses exact pixel size from onLayout) or you are having noticeable gaps/overlaps on the first render,
+
+[](http://makeapullrequest.com)
+[](http://www.typescriptlang.org/)
+[](https://www.npmjs.com/package/react-native-shadow-2)
+[](https://www.npmjs.com/package/react-native-shadow-2)
+
+
+
+
+# react-native-shadow-2
+
+[react-native-shadow](https://github.com/879479119/react-native-shadow) is dead for years. This one is an improved version with more functionalities, Typescript support and written from scratch.
+
+It solves the old React Native issue of not having the same shadow appearence and implementation for Android, iOS and Web.
+
+The [ethercreative/react-native-shadow-generator](https://ethercreative.github.io/react-native-shadow-generator) website won't give you very similar results between the two platforms, for the reasons I described [here](https://github.com/ethercreative/react-native-shadow-generator/issues/2#issuecomment-738130722), when I started to think about the solution to this shadow issue.
+
+Compatible with Android, iOS and Web. And Expo!
+
+Implementation: [./src/index.tsx](./src/index.tsx)
+
+
+## 🥳 New version 3.0.0! (2021-07-15) 🥳
+
+### The long waited and most wanted feature is out!
+
+Before this new version, it was required to manually enter your component size or leave it as undefined and the integrated onLayout would get its size and apply the shadow on the next render.
+
+Now, **the shadow is applied on the same render without entering its size!**
+
+
+## 💿 Installation
+
+### 1. First install [react-native-svg](https://github.com/react-native-svg/react-native-svg).
+
+### 2. Then install react-native-shadow-2:
+
+```bash
+npm i react-native-shadow-2
+# or
+yarn add react-native-shadow-2
+```
+
+
+## 📖 Usage
+
+### Structure
+```tsx
+import { Shadow } from 'react-native-shadow-2';
+
+
+ {/* Your component */}
+
+```
+
+### Basic
+```tsx
+
+
+ 🙂
+
+
+```
+
+
+
+### Advanced
+```tsx
+
+
+ 🤯
+
+
+```
+
+
+
+## Properties
+
+{{shadowProperties}}
+
+## 🐛 Notes / Known Issues
+
+* Setting (or obtaining from the child) a too high `radius` (`> size/2`) will mess the shadow.
+
+* **`[Mobile]`** The shadow, since v3, will be applied on the first render even if no size is passed to it, as we now (v3) magically use relative positions and sizings.
+There may be a pixel wide gap on the first render on the right and bottom SVG parts connections, due to how React Native and react-native-svg handles percentage sizings and roundings. It's fixed automatically
+on the following render, as this lib will get the exact pixel size of the child component using onLayout.
+This gap won't always happen and it's usually hardly noticeable.
+If you don't want to this to happen at all, you can use the `size` property.
+
+* **`[Web]`** If your child have a decimal size, there may be a pixel wide gap between the child and the right/bottom shadow, as browsers usually allow decimal sizings and will blur the last pixel line/row.
+You can either fix it by using `paintInside` prop to hide the possible imperfections or use the `size` property to avoid it from happening.
+
+## 📰 [Changelog](./CHANGELOG.md)
+
+## 🦉 Alternatives
+* [react-native-neomorph-shadows](https://github.com/tokkozhin/react-native-neomorph-shadows) looks great and has different possibilities. It doesn't support Expo though, as `react-native-shadow-2` does.
\ No newline at end of file
diff --git a/resources/README/generateReadme.ts b/resources/README/generateReadme.ts
new file mode 100644
index 0000000..96099bb
--- /dev/null
+++ b/resources/README/generateReadme.ts
@@ -0,0 +1,35 @@
+import { readFile, writeFile } from 'fs-extra';
+import Handlebars from 'handlebars';
+import path from 'path';
+import { convertMdToMdTable } from './mdToTable';
+
+
+
+const packagePath = path.join(__dirname, '..', '..');
+const docsPath = path.join(packagePath, 'docs');
+
+
+
+// Have your typedoc on watch, and have a ts-node-dev including the docs and README.hbs to run this.
+async function run() {
+
+ // console.log('Compiling Handlebars with the docs data...');
+ const readmeHbsContent = (await readFile(path.join(__dirname, 'README.hbs'))).toString();
+
+ const template = Handlebars.compile(readmeHbsContent, {noEscape: true});
+
+ let result = template({
+ // TODO make them parallel. only one expression now so no problems.
+ shadowProperties: await convertMdToMdTable(path.join(docsPath, 'interfaces', 'shadowi.md'))
+ });
+
+ // Later found out if this is typedoc or typedoc-plugin-md fault.
+ result = result.replace('StyleProp', 'StyleProp')
+
+ await writeFile(path.join(packagePath, 'README.md'), result);
+
+ console.log('README.md successfully generated!');
+}
+
+
+run();
diff --git a/resources/README/mdToTable.ts b/resources/README/mdToTable.ts
new file mode 100644
index 0000000..f1da206
--- /dev/null
+++ b/resources/README/mdToTable.ts
@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/prefer-regexp-exec */
+
+import fse from 'fs-extra';
+
+
+export async function convertMdToMdTable(path: string): Promise {
+ const fileContent = (await fse.readFile(path)).toString();
+
+ // Match everything between ### and (___ or end of string)
+ const matches = [...fileContent.matchAll(/###.+?(?=(___)|$)/sg)]; // s flag is . matches newline
+
+
+ if (!matches.length) {
+ throw new Error('No matches!');
+ }
+
+ // let i = 0;
+
+ const properties: {
+ name?: string;
+ type?: string;
+ /** undefined means it's required. */
+ defaultVal?: string;
+ description?: string;
+ }[] = [];
+
+ for (const match of matches) {
+ // console.log(`Match #${i++}`);
+
+ const content = match[0];
+ // console.log(content);
+
+ const name = content.match(/### (.+)?/)?.[1];
+ const hasOptionalTag: boolean = !!content.match(/• `Optional`/);
+ const defaultVal = content.match(/\*\*`default`\*\* (.+)/)?.[1] || (hasOptionalTag ? 'undefined' : undefined);
+ const type = content.match(/• .+?: (.+)/)?.[1];
+ // It's after the type and before the (default or end or EOS)
+ //
+ const description = content.match(/•.+?\n([\s\S]+?)(?=(\*\*`default`\*\*)|$)/)?.[1].trim();
+ // console.log(name, defaultVal, hasOptionalTag, type);
+ properties.push({
+ name, defaultVal, type, description
+ });
+ // console.log();
+ }
+
+ let resultString =
+ `| Property | Type | Default | Description
+ | --- | --- | --- | ---\n`;
+
+ function ensureWrappingBackticks(value: string): string {
+ return (value[0] === '`' ? value : `\`${value}\``);
+ }
+
+ // The type already includes wrapping backticks
+ for (const prop of properties) {
+ // Remove existing backticks (that sometimes are weirdly placed) and wrap it all with backticks
+ const type = ensureWrappingBackticks((prop.type ?? '?').replace(/`/g, ''));
+ const defaultVal = prop.defaultVal ? `${ensureWrappingBackticks(prop.defaultVal)}` : '**required**';
+ // Replace new lines with
+
+ {`react-native-shadow-2 sandbox`}
+ {`By SrBrahma @ https://github.com/SrBrahma/react-native-shadow-2`}
+
+
+
+
+
+
+
+
+
+
+ {
+ const color = tinycolor(text);
+ if (color.isValid()) // Only change if valid input
+ setStartColor(color.toHex8String());
+ }}/>
+
+ {
+ const color = tinycolor(text);
+ if (color.isValid())
+ setFinalColor(color.toHex8String());
+ }}/>
+
+ {
+ const color = tinycolor(text);
+ if (color.isValid())
+ setChildColor(color.toHex8String());
+ }}/>
+
+
+
+ setSize([v, size[1]])}/>
+ setSize([size[0], v])}/>
+
+
+
+
+
+
+
+
+
+ );
+};
+
+
+const defaults = {
+ distace: 50,
+ borderRadius: 30,
+ width: 200,
+ height: 200,
+ startColor: tinycolor('#00000020').toHex8String(),
+ finalColor: tinycolor('#0000').toHex8String(),
+ childColor: tinycolor('#fff').toHex8String(),
+};
+
+
+const NameValue: React.FC<{
+ name: string, value: string | number | boolean, valueMonospace?: boolean
+}> = ({ name, value, valueMonospace = false }) => {
+ const prettyValue = typeof value === 'number' ? value.toFixed(1).replace(/[.,]0+$/, '') : value; // https://stackoverflow.com/a/5623195/10247962
+ return (
+
+ {name}
+ {prettyValue}
+ );
+};
+
+
+const MySlider: React.FC<{
+ name: string;
+ step?: number;
+ range: [min: number, max: number];
+ value: number
+ onValueChange: (value: number) => void
+}> = ({ name, step = 1, range, value, onValueChange }) => {
+ return (
+
+
+ onValueChange(value - step)} style={({ pressed }) => [styles.decIncButton, pressed && { backgroundColor: '#bbb' }]}>
+ {'-'}
+
+ onValueChange(value + step)} style={({ pressed }) => [styles.decIncButton, pressed && { backgroundColor: '#bbb' }]}>
+ {'+'}
+
+
+
+ );
+};
+
+
+const MySwitch: React.FC<{
+ name: string;
+ value: boolean;
+ onValueChange: (value: boolean) => void;
+}> = ({ name, onValueChange, value }) => {
+ return (<>
+
+ ;
+// Add Shadow to the corner names
+type CornerRadiusShadow = Record<`${Corner}Shadow`, number>;
+
+
+const OS = Platform.OS;
+
+/** Rounds the given size to a pixel perfect size. */
+export function R(value: number): number {
+ // In Web, 1dp=1px. But it accepts decimal sizes, and it's somewhat problematic.
+ // The size rounding is browser-dependent, so we do the decimal rounding for web by ourselves to have a
+ // consistent behavior. We floor it, because it's better for the child to overlap by a pixel the right/bottom shadow part
+ // than to have a pixel wide gap between them.
+ // **Only if we receive a decimal value here!!!**. Read [*3]!! Else, the gap may still happen as we don't have control over it.
+ if (OS === 'web')
+ return Math.floor(value);
+
+ return PixelRatio.roundToNearestPixel(value);
+}
+/** Converts dp to pixels. */
+function P(value: number) {
+ return PixelRatio.getPixelSizeForLayoutSize(value);
+}
+/** How many pixels for each dp. scale = pixels/dp */
+const scale = PixelRatio.get();
+
+/** Converts two sizes to pixel for perfect math, sum them and converts the result back to dp. */
+function sumDps(a: number, b: number) {
+ return R((P(a) + P(b)) / scale);
+}
+
+/** [Android/ios?] [*4] A small safe margin for the svg sizes.
+ *
+ * It fixes some gaps that we had, as even that the svg size and the svg rect for example size were the same, this rect
+ * would still strangely be cropped/clipped. We give this additional size to the svg so our rect/etc won't be unintendedly clipped.
+ *
+ * It doesn't mean 1 pixel, as RN uses dp sizing, it's just an arbitrary and big enough number. */
+const additional = 1;
+
+
+export interface ShadowI {
+ /** The color of the shadow when it's right next to the given content, leaving it.
+ * Accepts alpha channel.
+ *
+ * @default '#00000020' */
+ startColor?: string;
+ /** The color of the shadow at the maximum distance from the content. Accepts alpha channel.
+ * @default '#0000', transparent. */
+ finalColor?: string;
+ /** How far the shadow will go.
+ * @default 10 */
+ distance?: number;
+ /** The radius of each corner of your child component. Passing a number will apply it to all corners.
+ *
+ * If passing an object, undefined corners will have the radius of the `default` property if it's defined.
+ *
+ * If undefined and if getChildRadius, it will attempt to get the child radius from the borderRadius style.
+ *
+ * Fallbacks to 0. */
+ radius?: number | {default?: number, topLeft?: number, topRight?: number, bottomLeft?: number, bottomRight?: number};
+ /** If it should try to get the radius from the child view **`style`** if `radius` property is undefined. It will get the values for each
+ * corner, like `borderTopLeftRadius`, and also `borderRadius`. If a specific corner isn't defined, `borderRadius` value is used.
+ * @default true */
+ getChildRadiusStyle?: boolean;
+ /** The sides of your content that will have the shadows drawn. Doesn't include corners.
+ *
+ * @default ['left', 'right', 'top', 'bottom'] */
+ // We are using the raw type here instead of Side/Corner so TypeDoc/Readme output is better for the users, won't be just `Side`.
+ sides?: ('left' | 'right' | 'top' | 'bottom')[];
+ /** The corners that will have the shadows drawn.
+ *
+ * @default ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] */
+ corners?: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight')[];
+ /** Moves the shadow. Negative x moves it to the left, negative y moves it up.
+ *
+ * Accepts `'x%'` values, in relation to the child's size.
+ *
+ * Read `paintInside` property description for related configuration.
+ * @default [0, 0] */
+ offset?: [x: number | string, y: number | string];
+ /** If the shadow should be applied inside the external shadows, below the child. `startColor` is used as fill color.
+ *
+ * You may want this as true when using offset or if your child have some transparency.
+ * @default false */
+ paintInside?: boolean;
+ /** The style of the view that wraps your child component.
+ *
+ * If using the `size` property, this wrapping view will automatically receive as style the `size` values and the
+ * radiuses from the `radius` property or from the child, if `getChildRadiusStyle`. You may overwrite those defaults
+ * by undefine'ing the changed styles in this property. */
+ viewStyle?: ViewStyle;
+ /** The style of the view that contains the shadow and your child component. */
+ containerViewStyle?: StyleProp;
+ /** If it should try to get the `width` and `height` from the child **style** if `size` prop is undefined.
+ *
+ * If the size style is found, it won't use the onLayout strategy to get the child style after its render.
+ * @default true */
+ // getChildSizeStyle?: boolean;
+ /** If you don't want the 2 renders of the shadow (first applies the relative positioning and sizing that may contain a quick pixel gap, second uses exact pixel size from onLayout) or you are having noticeable gaps/overlaps on the first render,
+ * you can use this property. Using this won't trigger the onLayout, so only 1 render is made.
+ *
+ * It will apply the corresponding `width` and `height` styles to the `viewStyle` property.
+ *
+ * You may want to set `backgroundColor` in the `viewStyle` property for your child background color.
+ *
+ * It's also good if you want an animated view.
+ *
+ * The values will be properly rounded using our R() function. */
+ size?: [width: number, height: number];
+}
+
+export const Shadow: React.FC = ({
+ radius: radiusProp,
+ sides: sidesProp = ['left', 'right', 'top', 'bottom'],
+ corners: cornersProp = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'],
+ containerViewStyle,
+ startColor: startColorProp = '#00000020',
+ finalColor: finalColorProp = '#0000',
+ distance: distanceProp = 10,
+ children,
+ size: sizeProp, // Do not default here. We do `if (sizeProp)` on onLayout.
+ offset = [0, 0],
+ getChildRadiusStyle: getChildRadiusProp = true,
+ paintInside = false,
+ viewStyle,
+}) => {
+ const [widthProp, heightProp] = sizeProp ? [R(sizeProp[0]), R(sizeProp[1])] : [];
+ const [childWidth, setChildWidth] = useState();
+ const [childHeight, setChildHeight] = useState();
+
+ const [offsetX, offsetY] = offset;
+ const distance = R(Math.max(distanceProp, 0)); // Min val as 0
+ /** Read {@link additional}, [*4] */
+ const distanceWithAdditional = distance + additional;
+ const width = widthProp ?? childWidth ?? '100%'; // '100%' sometimes will lead to gaps. child size don't lie.
+ const height = heightProp ?? childHeight ?? '100%';
+ /** Will (+ additional), only if its value isn't '100%'. */
+ const widthWithAdditional = typeof width === 'string' ? width : width + 1;
+ /** Will (+ additional), only if its value isn't '100%'. */
+ const heightWithAdditional = typeof height === 'string' ? height : height + 1;
+
+ const doGetChildRadius = getChildRadiusProp && (radiusProp === undefined);
+
+ const childStyle: ViewStyle | undefined = useMemo(() => {
+ if (doGetChildRadius && React.Children.count(children) > 1)
+ throw new Error('Only single child is accepted in Shadow component with getChildRadius={true} (default). You should wrap it in a View or change this property to false and manually enter the borderRadius in the radius property.');
+ const childStyleTemp = doGetChildRadius
+ ? (React.Children.only(children) as any | undefined)?.props?.style as ViewStyle | undefined
+ : undefined;
+ // Convert array style to a single obj style.
+ return (Array.isArray(childStyleTemp)
+ ? childStyleTemp.reduce((obj, v) => {
+ if (v && typeof v === 'object')
+ return { ...obj, ...v };
+ }, {})
+ : childStyleTemp);
+
+ }, [children, doGetChildRadius]);
+
+ const radiuses = useMemo(() => {
+ /** Not yet treated. May be negative / undefined */
+ const cornerRadiusPartial: Partial = doGetChildRadius
+ ? {
+ topLeft: childStyle?.borderTopLeftRadius ?? childStyle?.borderRadius,
+ topRight: childStyle?.borderTopRightRadius ?? childStyle?.borderRadius,
+ bottomLeft: childStyle?.borderBottomLeftRadius ?? childStyle?.borderRadius,
+ bottomRight: childStyle?.borderBottomRightRadius ?? childStyle?.borderRadius,
+ } : (typeof radiusProp === 'number' ? {
+ topLeft: radiusProp,
+ topRight: radiusProp,
+ bottomLeft: radiusProp,
+ bottomRight: radiusProp,
+ } : {
+ topLeft: radiusProp?.topLeft ?? radiusProp?.default,
+ topRight: radiusProp?.topRight ?? radiusProp?.default,
+ bottomLeft: radiusProp?.bottomLeft ?? radiusProp?.default,
+ bottomRight: radiusProp?.bottomRight ?? radiusProp?.default,
+ });
+ const result = {
+ bottomLeft: R(Math.max(cornerRadiusPartial.bottomLeft ?? 0, 0)),
+ bottomRight: R(Math.max(cornerRadiusPartial.bottomRight ?? 0, 0)),
+ topLeft: R(Math.max(cornerRadiusPartial.topLeft ?? 0, 0)),
+ topRight: R(Math.max(cornerRadiusPartial.topRight ?? 0, 0)),
+ };
+ return result;
+ }, [childStyle, doGetChildRadius, radiusProp]);
+
+ const shadow = useMemo(() => {
+
+ // polished vs 'transparent': https://github.com/styled-components/polished/issues/566. Maybe tinycolor2 would allow it.
+ const startColor = startColorProp === 'transparent' ? '#0000' : startColorProp;
+ const finalColor = finalColorProp === 'transparent' ? '#0000' : finalColorProp;
+
+ const startColorRgb = parseToRgb(startColor) as Omit & {alpha?: number};
+ const finalColorRgb = parseToRgb(finalColor) as Omit & {alpha?: number};
+
+ // [*1]: Seems that SVG in web accepts opacity in hex color, but in mobile doesn't.
+ // So we remove the opacity from the color, and only apply the opacity in stopOpacity, so in web
+ // it isn't applied twice.
+ const startColorWoOpacity = rgbToColorString({ ...startColorRgb, alpha: undefined }); // overwrite alpha
+ const finalColorWoOpacity = rgbToColorString({ ...finalColorRgb, alpha: undefined });
+
+ const startColorOpacity = startColorRgb.alpha ?? 1;
+ const finalColorOpacity = finalColorRgb.alpha ?? 1;
+
+ const { topLeft, topRight, bottomLeft, bottomRight } = radiuses;
+
+ const cornerShadowRadius: CornerRadiusShadow = {
+ topLeftShadow: sumDps(topLeft, distance),
+ topRightShadow: sumDps(topRight, distance),
+ bottomLeftShadow: sumDps(bottomLeft, distance),
+ bottomRightShadow: sumDps(bottomRight, distance),
+ };
+
+
+ const { topLeftShadow, topRightShadow, bottomLeftShadow, bottomRightShadow } = cornerShadowRadius;
+
+ /** Which sides will have shadow. */
+ const activeSides: Record = {
+ left: sidesProp.includes('left'),
+ right: sidesProp.includes('right'),
+ top: sidesProp.includes('top'),
+ bottom: sidesProp.includes('bottom'),
+ };
+
+ /** Which corners will have shadow. */
+ const activeCorners: Record = {
+ topLeft: cornersProp.includes('topLeft'),
+ topRight: cornersProp.includes('topRight'),
+ bottomLeft: cornersProp.includes('bottomLeft'),
+ bottomRight: cornersProp.includes('bottomRight'),
+ };
+
+ // Fragment wasn't working for some reason, so, using array.
+ const linearGradient = [
+ // [*1] In mobile, it's required for the alpha to be set in opacity prop to work.
+ // In web, smaller offsets needs to come before, so offset={0} definition comes first.
+
+ {/* // Bad. There would be a tiny gap between the child and the corner shadow. */}
+
+ );
+ }
+
+
+ return (<>
+ {/* Sides */}
+
+ {/* shape-rendering fixes some gaps on web. Not available on Android/iOS, but won't affect them.
+ We use shapeRendering, but React converts it to shape-rendering. Else, it would work but throw some console errors.
+ It don't actually exists in react-native-svg, but the prop is passed anyway. Else, there probably wouldn't be a solution for web for the gaps!
+ We do the {...{shape[...]}} else TS would complain that this prop isn't accepted. */}
+ {activeSides.left &&
+
+ {linearGradient}
+ }
+ {activeSides.right &&
+
+ {linearGradient}
+ }
+ {activeSides.bottom &&
+
+ {linearGradient}
+ }
+ {activeSides.top &&
+
+ {linearGradient}
+ }
+
+
+ {/* Corners */}
+
+ {/* The anchor for the svgs is the top left point in the corner square.
+ The starting point is the clockwise external arc init point. */}
+
+ {activeCorners.topLeft &&
+
+ {radialGradient('topLeft', true, true, topLeft, topLeftShadow)}
+
+ }
+ {activeCorners.topRight &&
+
+ {radialGradient('topRight', true, false, topRight, topRightShadow)}
+
+ }
+ {activeCorners.bottomLeft &&
+
+ {radialGradient('bottomLeft', false, true, bottomLeft, bottomLeftShadow)}
+
+ }
+ {activeCorners.bottomRight &&
+
+ {radialGradient('bottomRight', false, false, bottomRight, bottomRightShadow)}
+
+ }
+
+
+ {/* Paint the inner area, so we can offset it.
+ [*2]: I tried redrawing the inner corner arc, but there would always be a small gap between the external shadows
+ and this internal shadow along the curve. So, instead we dont specify the inner arc on the corners when
+ paintBelow, but just use a square inner corner. And here we will just mask those squares in each corner. */}
+ {paintInside &&
+
+
+ {/* Paint all white, then black on border external areas to erase them */}
+
+
+
+
+ }
+
+ );
+ }, [height, width, startColorProp, finalColorProp, radiuses, distance, sidesProp, cornersProp,
+ distanceWithAdditional, heightWithAdditional, widthWithAdditional, paintInside]);
+
+ const result = useMemo(() => {
+ return (
+ {/* TODO any benefit in using width/height instead of '100%' here? */}
+
+ {shadow}
+
+ {
+ // [web] [*3]: the width/height we get here is already rounded, even if the real size according to the browser
+ // inspector is decimal. If a way to get the exact size is found, we could use Math.floor() on it to avoid
+ // the pixel gap between the child and the shadow.
+ const layout = e.nativeEvent.layout;
+ setChildWidth(layout.width);
+ setChildHeight(layout.height);
+ },
+ }}
+ >
+ {children}
+
+ );
+ }, [shadow, children, width, height, sizeProp, radiuses, viewStyle, containerViewStyle, offsetX, offsetY]);
+
+ return result;
+};
\ No newline at end of file
diff --git a/sandbox/tsconfig.json b/sandbox/tsconfig.json
new file mode 100644
index 0000000..7de05fc
--- /dev/null
+++ b/sandbox/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "expo/tsconfig.base",
+ "compilerOptions": {
+ "strict": true,
+ /** By gev below */
+ "noUncheckedIndexedAccess": true /* Include 'undefined' in index signature results */
+ }
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 9baf808..9721827 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,154 +1,231 @@
-// First I tried to use react-native-linear & radial-gradient (that uses react-native-svg),
-// but they would, depending on device and view dimensions and positions, have a pixel between their views.
-// So I decided to try using the svg directly.
-
import React, { useMemo, useState } from 'react';
-import { Dimensions, LayoutRectangle, StyleProp, View, ViewStyle } from 'react-native';
-import Svg, {
- Defs,
- LinearGradient,
- Rect,
- Stop,
- RadialGradient,
- Path,
- Symbol,
- Use,
-} from 'react-native-svg';
-import { parseToRgb } from 'polished'; // To extract alpha
+import { Platform, StyleProp, View, ViewStyle, PixelRatio } from 'react-native';
+import { Svg, Defs, LinearGradient, Rect, Stop, Path, RadialGradient, Mask } from 'react-native-svg';
+import { parseToRgb, rgbToColorString } from 'polished'; // To extract alpha
import type { RgbaColor } from 'polished/lib/types/color';
+type Side = 'left' | 'right' | 'top' | 'bottom';
+type Corner = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+type CornerRadius = Record;
+// Add Shadow to the corner names
+type CornerRadiusShadow = Record<`${Corner}Shadow`, number>;
-type Size = [width: number, height: number];
-// Exclude: https://github.com/microsoft/TypeScript/issues/42322#issuecomment-759786099
-type Sides = Exclude<'left' | 'right' | 'top' | 'bottom', never>;
-type Corners = Exclude<'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight', never>;
+const OS = Platform.OS;
+/** Rounds the given size to a pixel perfect size. */
+export function R(value: number): number {
+ // In Web, 1dp=1px. But it accepts decimal sizes, and it's somewhat problematic.
+ // The size rounding is browser-dependent, so we do the decimal rounding for web by ourselves to have a
+ // consistent behavior. We floor it, because it's better for the child to overlap by a pixel the right/bottom shadow part
+ // than to have a pixel wide gap between them.
+ // **Only if we receive a decimal value here!!!**. Read [*3]!! Else, the gap may still happen as we don't have control over it.
+ if (OS === 'web')
+ return Math.floor(value);
+ return PixelRatio.roundToNearestPixel(value);
+}
+/** Converts dp to pixels. */
+function P(value: number) {
+ return PixelRatio.getPixelSizeForLayoutSize(value);
+}
+/** How many pixels for each dp. scale = pixels/dp */
+const scale = PixelRatio.get();
-// "Pixel perfect" solution:
-// RN seems to use .round. Inputting 30 height on a view, onLayout would output ~29.81h. 29.7 would also output that same value.
-function R(value: number) {
- const scale = Dimensions.get('screen').scale; // always getting as scale may change on the run?
- return Math.round(value * scale) / scale;
+/** Converts two sizes to pixel for perfect math, sum them and converts the result back to dp. */
+function sumDps(a: number, b: number) {
+ return R((P(a) + P(b)) / scale);
}
+/** [Android/ios?] [*4] A small safe margin for the svg sizes.
+ *
+ * It fixes some gaps that we had, as even that the svg size and the svg rect for example size were the same, this rect
+ * would still strangely be cropped/clipped. We give this additional size to the svg so our rect/etc won't be unintendedly clipped.
+ *
+ * It doesn't mean 1 pixel, as RN uses dp sizing, it's just an arbitrary and big enough number. */
+const additional = 1;
-interface ShadowI {
- /** The width and height of your content, not including the shadow.
- *
- * If not defining it, the shadow will take 1 render to get the content size then render the shadow.
- *
- * ^ In the future there will be a callback that will be called when it's done. It takes milliseconds,
- * but may be perceptible.
- */
- size?: Size;
+
+export interface ShadowI {
/** The color of the shadow when it's right next to the given content, leaving it.
* Accepts alpha channel.
- * @default '#00000010'
- */
+ *
+ * @default '#00000020' */
startColor?: string;
- /** The color of the shadow at the maximum distance from the content.
- * @default '#0000', transparent.
- */
+ /** The color of the shadow at the maximum distance from the content. Accepts alpha channel.
+ * @default '#0000', transparent. */
finalColor?: string;
- /** How far will the shadow go.
+ /** How far the shadow will go.
* @default 10 */
distance?: number;
- /** The style of the view that contains the shadow and the view containing the given children. */
- containerViewStyle?: StyleProp;
- /** The style of the view that contains the given children. */
- contentViewStyle?: StyleProp;
- /** The radius of each corner. Passing a number will apply it to all corners.
+ /** The radius of each corner of your child component. Passing a number will apply it to all corners.
*
- * If passing an object, undefined corners will have the radius of the `default` property if it's defined, else 0.
+ * If passing an object, undefined corners will have the radius of the `default` property if it's defined.
*
- * @default 0 */
+ * If undefined and if getChildRadius, it will attempt to get the child radius from the borderRadius style.
+ *
+ * Fallbacks to 0. */
radius?: number | {default?: number, topLeft?: number, topRight?: number, bottomLeft?: number, bottomRight?: number};
- /** The sides of your content (not including corners) that will have shadows rendered.
+ /** If it should try to get the radius from the child view **`style`** if `radius` property is undefined. It will get the values for each
+ * corner, like `borderTopLeftRadius`, and also `borderRadius`. If a specific corner isn't defined, `borderRadius` value is used.
+ * @default true */
+ getChildRadiusStyle?: boolean;
+ /** The sides of your content that will have the shadows drawn. Doesn't include corners.
*
- * Useful to not render a not visible shadow, improving the performance by a little bit.
* @default ['left', 'right', 'top', 'bottom'] */
- sides?: Sides[];
- /** The corners of your content that will have shadows rendered.
- *
- * The sizings of the radius property will still be used on the side shadows sizes calculations.
+ // We are using the raw type here instead of Side/Corner so TypeDoc/Readme output is better for the users, won't be just `Side`.
+ sides?: ('left' | 'right' | 'top' | 'bottom')[];
+ /** The corners that will have the shadows drawn.
*
- * Useful to not render a not visible shadow, improving the performance by a little bit.
* @default ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] */
- corners?: Corners[];
+ corners?: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight')[];
/** Moves the shadow. Negative x moves it to the left, negative y moves it up.
*
- * */
- offset?: [x: number, y: number];
+ * Accepts `'x%'` values, in relation to the child's size.
+ *
+ * Read `paintInside` property description for related configuration.
+ * @default [0, 0] */
+ offset?: [x: number | string, y: number | string];
+ /** If the shadow should be applied inside the external shadows, below the child. `startColor` is used as fill color.
+ *
+ * You may want this as true when using offset or if your child have some transparency.
+ * @default false */
+ paintInside?: boolean;
+ /** The style of the view that wraps your child component.
+ *
+ * If using the `size` property, this wrapping view will automatically receive as style the `size` values and the
+ * radiuses from the `radius` property or from the child, if `getChildRadiusStyle`. You may overwrite those defaults
+ * by undefine'ing the changed styles in this property. */
+ viewStyle?: ViewStyle;
+ /** The style of the view that contains the shadow and your child component. */
+ containerViewStyle?: StyleProp;
+ /** If it should try to get the `width` and `height` from the child **style** if `size` prop is undefined.
+ *
+ * If the size style is found, it won't use the onLayout strategy to get the child style after its render.
+ * @default true */
+ // getChildSizeStyle?: boolean;
+ /** If you don't want the 2 renders of the shadow (first applies the relative positioning and sizing that may contain a quick pixel gap, second uses exact pixel size from onLayout) or you are having noticeable gaps/overlaps on the first render,
+ * you can use this property. Using this won't trigger the onLayout, so only 1 render is made.
+ *
+ * It will apply the corresponding `width` and `height` styles to the `viewStyle` property.
+ *
+ * You may want to set `backgroundColor` in the `viewStyle` property for your child background color.
+ *
+ * It's also good if you want an animated view.
+ *
+ * The values will be properly rounded using our R() function. */
+ size?: [width: number, height: number];
}
+
export const Shadow: React.FC = ({
- size: sizeProp,
- radius = 0,
+ radius: radiusProp,
sides: sidesProp = ['left', 'right', 'top', 'bottom'],
corners: cornersProp = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'],
containerViewStyle,
- contentViewStyle,
- startColor: startColorProp = '#00000010',
+ startColor: startColorProp = '#00000020',
finalColor: finalColorProp = '#0000',
distance: distanceProp = 10,
children,
- offset,
+ size: sizeProp, // Do not default here. We do `if (sizeProp)` on onLayout.
+ offset = [0, 0],
+ getChildRadiusStyle: getChildRadiusProp = true,
+ paintInside = false,
+ viewStyle,
}) => {
+ const [widthProp, heightProp] = sizeProp ? [R(sizeProp[0]), R(sizeProp[1])] : [];
+ const [childWidth, setChildWidth] = useState();
+ const [childHeight, setChildHeight] = useState();
+
+ const [offsetX, offsetY] = offset;
+ const distance = R(Math.max(distanceProp, 0)); // Min val as 0
+ /** Read {@link additional}, [*4] */
+ const distanceWithAdditional = distance + additional;
+ const width = widthProp ?? childWidth ?? '100%'; // '100%' sometimes will lead to gaps. child size don't lie.
+ const height = heightProp ?? childHeight ?? '100%';
+ /** Will (+ additional), only if its value isn't '100%'. */
+ const widthWithAdditional = typeof width === 'string' ? width : width + 1;
+ /** Will (+ additional), only if its value isn't '100%'. */
+ const heightWithAdditional = typeof height === 'string' ? height : height + 1;
+
+ const doGetChildRadius = getChildRadiusProp && (radiusProp === undefined);
+
+ const childStyle: ViewStyle | undefined = useMemo(() => {
+ if (doGetChildRadius && React.Children.count(children) > 1)
+ throw new Error('Only single child is accepted in Shadow component with getChildRadius={true} (default). You should wrap it in a View or change this property to false and manually enter the borderRadius in the radius property.');
+ const childStyleTemp = doGetChildRadius
+ ? (React.Children.only(children) as any | undefined)?.props?.style as ViewStyle | undefined
+ : undefined;
+ // Convert array style to a single obj style.
+ return (Array.isArray(childStyleTemp)
+ ? childStyleTemp.reduce((obj, v) => {
+ if (v && typeof v === 'object')
+ return { ...obj, ...v };
+ }, {})
+ : childStyleTemp);
+
+ }, [children, doGetChildRadius]);
+
+ const radiuses = useMemo(() => {
+ /** Not yet treated. May be negative / undefined */
+ const cornerRadiusPartial: Partial = doGetChildRadius
+ ? {
+ topLeft: childStyle?.borderTopLeftRadius ?? childStyle?.borderRadius,
+ topRight: childStyle?.borderTopRightRadius ?? childStyle?.borderRadius,
+ bottomLeft: childStyle?.borderBottomLeftRadius ?? childStyle?.borderRadius,
+ bottomRight: childStyle?.borderBottomRightRadius ?? childStyle?.borderRadius,
+ } : (typeof radiusProp === 'number' ? {
+ topLeft: radiusProp,
+ topRight: radiusProp,
+ bottomLeft: radiusProp,
+ bottomRight: radiusProp,
+ } : {
+ topLeft: radiusProp?.topLeft ?? radiusProp?.default,
+ topRight: radiusProp?.topRight ?? radiusProp?.default,
+ bottomLeft: radiusProp?.bottomLeft ?? radiusProp?.default,
+ bottomRight: radiusProp?.bottomRight ?? radiusProp?.default,
+ });
+ const result = {
+ bottomLeft: R(Math.max(cornerRadiusPartial.bottomLeft ?? 0, 0)),
+ bottomRight: R(Math.max(cornerRadiusPartial.bottomRight ?? 0, 0)),
+ topLeft: R(Math.max(cornerRadiusPartial.topLeft ?? 0, 0)),
+ topRight: R(Math.max(cornerRadiusPartial.topRight ?? 0, 0)),
+ };
+ return result;
+ }, [childStyle, doGetChildRadius, radiusProp]);
- /** The calculated child layout. Only using width and height for now, looks x and y will be 0 unless maybe the contentViewStyle is changed. */
- const [childLayout, setChildLayout] = useState(null);
-
-
- // Does useMemo improve performance here?
const shadow = useMemo(() => {
+ // polished vs 'transparent': https://github.com/styled-components/polished/issues/566. Maybe tinycolor2 would allow it.
const startColor = startColorProp === 'transparent' ? '#0000' : startColorProp;
const finalColor = finalColorProp === 'transparent' ? '#0000' : finalColorProp;
- // Fixes the tiny blank space between the content and the shadow.
- const distance = R(distanceProp);
- const [offsetX, offsetY] = offset ?? [0, 0];
+ const startColorRgb = parseToRgb(startColor) as Omit & {alpha?: number};
+ const finalColorRgb = parseToRgb(finalColor) as Omit & {alpha?: number};
- if (!sizeProp && !childLayout)
- return null;
+ // [*1]: Seems that SVG in web accepts opacity in hex color, but in mobile doesn't.
+ // So we remove the opacity from the color, and only apply the opacity in stopOpacity, so in web
+ // it isn't applied twice.
+ const startColorWoOpacity = rgbToColorString({ ...startColorRgb, alpha: undefined }); // overwrite alpha
+ const finalColorWoOpacity = rgbToColorString({ ...finalColorRgb, alpha: undefined });
- // as Size as if not childLayout, sizeProp is truthy.
- const [contentWidth, contentHeight] = childLayout ? [childLayout.width, childLayout.height] : sizeProp as Size;
- const startColorOpacity = (parseToRgb(startColor) as RgbaColor).alpha ?? 1;
- const finalColorOpacity = (parseToRgb(finalColor) as RgbaColor).alpha ?? 1;
+ const startColorOpacity = startColorRgb.alpha ?? 1;
+ const finalColorOpacity = finalColorRgb.alpha ?? 1;
+ const { topLeft, topRight, bottomLeft, bottomRight } = radiuses;
- const cornerRadius: Record =
- typeof radius === 'number' ? {
- topLeft: radius,
- topRight: radius,
- bottomLeft: radius,
- bottomRight: radius
- } : {
- topLeft: Math.max(radius.topLeft ?? radius.default ?? 0, 0), // Min val 0 to avoid undesired behaviours.
- topRight: Math.max(radius.topRight ?? radius.default ?? 0, 0),
- bottomLeft: Math.max(radius.bottomLeft ?? radius.default ?? 0, 0),
- bottomRight: Math.max(radius.bottomRight ?? radius.default ?? 0, 0)
- };
- const { topLeft, topRight, bottomLeft, bottomRight } = cornerRadius;
-
- const cornerShadowRadius: {
- topLeftShadow: number;
- topRightShadow: number;
- bottomLeftShadow: number;
- bottomRightShadow: number;
- } = {
- topLeftShadow: topLeft + distance,
- topRightShadow: topRight + distance,
- bottomLeftShadow: bottomLeft + distance,
- bottomRightShadow: bottomRight + distance
+ const cornerShadowRadius: CornerRadiusShadow = {
+ topLeftShadow: sumDps(topLeft, distance),
+ topRightShadow: sumDps(topRight, distance),
+ bottomLeftShadow: sumDps(bottomLeft, distance),
+ bottomRightShadow: sumDps(bottomRight, distance),
};
+
+
const { topLeftShadow, topRightShadow, bottomLeftShadow, bottomRightShadow } = cornerShadowRadius;
/** Which sides will have shadow. */
- const activeSides: Record = {
+ const activeSides: Record = {
left: sidesProp.includes('left'),
right: sidesProp.includes('right'),
top: sidesProp.includes('top'),
@@ -156,157 +233,193 @@ export const Shadow: React.FC = ({
};
/** Which corners will have shadow. */
- const activeCorners: Record = {
+ const activeCorners: Record = {
topLeft: cornersProp.includes('topLeft'),
topRight: cornersProp.includes('topRight'),
bottomLeft: cornersProp.includes('bottomLeft'),
bottomRight: cornersProp.includes('bottomRight'),
};
- /** The length of each side, without the respective corners sizes. 0 if won't render. */
- const sidesSize: Record = {
- left: activeSides.left ? Math.max(contentHeight - topLeft - bottomLeft, 0) : 0,
- right: activeSides.right ? Math.max(contentHeight - topRight - bottomRight, 0) : 0,
- top: activeSides.top ? Math.max(contentWidth - topLeft - topRight, 0) : 0,
- bottom: activeSides.bottom ? Math.max(contentWidth - bottomLeft - bottomRight, 0) : 0,
- };
-
-
- // +!! https://stackoverflow.com/a/59694631/10247962
- // was using conditional size, depending on the sides with shadow, but removed it
- const totalWidth = contentWidth + distance * 2;
- const totalHeight = contentHeight + distance * 2;
-
// Fragment wasn't working for some reason, so, using array.
const linearGradient = [
- // react-native-svg requires the alpha to be set in opacity prop to work.
-
-
- // Bad. There would be a tiny gap between the child and the corner shadow. */}
+
+ );
}
- // console.log('totalW/H: ', totalWidth, totalHeight);
- // console.log('childLayout: ', childLayout);
- // console.log('sidesSize: ', sidesSize);
- // console.log('corners: ', cornerRadius);
- // console.log('cornersShadows: ', cornerShadowRadius);
- // console.log('\n');
-
- // viewBox saved me. Without it, paths wouldn't properly connect (sometimes there would be a gap between them),
- // clippings would happen, gap between the shadow and the content...
- // TODO [*1] for each corner get x1~3 and y1~3 for the connecting path points,
- // so there won't be mismatching values due to floating point calcs errors leading to tiny gaps.
- // The viewBox in svg fixed the previous gap, but I think it's still possible to happen due to this,
- // specially in paths that have calculations and relative positionings that will sum the errors.
- // If not ceiling, the shadow could/would get clipped. This don't change the expected result.
- // ^ looks like that using viewBox there is no longer the need of the Math.ceil.
- // ^ wrong. had a case of when using just a shadow size, it wouldn't take all side length. Ceil fixed it.
- // ^ but, it would cause full shadow having gaps between content and the shadow itself.
- // ^ working without viewbox. what was the problem case? = R(distance).
-
- // const bottomRightLeftX = totalWidth - bottomRightShadow;
-
- return (
- console.log('svgLayout: ', e.nativeEvent.layout)}
- width={totalWidth}
- height={totalHeight}
- // viewBox={`0 0 ${totalWidth} ${totalHeight}`} // doesn't seem fix anything more
-
- style={{
- position: 'absolute',
- left: - distance + offsetX,
- top: - distance + offsetY,
- }}>
+
+ return (<>
+ {/* Sides */}
+
+ {/* shape-rendering fixes some gaps on web. Not available on Android/iOS, but won't affect them.
+ We use shapeRendering, but React converts it to shape-rendering. Else, it would work but throw some console errors.
+ It don't actually exists in react-native-svg, but the prop is passed anyway. Else, there probably wouldn't be a solution for web for the gaps!
+ We do the {...{shape[...]}} else TS would complain that this prop isn't accepted. */}
+ {activeSides.left &&
+
+ {linearGradient}
+ }
+ {activeSides.right &&
+
+ {linearGradient}
+ }
+ {activeSides.bottom &&
+
+ {linearGradient}
+ }
+ {activeSides.top &&
+
+ {linearGradient}
+ }
+
+
+ {/* Corners */}
+
+ {/* The anchor for the svgs is the top left point in the corner square.
+ The starting point is the clockwise external arc init point. */}
+
+ {activeCorners.topLeft &&
+
+ {radialGradient('topLeft', true, true, topLeft, topLeftShadow)}
+
+ }
+ {activeCorners.topRight &&
+
+ {radialGradient('topRight', true, false, topRight, topRightShadow)}
+
+ }
+ {activeCorners.bottomLeft &&
+
+ {radialGradient('bottomLeft', false, true, bottomLeft, bottomLeftShadow)}
+
+ }
+ {activeCorners.bottomRight &&
+
+ {radialGradient('bottomRight', false, false, bottomRight, bottomRightShadow)}
+
+ }
+
+
+ {/* Paint the inner area, so we can offset it.
+ [*2]: I tried redrawing the inner corner arc, but there would always be a small gap between the external shadows
+ and this internal shadow along the curve. So, instead we dont specify the inner arc on the corners when
+ paintBelow, but just use a square inner corner. And here we will just mask those squares in each corner. */}
+ {paintInside &&
- {linearGradient}
- {linearGradient}
- {linearGradient}
- {linearGradient}
- {radialGradient('top-left', true, true, topLeft)}
- {radialGradient('top-right', true, false, topRight)}
- {radialGradient('bottom-left', false, true, bottomLeft)}
- {radialGradient('bottom-right', false, false, bottomRight)}
-
- {/* Content shape, to use with offset */}
- {offset &&
- }
-
- {/*
-
- */}
+
+ {/* Paint all white, then black on border external areas to erase them */}
+
+
+
+ }
+ );
+ }, [height, width, startColorProp, finalColorProp, radiuses, distance, sidesProp, cornersProp,
+ distanceWithAdditional, heightWithAdditional, widthWithAdditional, paintInside]);
-
- {offset && }
- {/* TODO Change Rects to paths? ([*1]) */}
- {activeSides.left &&
-
- );
- }, [sizeProp, childLayout, startColorProp, finalColorProp, radius, distanceProp, sidesProp, cornersProp, offset]);
-
- return (
-
- {/* Shadow before the content, so any shadow inner irregularities will be kept below it. */}
- {shadow}
- {/*
+ {/* TODO any benefit in using width/height instead of '100%' here? */}
+
+ {shadow}
+
setChildLayout(e.nativeEvent.layout) } }
+ // Without alignSelf, if your Shadow component had a sibling under the same View, the shadow wouldn't grow shorter
+ // than this sibling, being it for example a text below the shadowed component. https://imgur.com/a/V6ZV0lI
+ style={[{ alignSelf: 'flex-start' }, sizeProp && {
+ width, height,
+ borderTopLeftRadius: radiuses.topLeft,
+ borderTopRightRadius: radiuses.topRight,
+ borderBottomLeftRadius: radiuses.bottomLeft,
+ borderBottomRightRadius: radiuses.bottomRight,
+ }, viewStyle]}
+ {...!sizeProp && { // Only use onLayout if sizeProp wasn't received.
+ onLayout: (e) => {
+ // [web] [*3]: the width/height we get here is already rounded, even if the real size according to the browser
+ // inspector is decimal. If a way to get the exact size is found, we could use Math.floor() on it to avoid
+ // the pixel gap between the child and the shadow.
+ const layout = e.nativeEvent.layout;
+ setChildWidth(layout.width);
+ setChildHeight(layout.height);
+ },
+ }}
>
{children}
+ );
+ }, [shadow, children, width, height, sizeProp, radiuses, viewStyle, containerViewStyle, offsetX, offsetY]);
- {/* Experimental: This below allows overflowing the children size.
- However, can't find a way to set the viewBox with this approach, so the gaps would probably happen.
- Would it sucessfuly use the style width and height as viewBox without gap?
- Maybe could use this on first render, then use the childLayout to set the viewBox sizing. The gaps would
- only happen on first render, but being it barely noticeable wouldn't be an issue. Better than no shadow on 1st render.
- */}
- {/*
-
- */}
-
- );
-};
+ return result;
+};
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 65b2f35..052ce44 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,8 +9,8 @@
"lib": ["ESNext"], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
- "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
- "declaration": true, /* Generates corresponding '.d.ts' file. */
+ "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+ "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
@@ -18,7 +18,7 @@
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
- // "removeComments": true, /* Do not emit comments to output. */
+ // "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
@@ -42,7 +42,7 @@
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
/* Module Resolution Options */
- "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+ "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
@@ -67,5 +67,5 @@
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
- "exclude": ["node_modules", "lib"]
+ "include": ["src"]
}
diff --git a/typedoc.json b/typedoc.json
index 2acf313..ca6581a 100644
--- a/typedoc.json
+++ b/typedoc.json
@@ -1,4 +1,8 @@
{
- "entryPoints": ["./src/index.tsx"],
- "out": "doc"
+ "entryPoints": "src/index.tsx",
+ "hideGenerator": true,
+ "hideBreadcrumbs": true,
+ "hideInPageTOC": true,
+ "disableSources": true,
+ "sort": ["source-order"]
}
\ No newline at end of file