Skip to content

Commit

Permalink
Revert dynamic styles PR (#6218)
Browse files Browse the repository at this point in the history
## Summary

Unfortunately, turns out the PR with dynamic styles #5268 introduced
more problems than it solved. Thus, proposing a revert.
This revert most likely fixed:
-
#6203
-
#6102
-
#6037

as well as one more not-published issue and potentially a few more.

## Notes

Even if it gets approved, to be merged ONLY after @tjzel agrees with
everything

## Test plan

😢 😭
  • Loading branch information
szydlovsky committed Jul 9, 2024
1 parent 61b8041 commit 8ff5b88
Show file tree
Hide file tree
Showing 4 changed files with 5 additions and 249 deletions.
216 changes: 0 additions & 216 deletions apps/common-app/src/examples/DynamicStylesExample.tsx

This file was deleted.

6 changes: 0 additions & 6 deletions apps/common-app/src/examples/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@ import WobbleExample from './WobbleExample';
import WorkletExample from './WorkletExample';
import WorkletRuntimeExample from './WorkletRuntimeExample';
import NestedLayoutAnimationConfig from './LayoutAnimations/NestedLayoutAnimationConfig';
import DynamicStylesExample from './DynamicStylesExample';
import WithClampExample from './WithClampExample';
import WorkletFactoryCrash from './WorkletFactoryCrashExample';
import RuntimeTestsExample from './RuntimeTests/RuntimeTestsExample';
Expand Down Expand Up @@ -491,11 +490,6 @@ export const EXAMPLES: Record<string, Example> = {
title: 'Log test',
screen: LogExample,
},
DynamicStylesExample: {
icon: '🧨',
title: 'Dynamically appending/removing styles',
screen: DynamicStylesExample,
},
WorkletFactoryCrash: {
icon: '🏭',
title: 'Worklet factory crash',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,9 @@ export function hasInlineStyles(style: StyleProps): boolean {

export function getInlineStyle(
style: Record<string, unknown>,
shouldGetInitialStyle: boolean
isFirstRender: boolean
) {
if (shouldGetInitialStyle) {
if (isFirstRender) {
return getInlinePropsUpdate(style);
}
const newStyle: StyleProps = {};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
'use strict';

import { shallowEqual } from '../hook/utils';
import type { StyleProps } from '../commonTypes';
import { isSharedValue } from '../isSharedValue';
import { isChromeDebugger } from '../PlatformChecker';
Expand All @@ -24,30 +23,22 @@ function dummyListener() {

export class PropsFilter implements IPropsFilter {
private _initialStyle = {};
private _previousProps: React.Component['props'] | null = null;
private _requiresNewInitials = true;

public filterNonAnimatedProps(
component: React.Component<unknown, unknown> & IAnimatedComponentInternal
): Record<string, unknown> {
const inputProps =
component.props as AnimatedComponentProps<InitialComponentProps>;

this._maybePrepareForNewInitials(inputProps);

const props: Record<string, unknown> = {};
for (const key in inputProps) {
const value = inputProps[key];
if (key === 'style') {
const styleProp = inputProps.style;
const styles = flattenArray<StyleProps>(styleProp ?? []);
if (this._requiresNewInitials) {
this._initialStyle = {};
}
const processedStyle: StyleProps = styles.map((style) => {
if (style && style.viewDescriptors) {
// this is how we recognize styles returned by useAnimatedStyle
if (this._requiresNewInitials) {
if (component._isFirstRender) {
this._initialStyle = {
...style.initial.value,
...this._initialStyle,
Expand All @@ -56,7 +47,7 @@ export class PropsFilter implements IPropsFilter {
}
return this._initialStyle;
} else if (hasInlineStyles(style)) {
return getInlineStyle(style, this._requiresNewInitials);
return getInlineStyle(style, component._isFirstRender);
} else {
return style;
}
Expand Down Expand Up @@ -88,26 +79,13 @@ export class PropsFilter implements IPropsFilter {
props[key] = dummyListener;
}
} else if (isSharedValue(value)) {
if (this._requiresNewInitials) {
if (component._isFirstRender) {
props[key] = value.value;
}
} else if (key !== 'onGestureHandlerStateChange' || !isChromeDebugger()) {
props[key] = value;
}
}
this._requiresNewInitials = false;
return props;
}

private _maybePrepareForNewInitials(
inputProps: AnimatedComponentProps<InitialComponentProps>
) {
if (this._previousProps && inputProps.style) {
this._requiresNewInitials = !shallowEqual(
this._previousProps,
inputProps
);
}
this._previousProps = inputProps;
}
}

0 comments on commit 8ff5b88

Please sign in to comment.