Add StyleSheet.setStyleAttributePreprocessor

Summary:
**Motivation**

On Exponent we load fonts dynamically and assign their native names by appending a session id, so that fonts from one Exponent "experience" do not clash with each other. So, before sending the `fontFamily` to native, we want to change it to the Exponent-scoped `fontFamily`.

Example:

```js
// Before rendering your app
StyleSheet.setStyleAttributePreprocessor('fontFamily', _processFontFamily);

function _processFontFamily(name) {
  // Pass system fonts through
  if (!name || Constants.systemFonts.indexOf(name) >= 0) {
    return name;
  }

  if (!Font.isLoaded(name)) {
    if (__DEV__) {
      console.error(`${name} is not a system font and has not been loaded through Exponent.Font.loadAsync. If you intended to use a system font, make sure you typed the name correctly and that it is supported by the current operating system. If this is a custom font, be sure to load it with Exponent.Font.loadAsync`);
    } else {
      return 'system';
    }
  }

  return `ExponentFont-
Closes https://github.com/facebook/react-native/pull/11138

Differential Revision: D4245518

Pulled By: mkonicek

fbshipit-source-id: bd2452b1129d6675aa7b88e41351f8bb61fa20a3
This commit is contained in:
Brent Vatne
2016-11-29 15:25:10 -08:00
committed by Facebook Github Bot
parent 00f888a318
commit 346858a552
2 changed files with 52 additions and 1 deletions

View File

@@ -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');
});
});
});