Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: remove extractColor in favor of RN impl #1726

Merged
merged 3 commits into from
Apr 12, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions TestsExample/App.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable no-unused-vars */
import React from 'react';
import SampleTest from './src/SampleTest';
import ColorTest from './src/ColorTest';

export default function App() {
return <SampleTest />;
return <ColorTest />;
}
4 changes: 2 additions & 2 deletions TestsExample/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ PODS:
- React-jsi (= 0.68.0-rc.1)
- React-logger (= 0.68.0-rc.1)
- React-perflogger (= 0.68.0-rc.1)
- RNSVG (12.2.0):
- RNSVG (12.3.0):
- React-Core
- SocketRocket (0.6.0)
- Yoga (1.14.0)
Expand Down Expand Up @@ -540,7 +540,7 @@ SPEC CHECKSUMS:
React-RCTVibration: 5cab6419b68d5750482b0fc34dbb27af550469cc
React-runtimeexecutor: 10cda3a396b14a764a5f86088e7e3810b9c66cec
ReactCommon: 73a01eb83f22c84a6b09dfb60f3463888ebd4975
RNSVG: 4ecc2e8f38b6ebe7889909570c26f3abe8059767
RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
Yoga: d29dba374c1a582b40cfb736647b5e1b5ed35dba
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
Expand Down
13 changes: 10 additions & 3 deletions TestsExample/src/SampleTest.tsx → TestsExample/src/ColorTest.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { PlatformColor, Platform, Button } from 'react-native';
import { PlatformColor, Platform, Button, DynamicColorIOS } from 'react-native';
import {
Svg,
Circle,
Expand All @@ -9,11 +9,18 @@ import {
} from 'react-native-svg';

const color = PlatformColor(Platform.select({
ios: 'label',
android: '@android:color/primary_text_light',
ios: 'systemTealColor',
android: '@android:color/holo_blue_bright',
default: 'black',
}))

// const customContrastDynamicTextColor = DynamicColorIOS({
// dark: 'hsla(360, 40%, 30%, 1.0)',
// light: '#ff00ff55',
// highContrastDark: 'black',
// highContrastLight: 'white',
// });

export default () => {
const [test, setTest] = React.useState(50);

Expand Down
8 changes: 4 additions & 4 deletions src/elements/Svg.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import React, { Component } from 'react';
import {
ColorValue,
findNodeHandle,
MeasureInWindowOnSuccessCallback,
MeasureLayoutOnSuccessCallback,
MeasureOnSuccessCallback,
NativeModules,
processColor,
StyleSheet,
ViewStyle,
} from 'react-native';
import {
ClipProps,
Color,
extractedProps,
FillProps,
NumberProp,
Expand All @@ -21,7 +22,6 @@ import {
} from '../lib/extract/types';
import extractResponder from '../lib/extract/extractResponder';
import extractViewBox from '../lib/extract/extractViewBox';
import extractColor from '../lib/extract/extractColor';
import Shape from './Shape';
import G from './G';
import { RNSVGSvg } from './NativeComponents';
Expand All @@ -38,7 +38,7 @@ const defaultStyle = styles.svg;

export default class Svg extends Shape<
{
color?: Color;
color?: ColorValue;
viewBox?: string;
opacity?: NumberProp;
onLayout?: () => void;
Expand Down Expand Up @@ -183,7 +183,7 @@ export default class Svg extends Shape<

extractResponder(props, props, this as ResponderInstanceProps);

const tint = extractColor(color);
const tint = processColor(color);
if (tint != null) {
props.color = tint;
props.tintColor = tint;
Expand Down
12 changes: 2 additions & 10 deletions src/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import * as React from 'react';
import * as ReactNative from 'react-native';
import {
ColorValue,
GestureResponderEvent,
TransformsStyle,
OpaqueColorValue,
} from 'react-native';

// Common props
Expand Down Expand Up @@ -97,15 +97,7 @@ export interface ResponderProps extends ReactNative.GestureResponderHandlers {
pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
}

// rgba values inside range 0 to 1 inclusive
// rgbaArray = [r, g, b, a]
export type rgbaArray = ReadonlyArray<number>;

// argb values inside range 0x00 to 0xff inclusive
// int32ARGBColor = 0xaarrggbb
export type int32ARGBColor = number;

export type Color = int32ARGBColor | rgbaArray | OpaqueColorValue | string;
export type Color = ColorValue;

export interface FillProps {
fill?: Color;
Expand Down
33 changes: 11 additions & 22 deletions src/lib/extract/extractBrush.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
import extractColor, { integerColor } from './extractColor';
import { Color } from './types';
import { ColorValue, processColor } from 'react-native';

const urlIdPattern = /^url\(#(.+)\)$/;

const currentColorBrush = [2];
const contextFillBrush = [3];
const contextStrokeBrush = [4];

export default function extractBrush(color?: Color) {
if (typeof color === 'number') {
if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
return integerColor(color);
}
}
export default function extractBrush(color?: ColorValue) {

if (!color || color === 'none') {
return null;
Expand All @@ -35,23 +29,18 @@ export default function extractBrush(color?: Color) {
return [1, brush[1]];
}

const int32ARGBColor = extractColor(color);
if (typeof int32ARGBColor === 'number') {
return int32ARGBColor;
const processedColor = processColor(color);
if (typeof processedColor === 'number') {
return processedColor;
}

if (typeof color === 'object' && color !== null) {
// iOS PlatformColor
if ('semantic' in color) {
return [0, color];
}

// Android PlatformColor
if ('resource_paths' in color) {
return [0, color];
}
if (typeof processedColor === 'object' && processedColor !== null) {
// if we got an object, it should be `PlatformColor` or `DynamicColorIOS`,
// so we pass it as an array with `0` value as first item, which is interpreted
// on the native side as color to be managed by `RCTConvert`.
return [0, processedColor];
Comment on lines +37 to +41
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did you find that passing 0 means RCTConvert handles the color?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went through the native code and here is the code:

}

console.warn(`"${color}" is not a valid color or brush`);
console.warn(`"${String(color)}" is not a valid color or brush`);
return null;
}
Loading