diff --git a/Libraries/Renderer/src/renderers/native/__tests__/ReactNativeAttributePayload-test.js b/Libraries/Renderer/src/renderers/native/__tests__/ReactNativeAttributePayload-test.js new file mode 100644 index 00000000000000..57d9f958c6baee --- /dev/null +++ b/Libraries/Renderer/src/renderers/native/__tests__/ReactNativeAttributePayload-test.js @@ -0,0 +1,22 @@ +jest.disableAutomock(); + +const ReactNativeAttributePayload = require('ReactNativeAttributePayload'); +const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); +const StyleSheet = require('StyleSheet'); + +describe('ReactNativeAttributePayload', () => { + + describe('create', () => { + it('works with custom style processors', () => { + StyleSheet.setStyleAttributePreprocessor('fontFamily', (nextValue) => 'Wingdings'); + + const updatePayload = ReactNativeAttributePayload.create( + {style: {fontFamily: 'Comic Sans'}}, + {style: ReactNativeStyleAttributes}, + ); + + expect(updatePayload.fontFamily).toEqual('Wingdings'); + }); + }); + +}); diff --git a/Libraries/StyleSheet/StyleSheet.js b/Libraries/StyleSheet/StyleSheet.js index f4959870db284d..468c157b12d2de 100644 --- a/Libraries/StyleSheet/StyleSheet.js +++ b/Libraries/StyleSheet/StyleSheet.js @@ -13,6 +13,7 @@ var PixelRatio = require('PixelRatio'); var ReactNativePropRegistry = require('ReactNativePropRegistry'); +var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); var StyleSheetValidation = require('StyleSheetValidation'); var flatten = require('flattenStyle'); @@ -162,6 +163,34 @@ module.exports = { */ flatten, + /** + * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will + * not be reliably announced. The whole thing might be deleted, who knows? Use + * at your own risk. + * + * Sets a function to use to pre-process a style property value. This is used + * internally to process color and transform values. You should not use this + * unless you really know what you are doing and have exhausted other options. + */ + setStyleAttributePreprocessor(property: string, process: (nextProp: mixed) => mixed) { + let value; + + if (typeof ReactNativeStyleAttributes[property] === 'string') { + value = {}; + } else if (typeof ReactNativeStyleAttributes[property] === 'object') { + value = ReactNativeStyleAttributes[property]; + } else { + console.error(`${property} is not a valid style attribute`); + return; + } + + if (__DEV__ && typeof value.process === 'function') { + console.warn(`Overwriting ${property} style attribute preprocessor`); + } + + ReactNativeStyleAttributes[property] = { ...value, process }; + }, + /** * Creates a StyleSheet style reference from the given object. */ @@ -172,5 +201,5 @@ module.exports = { result[key] = ReactNativePropRegistry.register(obj[key]); } return result; - } + }, };