Enabling PointerEvents in Expo

[orhels]

When testing out RSD we ran into a problem where ':active' styling on buttons where not applied. From this comment we figured out that we needed to enable the PointerEvents feature flag. This was not that well documented both in RSD's documentation and in expo's documentation, so we thought we should share our (naive) implementation of this.

Create two plugins that modifies MainApplication and AppDelegate:

// withDispatchPointerEventsAndroid.ts

import { ConfigPlugin, withMainApplication } from 'expo/config-plugins';

export const withDispatchPointerEventsAndroid: ConfigPlugin = (config) => {
	return withMainApplication(config, (cfg) => {
		const contents = cfg.modResults.contents;
		const lines = contents.split('\n');

		const importIndex = lines.findIndex((line) => /^import com.facebook.soloader.SoLoader/.test(line));

		const loaderIndex = lines.findIndex((line) => /SoLoader\.init\(this, OpenSourceMergedSoMapping\)/.test(line));

		cfg.modResults.contents = [
			...lines.slice(0, importIndex + 1),
			'import com.facebook.react.config.ReactFeatureFlags;',
			...lines.slice(importIndex + 1, loaderIndex + 1),
			'    ReactFeatureFlags.dispatchPointerEvents = true;',
			...lines.slice(loaderIndex + 1),
		].join('\n');

		return cfg;
	});
};

// withDispatchPointerEventsIOS.ts

import { withAppDelegate, ConfigPlugin } from 'expo/config-plugins';

export const withDispatchPointerEventsIOS: ConfigPlugin = (config) => {
	return withAppDelegate(config, (cfg) => {
		const contents = cfg.modResults.contents;
		const lines = contents.split('\n');
		const importIndex = lines.findIndex((line) => /^#import "AppDelegate.h"/.test(line));
		const initialPropsIndex = lines.findIndex((line) => /self.initialProps = @{};/.test(line));

		cfg.modResults.contents = [
			...lines.slice(0, importIndex + 1),
			'#import <React/RCTConstants.h>',
			...lines.slice(importIndex + 1, initialPropsIndex + 1),
			'RCTSetDispatchW3CPointerEvents(YES);',
			...lines.slice(initialPropsIndex + 1),
		].join('\n');

		return cfg;
	});
};

Note: the regex used to find where to add the modifications can be different depending on your setup.

Add the plugins to your app.config

// plugins.ts

const withMyPlugins: ConfigPlugin = (config) => {
	return withPlugins(config, [
		withDispatchPointerEventsAndroid,
		withDispatchPointerEventsIOS,
	]);
};

export default withMyPlugins;

// app.config.ts

export default {
  name: 'my app',
  plugins: ['./plugins'],
};

Enable the feature flag in your index file where you register the root component:

// index.ts
import { registerRootComponent } from 'expo';
import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';

import App from './App';

ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;

registerRootComponent(App);

Hope that helps!

[necolas]

There's some effort being made to roll this out by default in React Native, eventually