Files
Tim YungandFacebook GitHub Bot 4fdbc44ab5 RN: Disable collapsable for Animated Components
Summary:
When we were iterating on the Fabric renderer, animated components went through some iteration to ensure that animated shadow nodes were not flattened away. At the time, `collapsable` was not supported on iOS, even in Fabric, because the legacy renderer would not publish the `collapsable` prop on the view config.

This has since been fixed and `collapsable` is supported on both Android and iOS. We no longer need the `nativeID` workaround to prevent view flattening.

For use cases of the JavaScript driver and legacy renderers, this change will cause views which used to be flattened to no longer be flattened. This seems like an appropriate change considering the direction that we are moving (in which everything is eventually transitioned to using the Fabric renderer).

Changelog:
[Android][Changed] - Native views backing Animated.View (w/ JavaScript-driven animations) will no longer be flattened; this should be a transparent change.

Reviewed By: lunaleaps, mdvacca

Differential Revision: D31223031

fbshipit-source-id: 48dc63471eef406f4c215bfea0b3ef82a05d4b24
2021-09-29 17:22:21 -07:00

362 lines
6.6 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Button /> should be disabled and it should set accessibilityState to disabled when disabled={true} 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": true,
}
}
accessible={true}
collapsable={false}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {},
Object {},
]
}
>
<Text
disabled={true}
style={
Array [
Object {
"color": "#007AFF",
"fontSize": 18,
"margin": 8,
"textAlign": "center",
},
Object {
"color": "#cdcdcd",
},
]
}
>
Test Button
</Text>
</View>
</View>
`;
exports[`<Button /> should be disabled when disabled is empty and accessibilityState={{disabled: true}} 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": true,
}
}
accessible={true}
collapsable={false}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {},
Object {},
]
}
>
<Text
disabled={true}
style={
Array [
Object {
"color": "#007AFF",
"fontSize": 18,
"margin": 8,
"textAlign": "center",
},
Object {
"color": "#cdcdcd",
},
]
}
>
Test Button
</Text>
</View>
</View>
`;
exports[`<Button /> should be disabled when disabled={true} and accessibilityState={{disabled: true}} 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": true,
}
}
accessible={true}
collapsable={false}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {},
Object {},
]
}
>
<Text
disabled={true}
style={
Array [
Object {
"color": "#007AFF",
"fontSize": 18,
"margin": 8,
"textAlign": "center",
},
Object {
"color": "#cdcdcd",
},
]
}
>
Test Button
</Text>
</View>
</View>
`;
exports[`<Button /> should not be disabled when disabled={false} and accessibilityState={{disabled: false}} 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": false,
}
}
accessible={true}
collapsable={false}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {},
]
}
>
<Text
disabled={false}
style={
Array [
Object {
"color": "#007AFF",
"fontSize": 18,
"margin": 8,
"textAlign": "center",
},
]
}
>
Test Button
</Text>
</View>
</View>
`;
exports[`<Button /> should not be disabled when disabled={false} and accessibilityState={{disabled: true}} 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": false,
}
}
accessible={true}
collapsable={false}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {},
]
}
>
<Text
disabled={false}
style={
Array [
Object {
"color": "#007AFF",
"fontSize": 18,
"margin": 8,
"textAlign": "center",
},
]
}
>
Test Button
</Text>
</View>
</View>
`;
exports[`<Button /> should overwrite accessibilityState with value of disabled prop 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": true,
}
}
accessible={true}
collapsable={false}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {},
Object {},
]
}
>
<Text
disabled={true}
style={
Array [
Object {
"color": "#007AFF",
"fontSize": 18,
"margin": 8,
"textAlign": "center",
},
Object {
"color": "#cdcdcd",
},
]
}
>
Test Button
</Text>
</View>
</View>
`;
exports[`<Button /> should render as expected 1`] = `
<View
accessibilityRole="button"
accessible={true}
collapsable={false}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {},
]
}
>
<Text
style={
Array [
Object {
"color": "#007AFF",
"fontSize": 18,
"margin": 8,
"textAlign": "center",
},
]
}
>
Test Button
</Text>
</View>
</View>
`;