Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Commit 5fdb287

Browse files
gaearongaearon
committed
Fully fix editing RN styles
* We shouldn't rely on the assumption that we're operating on current Fiber * The idea to unify updaters with setInProps() was a bad one because setNativeProps() signature is too different
1 parent 5501d1c commit 5fdb287

File tree

4 files changed

+52
-48
lines changed

4 files changed

+52
-48
lines changed

‎backend/getData.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -115,13 +115,8 @@ function getData(element: Object): DataType {
115115
if (typeof element.setNativeProps === 'function') {
116116
// For editing styles in RN
117117
updater = {
118-
setState() {},
119-
forceUpdate() {},
120-
setInState() {},
121-
setInContext() {},
122-
setInProps(path: Array<string | number>, value: any) {
123-
const props = copyWithSet(element._currentElement.props, path, value);
124-
element.setNativeProps(props);
118+
setNativeProps(nativeProps) {
119+
element.setNativeProps(nativeProps);
125120
},
126121
}
127122
}

‎backend/getDataFiber.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,8 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
9797
if (typeof fiber.stateNode.setNativeProps === 'function') {
9898
// For editing styles in RN
9999
updater = {
100-
setState() {},
101-
forceUpdate() {},
102-
setInState() {},
103-
setInContext() {},
104-
setInProps(path: Array<string | number>, value: any) {
105-
const props = copyWithSet(fiber.memoizedProps, path, value);
106-
fiber.stateNode.setNativeProps(props);
100+
setNativeProps(nativeProps) {
101+
fiber.stateNode.setNativeProps(nativeProps);
107102
},
108103
};
109104
}
@@ -150,7 +145,14 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
150145
}
151146

152147
function setInProps(fiber, path: Array<string | number>, value: any) {
153-
fiber.pendingProps = copyWithSet(fiber.memoizedProps, path, value);
148+
const inst = fiber.stateNode;
149+
fiber.pendingProps = copyWithSet(inst.props, path, value);
150+
if (fiber.alternate) {
151+
// We don't know which fiber is the current one because DevTools may bail out of getDataFiber() call,
152+
// and so the data object may refer to another version of the fiber. Therefore we update pendingProps
153+
// on both.
154+
fiber.alternate.pendingProps = fiber.pendingProps;
155+
}
154156
fiber.stateNode.forceUpdate();
155157
}
156158

‎backend/types.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,17 @@
1010
*/
1111
'use strict';
1212

13+
type CompositeUpdater = {
14+
setInProps: ?(path: Array<string>, value: any) => void,
15+
setInState: ?(path: Array<string>, value: any) => void,
16+
setInContext: ?(path: Array<string>, value: any) => void,
17+
forceUpdate: ?() => void,
18+
};
19+
20+
type NativeUpdater = {
21+
setNativeProps: ?(nativeProps: {[key: string]: any}) => void,
22+
};
23+
1324
export type DataType = {
1425
nodeType: 'Native' | 'Wrapper' | 'NativeWrapper' | 'Composite' | 'Text' | 'Portal' | 'Empty',
1526
type: ?(string | AnyFn),
@@ -22,13 +33,7 @@ export type DataType = {
2233
context: ?Object,
2334
children: ?(string | Array<OpaqueNodeHandle>),
2435
text: ?string,
25-
updater: ?{
26-
setInProps: ?(path: Array<string>, value: any) => void,
27-
setInState: ?(path: Array<string>, value: any) => void,
28-
setInContext: ?(path: Array<string>, value: any) => void,
29-
// setState: ?(newState: any) => void,
30-
forceUpdate: ?() => void,
31-
},
36+
updater: ?(CompositeUpdater | NativeUpdater),
3237
publicInstance: ?Object,
3338
};
3439

‎plugins/ReactNativeStyle/setupBackend.js‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -42,23 +42,24 @@ function shallowClone(obj) {
4242
function renameStyle(agent, id, oldName, newName, val) {
4343
var data = agent.elementData.get(id);
4444
var newStyle = {[newName]: val};
45-
if (!data) {
46-
return;
47-
}
48-
// <hack>
49-
// We can remove this when we stop supporting RN versions
50-
// before https://github.com/facebook/react-devtools/pull/528.
51-
// Newer versions just use the same `updater` path for native updates.
52-
if (!data.updater || !data.updater.setInProps) {
53-
var el = agent.reactElements.get(id);
54-
if (el && el.setNativeProps) {
55-
el.setNativeProps({ style: newStyle });
45+
if (!data || !data.updater || !data.updater.setInProps) {
46+
if (data && data.updater && data.updater.setNativeProps) {
47+
data.updater.setNativeProps({ style: newStyle });
5648
} else {
57-
console.error('Unable to set style for this element... (no forceUpdate or setNativeProps)');
49+
// <hack>
50+
// We can remove this when we stop supporting RN versions
51+
// before https://github.com/facebook/react-devtools/pull/528.
52+
// Newer versions use `updater.setNativeProps` instead.
53+
var el = agent.reactElements.get(id);
54+
if (el && el.setNativeProps) {
55+
el.setNativeProps({ style: newStyle });
56+
} else {
57+
console.error('Unable to set style for this element... (no forceUpdate or setNativeProps)');
58+
}
59+
// </hack>
5860
}
5961
return;
6062
}
61-
// </hack>
6263
var style = data && data.props && data.props.style;
6364
var customStyle;
6465
if (Array.isArray(style)) {
@@ -91,23 +92,24 @@ function renameStyle(agent, id, oldName, newName, val) {
9192
function setStyle(agent, id, attr, val) {
9293
var data = agent.elementData.get(id);
9394
var newStyle = {[attr]: val};
94-
if (!data) {
95-
return;
96-
}
97-
// <hack>
98-
// We can remove this when we stop supporting RN versions
99-
// before https://github.com/facebook/react-devtools/pull/528.
100-
// Newer versions just use the same `updater` path for native updates.
101-
if (!data.updater || !data.updater.setInProps) {
102-
var el = agent.reactElements.get(id);
103-
if (el && el.setNativeProps) {
104-
el.setNativeProps({ style: newStyle });
95+
if (!data || !data.updater || !data.updater.setInProps) {
96+
if (data && data.updater && data.updater.setNativeProps) {
97+
data.updater.setNativeProps({ style: newStyle });
10598
} else {
106-
console.error('Unable to set style for this element... (no forceUpdate or setNativeProps)');
99+
// <hack>
100+
// We can remove this when we stop supporting RN versions
101+
// before https://github.com/facebook/react-devtools/pull/528.
102+
// Newer versions use `updater.setNativeProps` instead.
103+
var el = agent.reactElements.get(id);
104+
if (el && el.setNativeProps) {
105+
el.setNativeProps({ style: newStyle });
106+
} else {
107+
console.error('Unable to set style for this element... (no forceUpdate or setNativeProps)');
108+
}
109+
// </hack>
107110
}
108111
return;
109112
}
110-
// </hack>
111113
var style = data.props && data.props.style;
112114
if (Array.isArray(style)) {
113115
if (typeof style[style.length - 1] === 'object' && !Array.isArray(style[style.length - 1])) {

0 commit comments

Comments
 (0)