Update GenerateViewConfigJs for native CSS parsing (#55676)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/55676

Change `GenerateViewConfigJs.js` to emit `require('.../ReactNativeStyleAttributes').colorAttribute` for `ColorPrimitive` props instead of the inline `{process: require('.../processColor').default}`. This ensures generated ViewConfigs use the same gated attribute as handwritten ones.

Changelog: [Internal]

Reviewed By: lenaic

Differential Revision: D94052698

fbshipit-source-id: aa4821364062807b0ae862379d236a2f458c9c53
This commit is contained in:
Nick Gerleman
2026-02-25 08:14:29 -08:00
committed by meta-codesync[bot]
parent 36b7158a61
commit 0ce27908b7
4 changed files with 10 additions and 28 deletions
@@ -97,9 +97,7 @@ let nativeComponentName = 'ColorPropNativeComponentView';
export const __INTERNAL_VIEW_CONFIG = {
uiViewClassName: \\"ColorPropNativeComponentView\\",
validAttributes: {
tintColor: {
process: require('react-native/Libraries/StyleSheet/processColor').default
}
tintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute
}
};
export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
@@ -505,12 +503,8 @@ export const __INTERNAL_VIEW_CONFIG = {
thumbImage: {
process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource'))
},
color: {
process: require('react-native/Libraries/StyleSheet/processColor').default
},
thumbTintColor: {
process: require('react-native/Libraries/StyleSheet/processColor').default
},
color: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute,
thumbTintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute,
point: {
diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer'))
}
@@ -97,9 +97,7 @@ let nativeComponentName = 'ColorPropNativeComponentView';
export const __INTERNAL_VIEW_CONFIG = {
uiViewClassName: \\"ColorPropNativeComponentView\\",
validAttributes: {
tintColor: {
process: require('react-native/Libraries/StyleSheet/processColor').default
}
tintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute
}
};
export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
@@ -505,12 +503,8 @@ export const __INTERNAL_VIEW_CONFIG = {
thumbImage: {
process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource'))
},
color: {
process: require('react-native/Libraries/StyleSheet/processColor').default
},
thumbTintColor: {
process: require('react-native/Libraries/StyleSheet/processColor').default
},
color: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute,
thumbTintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute,
point: {
diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer'))
}
@@ -72,7 +72,7 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) {
switch (typeAnnotation.name) {
case 'ColorPrimitive':
return expression(
"{ process: require('react-native/Libraries/StyleSheet/processColor').default }",
"require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute",
);
case 'ImageSourcePrimitive':
return expression(
@@ -412,9 +412,7 @@ let nativeComponentName = 'ColorPropNativeComponent';
export const __INTERNAL_VIEW_CONFIG = {
uiViewClassName: \\"ColorPropNativeComponent\\",
validAttributes: {
tintColor: {
process: require('react-native/Libraries/StyleSheet/processColor').default
}
tintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute
}
};
export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
@@ -1076,12 +1074,8 @@ export const __INTERNAL_VIEW_CONFIG = {
thumbImage: {
process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource'))
},
color: {
process: require('react-native/Libraries/StyleSheet/processColor').default
},
thumbTintColor: {
process: require('react-native/Libraries/StyleSheet/processColor').default
},
color: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute,
thumbTintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute,
point: {
diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer'))
}