@shoutem/ui 8.2.5-rc.0 → 8.3.0-rc.0

package/babel.config.js

@@ -1,7 +1,7 @@
 module.exports = function(api) {
   api.cache(true);
   return {
-    presets: ['module:metro-react-native-babel-preset'],
+    presets: ['module:@react-native/babel-preset'],
     plugins: ['@babel/plugin-proposal-class-properties'],
   };
 };

package/components/ScrollView/ScrollDriverProvider.js

@@ -1,8 +1,10 @@
-import { Children, PureComponent } from 'react';
+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
@@ -10,28 +12,12 @@ import { DriverShape, ScrollDriver } from '@shoutem/animation';
  * register its driver.
  */
 export class ScrollDriverProvider extends PureComponent {
-  static childContextTypes = {
-    driverProvider: PropTypes.object,
-    animationDriver: DriverShape,
-  };
-
-  static contextTypes = {
-    animationDriver: DriverShape,
-  };
-
   constructor(props, context) {
     super(props, context);
 
     this.setupAnimationDriver(props, context);
   }
 
-  getChildContext() {
-    return {
-      driverProvider: this,
-      animationDriver: this.animationDriver,
-    };
-  }
-
   setupAnimationDriver(props, context) {
     const { onAnimationDriverChange } = this.props;
 
@@ -70,10 +56,21 @@ export class ScrollDriverProvider extends PureComponent {
   render() {
     const { children } = this.props;
 
-    return children && Children.only(children);
+    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 */

package/components/ScrollView/ScrollView.js

@@ -3,22 +3,18 @@ import { Animated } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { DriverShape, ScrollDriver } from '@shoutem/animation';
+import { ScrollDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
-import { ScrollDriverProvider } from './ScrollDriverProvider.js';
+import {
+  ScrollDriverContext,
+  ScrollDriverProvider,
+} from './ScrollDriverProvider.js';
 
 class ScrollView extends PureComponent {
-  static contextTypes = {
-    animationDriver: DriverShape,
-    driverProvider: PropTypes.object,
-  };
-
-  static childContextTypes = {
-    animationDriver: DriverShape,
-  };
-
   static DriverProvider = ScrollDriverProvider;
 
+  static DriverContext = ScrollDriverContext;
+
   constructor(props, context) {
     super(props, context);
 
@@ -32,12 +28,6 @@ class ScrollView extends PureComponent {
       );
   }
 
-  getChildContext() {
-    return {
-      animationDriver: this.animationDriver,
-    };
-  }
-
   componentDidMount() {
     const { driverProvider } = this.context;
     const { primary } = this.props;
@@ -61,21 +51,31 @@ class ScrollView extends PureComponent {
 
   render() {
     const { style, ...otherProps } = this.props;
+    const { driverProvider } = this.context;
     const { scrollViewProps } = this.animationDriver;
     const { contentContainerStyle, ...otherStyle } = style;
 
     return (
-      <Animated.ScrollView
-        ref={this.setWrappedInstance}
-        contentContainerStyle={contentContainerStyle}
-        {...scrollViewProps}
-        {..._.omit(otherProps, 'onScroll')}
-        style={otherStyle}
-      />
+      <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;
+
 ScrollView.propTypes = {
   ...Animated.ScrollView.propTypes,
   primary: PropTypes.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "8.2.5-rc.0",
+  "version": "8.3.0-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -17,7 +17,7 @@
     "@react-native-community/datetimepicker": "6.2.0",
     "@shoutem/animation": "0.17.0",
     "@shoutem/eslint-config-react": "~1.0.6",
-    "@shoutem/theme": "~0.14.0",
+    "@shoutem/theme": "0.15.0-rc.0",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
@@ -48,14 +48,14 @@
     "tinycolor2": "1.4.1"
   },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-native": ">=0.61.5",
+    "react": ">=19.0.0",
+    "react-native": ">=0.78.0",
     "react-native-gesture-handler": "*",
     "react-native-safe-area-context": "*"
   },
   "devDependencies": {
-    "@babel/core": "7.16.7",
-    "@babel/plugin-proposal-decorators": "7.16.7",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-proposal-decorators": "7.20.13",
     "@babel/register": "7.9.0",
     "@shoutem/eslint-config-react-native": "~1.0.2",
     "babel-eslint": "10.1.0",
@@ -67,14 +67,13 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-react-native": "3.11.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "jest": "27.5.1",
-    "metro-react-native-babel-preset": "0.66.2",
+    "jest": "^29.6.3",
+    "@react-native/babel-preset": "0.78.0",
     "path": "0.12.7",
     "prettier": "1.19.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-test-renderer": "17.0.2"
+    "react": "19.0.0",
+    "react-native": "0.78.0",
+    "react-test-renderer": "19.0.0"
   },
   "nativeDependencies": [
     "@react-native-community/datetimepicker",