Use ReactNativeStyleAttributes to process fontFamily

[brentvatne]

Description

Expo is moving away from using the .expo extension to identify "managed" apps in SDK 41, so we are patching libraries that currently depend on the extension to fork behavior.

The solution used here is more generic - we use the same process function that is set via StyleSheet.setStyleAttributePreprocessor [(the method we use in Expo managed apps to scope fonts)](https://github.com/expo/expo/blob/fb198eb79ddf6a2a6f51b2ca2dfa0788c5fa769a/packages/expo/src/Expo.fx.tsx#L36-L39. In the (unlikely) case that other (non-Expo) folks are depending on this behavior it will also work out of the box in native-stack. I'm not crazy about doing a deep import into React Native like this, but there is no public API for getting StyleSheet preprocessors from React Native.

An alternative approach could be to expose a font preprocessor setter for react-native-screens. We could then do something like this in the expo package:

try {
  const { setFontProcessor } = require('react-native-screens');
  setFontProcessor(processFontFamily);
} catch { /* react-native-screens is not included in this project */ }

Changes

Deleted FontProcessor.expo.js and replaced with using ReactNativeStyleAttributes.fontFamily?.process function if it's defined.

Screenshots / GIFs

After deleting FontProcessor.expo.js

After patching FontProcessor.js

Test code and steps to reproduce

For the following app (expo init, blank template), copy the changes into react-native-screens in node_modules, delete the .expo.js file.

// App.js
import * as React from "react";
import { Button, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { enableScreens } from "react-native-screens";
import { createNativeStackNavigator } from "react-native-screens/native-stack";
import { useFonts, Mansalva_400Regular } from '@expo-google-fonts/mansalva';

enableScreens();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate("Profile")}
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator screenOptions={{
      headerTitleStyle: {
        fontFamily: 'Mansalva_400Regular',
        fontSize: 30,
      }
    }}>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  let [fontsLoaded] = useFonts({
    Mansalva_400Regular,
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/mansalva": "^0.1.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.9.2",
    "expo": "~40.0.0",
    "expo-font": "~8.4.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.2",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Updated documentation:
  • https://github.com/software-mansion/react-native-screens/blob/master/README.md
  • https://github.com/software-mansion/react-native-screens/blob/master/native-stack/README.md
  • https://github.com/software-mansion/react-native-screens/blob/master/createNativeStackNavigator/README.md
  • https://github.com/software-mansion/react-native-screens/blob/master/src/index.d.ts
  • https://github.com/software-mansion/react-native-screens/blob/master/src/native-stack/types.tsx
• Ensured that CI passes