[RN 0.65.x] Adapt unsubscription for new EventEmitter API

[retyui]

Summary

Issue: #243

// React Native 0.65.x +
typeof Dimensions.removeListener //function
Dimensions.removeListener(...) // print warning

Test Plan

What's required for testing (prerequisites)?

• React Native >= 0.65

What are the steps to reproduce (after prerequisites)?

npx react-native init rn66
cd rn66
yarn add @react-native-community/hooks
# update App.js (see code below)
yarn start
yarn android # start project on android
# tap on "Toggle" button

// App.js

import React, {useState} from 'react';
import {Text, View, ScrollView, Button} from 'react-native';
import {
  useAccessibilityInfo,
  useAppState,
  useBackHandler,
  useCameraRoll,
  useClipboard,
  useDimensions,
  useImageDimensions,
  useKeyboard,
  useInteractionManager,
  useDeviceOrientation,
  useLayout,
} from '@react-native-community/hooks';

const img = {
  uri: 'https://occ-0-1068-92.1.nflxso.net/dnm/api/v6/E8vDc_W8CLv7-yMQu8KMEC7Rrr8/AAAABeV0Af4XqVIi8qSUEeV_llbkH9B-TyiTGukOX7pSFxAuAyoc9q-e--ErSFvK4dLjE7tYDAr1L0PXAja28cDsLWwGdA_A.jpg?r=43c',
};

function Hooks() {
  const a = {
    AccessibilityInfo: useAccessibilityInfo(),
    AppState: useAppState(),
    BackHandler: useBackHandler(() => {
      return true;
    }),
    CameraRoll: useCameraRoll(),
    Clipboard: useClipboard(),
    Dimensions: useDimensions(),
    ImageDimensions: useImageDimensions(img),
    Keyboard: useKeyboard(),
    InteractionManager: useInteractionManager(),
    DeviceOrientation: useDeviceOrientation(),
    Layout: useLayout(),
  };

  return <Text>{JSON.stringify(a, null, 2)}</Text>;
}

function App() {
  const [s, setS] = useState(true);

  return (
    <View padding={50} flex={1}>
      <Button title="Toggle" onPress={() => setS(p => !p)} />
      <ScrollView
        style={{
          borderWidth: 1,
          borderColor: 'red',
          flex: 1,
        }}>
        {s ? <Hooks /> : null}
      </ScrollView>
    </View>
  );
}

export default App;

Compatibility

OS	Implemented
iOS	✅
Android	✅
Web	✅

Checklist

• I have tested this on a device and a simulator
• I added the documentation in README.md
• I updated the typed files (TS and Flow)
• I've created a snack to demonstrate the changes: LINK HERE

[retyui]

useDeviceOrientation

 WARN  EventEmitter.removeListener('change', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 
Hooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.rn66&modulesOnly=false&runModule=true:109708:115

useDimensions

 WARN  EventEmitter.removeListener('change', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 
Hooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.rn66&modulesOnly=false&runModule=true:109708:101

useAppState

 WARN  EventEmitter.removeListener('appStateDidChange', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 
Hooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.rn66&modulesOnly=false&runModule=true:109708:97

useAccessibilityInfo

 WARN  EventEmitter.removeListener('deviceEventName', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 
Hooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.rn66&modulesOnly=false&runModule=true:109708:115
 WARN  EventEmitter.removeListener('deviceEventName', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 
Hooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.rn66&modulesOnly=false&runModule=true:109708:115
 WARN  EventEmitter.removeListener('deviceEventName', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 
Hooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.rn66&modulesOnly=false&runModule=true:109708:115
 WARN  EventEmitter.removeListener('deviceEventName', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 
Hooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.rn66&modulesOnly=false&runModule=true:109708:115
 WARN  EventEmitter.removeListener('deviceEventName', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 
Hooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.rn66&modulesOnly=false&runModule=true:109708:115
 WARN  EventEmitter.removeListener('deviceEventName', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 
Hooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.rn66&modulesOnly=false&runModule=true:109708:115

[LinusU]

Awesome, thanks! 🙏

[pvinis]

🚀 PR was released in v2.8.0 🚀

[KrisLau]

Still getting the error for useKeyboard on react-native: 0.66.3

EventEmitter.removeListener('keyboardWillShow', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`. 

[retyui]

useKeyboard was modified in another PR: #244

[retyui]

As I understand RN team first, remove EventEmitter.removeListener but after time restore that method but added a warning

facebook/react-native@035718b