Fix/event listener warning

demo/src/screens/componentScreens/CarouselScreen.tsx

@@ -36,6 +36,7 @@ interface State {
 
 class CarouselScreen extends Component<Props, State> {
   carousel = React.createRef<typeof Carousel>();
+  private dimensionsChangeListener: any;
 
   constructor(props: Props) {
     super(props);
@@ -51,11 +52,11 @@ class CarouselScreen extends Component<Props, State> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChange);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChange);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChange);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChange);
   }
 
   onOrientationChange = () => {

src/components/button/index.tsx

@@ -43,21 +43,6 @@ class Button extends PureComponent<Props, ButtonState> {
     }
   }
 
-  componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
-  }
-
-  componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
-  }
-
-  onOrientationChanged = () => {
-    if (Constants.isTablet && this.props.fullWidth) {
-      // only to trigger re-render
-      this.setState({isLandscape: Constants.isLandscape});
-    }
-  };
-
   // This method will be called more than once in case of layout change!
   onLayout = (event: LayoutChangeEvent) => {
     const height = event.nativeEvent.layout.height;

src/components/carousel/index.tsx

@@ -45,6 +45,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   orientationChange?: boolean;
   skippedInitialScroll?: boolean;
   isAutoScrolled: boolean;
+  private dimensionsChangeListener: any;
 
   constructor(props: CarouselProps) {
     super(props);
@@ -106,15 +107,15 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);
 
     if (this.props.autoplay) {
       this.startAutoPlay();
     }
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChanged);
 
     if (this.autoplayTimer) {
       clearInterval(this.autoplayTimer);

src/components/colorPicker/ColorPalette.tsx

@@ -110,13 +110,14 @@ class ColorPalette extends PureComponent<Props, State> {
   usePagination?: boolean = undefined;
   innerMargin?: number = undefined;
   swatchStyles?: StyleProp<ViewStyle>[] = undefined;
+  private dimensionsChangeListener: any;
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChanged);
   }
 
   onOrientationChanged = () => {

src/components/dialog/index.tsx

@@ -107,6 +107,7 @@ class Dialog extends Component<DialogProps, DialogState> {
   };
 
   private styles: any;
+  private dimensionsChangeListener: any;
 
   constructor(props: DialogProps) {
     super(props);
@@ -123,11 +124,11 @@ class Dialog extends Component<DialogProps, DialogState> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChange);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChange);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChange);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChange);
   }
 
   UNSAFE_componentWillReceiveProps(nextProps: DialogProps) {

src/components/gridView/index.tsx

@@ -62,6 +62,7 @@ class GridView extends UIComponent<GridViewProps, State> {
   };
 
   private itemSize?: number;
+  private dimensionsChangeListener: any;
 
   constructor(props: ExistProps) {
     super(props);
@@ -92,11 +93,11 @@ class GridView extends UIComponent<GridViewProps, State> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChanged);
   }
 
   onOrientationChanged = () => {

src/components/slider/index.tsx

@@ -162,6 +162,7 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
   private containerSize: Measurements | undefined;
   private trackSize: Measurements | undefined;
   private thumbSize: Measurements | undefined;
+  private dimensionsChangeListener: any;
 
   constructor(props: SliderProps) {
     super(props);
@@ -225,11 +226,11 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChanged);
   }
 
 

src/components/tabController/index.tsx

@@ -59,6 +59,7 @@ function TabController({
 }: PropsWithChildren<TabControllerProps>) {
   const [screenWidth, setScreenWidth] = useState<number>(Constants.windowWidth);
   const orientation = useRef<orientations>(Constants.orientation);
+  const dimensionsChangeListener = useRef<any>();
 
   if (items?.length < 2) {
     console.error('TabController component expect a minimum of 2 items');
@@ -71,9 +72,9 @@ function TabController({
         setScreenWidth(Constants.windowWidth);
       }
     };
-    Constants.addDimensionsEventListener(onOrientationChange);
+    dimensionsChangeListener.current = Constants.addDimensionsEventListener(onOrientationChange);
     return () => {
-      Constants.removeDimensionsEventListener(onOrientationChange);
+      Constants.removeDimensionsEventListener(dimensionsChangeListener.current || onOrientationChange);
     };
   }, []);
 

src/components/wizard/index.tsx

@@ -28,6 +28,8 @@ class Wizard extends Component<WizardProps, State> {
   static Step: typeof WizardStep;
   static States: typeof WizardStepStates;
 
+  private dimensionsChangeListener: any;
+
   constructor(props: WizardProps) {
     super(props);
 
@@ -37,11 +39,11 @@ class Wizard extends Component<WizardProps, State> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChange);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChange);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChange);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChange);
   }
 
   onOrientationChange = () => {

src/helpers/Constants.ts

@@ -127,14 +127,12 @@ const constants = {
   },
   /* Orientation */
   addDimensionsEventListener: (callback: any) => {
-    Dimensions.addEventListener('change', callback);
+    return Dimensions.addEventListener('change', callback);
   },
   /* Dimensions */
   removeDimensionsEventListener: (callback: any) => {
-    // @ts-expect-error
-    if (Dimensions.remove) {
-      // @ts-expect-error
-      Dimensions.remove('change', callback);
+    if (callback.remove) {
+      callback.remove();
     } else {
       Dimensions.removeEventListener('change', callback);
     }