@shoutem/ui 8.3.0-rc.2 → 9.0.0-rc.0

package/components/ScrollView/ScrollView.js

@@ -1,80 +1,60 @@
-import React, { PureComponent } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { Animated } from 'react-native';
-import autoBindReact from 'auto-bind/react';
+import { useFocusEffect } from '@react-navigation/native';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { ScrollDriver } from '@shoutem/animation';
+import { AnimationDriverContext, ScrollDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
-import {
-  ScrollDriverContext,
-  ScrollDriverProvider,
-} from './ScrollDriverProvider.js';
 
-class ScrollView extends PureComponent {
-  static DriverProvider = ScrollDriverProvider;
-
-  static DriverContext = ScrollDriverContext;
-
-  constructor(props, context) {
-    super(props, context);
-
-    autoBindReact(this);
-
-    this.animationDriver =
-      props.driver ||
+const ScrollView = ({ driver, onScroll, primary, style, ...otherProps }) => {
+  const animationDriver = useRef(
+    driver ||
       new ScrollDriver(
         { useNativeDriver: true, nativeScrollEventThrottle: 20 },
-        props.onScroll,
-      );
-  }
-
-  componentDidMount() {
-    const { driverProvider } = this.context;
-    const { primary } = this.props;
-
-    if (driverProvider) {
-      driverProvider.setAnimationDriver(this.animationDriver, primary);
+        onScroll,
+      ),
+  );
+  const animationDriverContext = useContext(AnimationDriverContext);
+
+  // When transition to and back from the screen containing the scrollview,
+  // we want to switch to appropriate animation driver. We use the following hook
+  // to derive the new driver and cascading styles before the actual navigation transition is done
+  // to avoid rerendering when the actual nav transition completes
+  useFocusEffect(() => {
+    const {
+      animationDriver: prevAnimationDriver,
+      setAnimationDriver,
+    } = animationDriverContext;
+
+    if (setAnimationDriver) {
+      setAnimationDriver(animationDriver.current, primary);
     }
-  }
 
-  componentDidUpdate() {
-    const { driver } = this.props;
+    return () => {
+      if (prevAnimationDriver) {
+        setAnimationDriver(prevAnimationDriver);
+      }
+    };
+  });
 
-    if (driver && this.animationDriver !== driver) {
-      this.animationDriver = driver;
+  useEffect(() => {
+    if (driver && animationDriver.current !== driver) {
+      animationDriver.current = driver;
     }
-  }
-
-  setWrappedInstance(component) {
-    this.wrappedInstance = component;
-  }
-
-  render() {
-    const { style, ...otherProps } = this.props;
-    const { driverProvider } = this.context;
-    const { scrollViewProps } = this.animationDriver;
-    const { contentContainerStyle, ...otherStyle } = style;
-
-    return (
-      <ScrollDriverContext.Provider
-        value={{
-          driverProvider,
-          animationDriver: this.animationDriver,
-        }}
-      >
-        <Animated.ScrollView
-          ref={this.setWrappedInstance}
-          contentContainerStyle={contentContainerStyle}
-          {...scrollViewProps}
-          {..._.omit(otherProps, 'onScroll')}
-          style={otherStyle}
-        />
-      </ScrollDriverContext.Provider>
-    );
-  }
-}
-
-ScrollView.contextType = ScrollDriverContext;
+  }, [driver]);
+
+  const { scrollViewProps } = animationDriver?.current;
+  const { contentContainerStyle, ...otherStyle } = style;
+
+  return (
+    <Animated.ScrollView
+      contentContainerStyle={contentContainerStyle}
+      {...scrollViewProps}
+      {..._.omit(otherProps, 'onScroll')}
+      style={otherStyle}
+    />
+  );
+};
 
 ScrollView.propTypes = {
   ...Animated.ScrollView.propTypes,
@@ -87,27 +67,4 @@ ScrollView.defaultProps = {
 
 const StyledScrollView = connectStyle('shoutem.ui.ScrollView')(ScrollView);
 
-function getRNScrollViewComponent(context) {
-  // wrappedInstance.wrappedInstance._component:
-  //   1st wrappedInstance -> StyledScrollView
-  //   2nd wrappedInstance -> ScrollView (Shoutem UI)
-  //   _component -> Animated.ScrollView
-  // more info about _component: https://stackoverflow.com/questions/42051368/scrollto-is-undefined-on-animated-scrollview
-  return _.get(context, 'wrappedInstance.wrappedInstance._component');
-}
-
-StyledScrollView.prototype.scrollTo = function scrollTo(coordinates) {
-  const scrollView = getRNScrollViewComponent(this);
-  if (scrollView) {
-    scrollView.scrollTo(coordinates);
-  }
-};
-
-StyledScrollView.prototype.scrollToEnd = function scrollToEnd(animation) {
-  const scrollView = getRNScrollViewComponent(this);
-  if (scrollView) {
-    scrollView.scrollToEnd(animation);
-  }
-};
-
 export { StyledScrollView as ScrollView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "8.3.0-rc.2",
+  "version": "9.0.0-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -51,7 +51,8 @@
     "react": ">=19.0.0",
     "react-native": ">=0.78.0",
     "react-native-gesture-handler": "*",
-    "react-native-safe-area-context": "*"
+    "react-native-safe-area-context": "*",
+    "@react-navigation/native": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/components/ScrollView/ScrollDriverProvider.js

@@ -1,92 +0,0 @@
-import React, { Children, createContext, PureComponent } from 'react';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import { DriverShape, ScrollDriver } from '@shoutem/animation';
-
-export const ScrollDriverContext = createContext({});
-
-/**
- * Use this component if you want to share animation driver between unreachable siblings.
- * Just wrap their parent component with it. We use it to share an instance of ScrollDriver
- * between Screen and NavigationBar automatically. ScrollView from @shoutem/ui uses it to
- * register its driver.
- */
-export class ScrollDriverProvider extends PureComponent {
-  constructor(props, context) {
-    super(props, context);
-
-    this.setupAnimationDriver(props, context);
-  }
-
-  setupAnimationDriver(props, context) {
-    const { onAnimationDriverChange } = this.props;
-
-    if (props.driver) {
-      this.animationDriver = props.driver;
-    } else if (context.driverProvider) {
-      this.animationDriver = context.animationDriver;
-    } else if (!this.animationDriver) {
-      this.animationDriver = new ScrollDriver(
-        { useNativeDriver: true, nativeScrollEventThrottle: 20 },
-        props.onScroll,
-      );
-    }
-
-    if (onAnimationDriverChange) {
-      onAnimationDriverChange(this.animationDriver);
-    }
-  }
-
-  setAnimationDriver(driver, primaryScrollView) {
-    if (driver || !this.animationDriver || primaryScrollView) {
-      const { onAnimationDriverChange } = this.props;
-      const { driverProvider } = this.context;
-
-      _.assign(this.animationDriver, driver);
-      if (onAnimationDriverChange) {
-        onAnimationDriverChange(driver);
-      }
-
-      if (driverProvider) {
-        driverProvider.setAnimationDriver(driver, primaryScrollView);
-      }
-    }
-  }
-
-  render() {
-    const { children } = this.props;
-
-    return (
-      <ScrollDriverContext.Provider
-        value={{
-          driverProvider: this,
-          animationDriver: this.animationDriver,
-        }}
-      >
-        {children && Children.only(children)}
-      </ScrollDriverContext.Provider>
-    );
-  }
-}
-
-ScrollDriverProvider.contextType = ScrollDriverContext;
-
-// We disable this eslint rule because the props are being utilized indirectly
-// through componentDidUpdate's usage of setupAnimationDriver
-/* eslint-disable react/no-unused-prop-types */
-ScrollDriverProvider.propTypes = {
-  children: PropTypes.node,
-  driver: DriverShape,
-  // Used to propagate animation driver changes to components that aren't
-  // children of ScrollDriver, recieves driver as argument.
-  // TODO: Rewrite for new context API.
-  onAnimationDriverChange: PropTypes.func,
-  onScroll: PropTypes.func,
-};
-
-ScrollDriverProvider.defaultProps = {
-  children: undefined,
-  driver: undefined,
-  onAnimationDriverChange: undefined,
-  onScroll: undefined,
-};