v9 - RN 0.78

demo/package.json

@@ -22,8 +22,8 @@
     "shell-utils": "^1.0.10"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-native": "^0.77.3",
+    "react": "^19.0.0",
+    "react-native": "^0.78.3",
     "react-native-ui-lib": "*",
     "semver": "^5.5.0"
   }

demo/src/configurations.js

@@ -1,4 +1,4 @@
-import {Assets, Colors, Typography, Spacings, TextField} from 'react-native-ui-lib'; // eslint-disable-line
+import {Assets, Colors, Typography, Spacings} from 'react-native-ui-lib'; // eslint-disable-line
 
 export const loadDemoConfigurations = () => {
   Assets.loadAssetsGroup('icons.demo', {
@@ -60,6 +60,4 @@ export const loadDemoConfigurations = () => {
     }
   });
 
-  /* Components */
-  TextField.defaultProps = {preset: TextField.presets.UNDERLINE, ...TextField.defaultProps};
 };

demo/src/index.js

@@ -216,9 +216,6 @@ module.exports = {
       get ScrollBar() {
         return require('./screens/componentScreens/ScrollBarScreen').default;
       },
-      get Marquee() {
-        return require('./screens/componentScreens/MarqueeScreen').default;
-      },
       get NumberInput() {
         return require('./screens/componentScreens/NumberInputScreen').default;
       },
@@ -250,6 +247,9 @@ module.exports = {
       get IncubatorGradient() {
         return require('./screens/incubatorScreens/IncubatorGradientScreen').default;
       },
+      get IncubatorMarquee() {
+        return require('./screens/incubatorScreens/IncubatorMarqueeScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

demo/src/screens/MainScreen.js

@@ -1,8 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import {StyleSheet, FlatList, SectionList, ScrollView} from 'react-native';
-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import {Navigation} from 'react-native-navigation';
 import {
   Assets,
@@ -27,12 +25,6 @@ const chevronIcon = require('../assets/icons/chevronRight.png');
 const FADER_SIZE = 50;
 
 class MainScreen extends Component {
-  static propTypes = {
-    containerStyle: ViewPropTypes.style,
-    renderItem: PropTypes.func,
-    pageStyle: ViewPropTypes.style
-  };
-
   settingsScreenName = 'unicorn.Settings';
 
   static options() {

demo/src/screens/MenuStructure.js

@@ -39,8 +39,7 @@ export const navigationData = {
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},
       {title: 'ScrollBar', tags: 'scroll bar gradient', screen: 'unicorn.components.ScrollBarScreen'},
       {title: 'SearchInputScreen', tags: 'search input', screen: 'unicorn.components.SearchInputScreen'},
-      {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
-      {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}
+      {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'}
     ]
   },
   Form: {
@@ -201,7 +200,8 @@ export const navigationData = {
         tags: 'text field expandable input picker',
         screen: 'unicorn.components.IncubatorExpandableOverlayScreen'
       },
-      {title: 'Gradient', tags: 'gradient', screen: 'unicorn.components.IncubatorGradientScreen'}
+      {title: 'Gradient', tags: 'gradient', screen: 'unicorn.components.IncubatorGradientScreen'},
+      {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.IncubatorMarqueeScreen'}
     ]
   },
   Inspirations: {

demo/src/screens/componentScreens/ChipScreen.tsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, type JSX} from 'react';
 import {Alert} from 'react-native';
 import {Chip, Colors, Spacings, Text, Typography, View, Image} from 'react-native-ui-lib';
 

demo/src/screens/componentScreens/ConversationListScreen.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, {Component, PureComponent} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import {Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line
@@ -121,13 +120,6 @@ class ConversationListScreen extends Component {
 }
 
 class ContactItem extends PureComponent {
-  static propTypes = {
-    item: PropTypes.object,
-    index: PropTypes.number,
-    addRef: PropTypes.func,
-    onSwipeableWillOpen: PropTypes.func
-  };
-
   render() {
     const {item, index, addRef, onSwipeableWillOpen} = this.props;
 

demo/src/screens/componentScreens/FeatureHighlightScreen.tsx

@@ -165,7 +165,11 @@ class FeatureHighlightScreen extends Component<{}, State> {
           </View>
         </View>
         <View center padding-25>
-          <View ref={r => (this.viewRef = r)}>
+          <View
+            ref={r => {
+              this.viewRef = r;
+            }}
+          >
             <Text marginT-20>
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
               industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type

demo/src/screens/componentScreens/NumberInputScreen.tsx

@@ -28,7 +28,7 @@ const DISCOUNT_PERCENTAGE = {min: 1, max: 80};
 const DISCOUNT_PERCENTAGE_VALIDATION_MESSAGE = `Make sure your number is between ${DISCOUNT_PERCENTAGE.min} and ${DISCOUNT_PERCENTAGE.max}`;
 
 const NumberInputScreen = () => {
-  const currentData = useRef<NumberInputData>();
+  const currentData = useRef<NumberInputData>(undefined);
   const [text, setText] = useState<string>('');
   const [showLabel, setShowLabel] = useState<boolean>(true);
   const [exampleType, setExampleType] = useState<ExampleType>('price');

demo/src/screens/componentScreens/OverlaysScreen.tsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, type JSX} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {View, Text, Image, Card, Constants, Colors} from 'react-native-ui-lib'; // eslint-disable-line
 

demo/src/screens/componentScreens/SearchInputScreen.tsx

@@ -6,7 +6,7 @@ const SearchInputScreen = () => {
   const [showCancelBtn, setShowCancelBtn] = useState(false);
   const [showLoader, setShowLoader] = useState(false);
   const [showCustomRightElement, setShowCustomRightElement] = useState(false);
-  const searchInput = useRef<SearchInputRef>();
+  const searchInput = useRef<SearchInputRef>(undefined);
 
   const onChangeText = (text: string) => {
     console.log('UILIB text: ', text);

demo/src/screens/componentScreens/TextFieldScreen.tsx

@@ -34,7 +34,7 @@ export default class TextFieldScreen extends Component {
     isReadonly: false,
     value: 'Initial Value',
     isSearching: false,
-    preset: undefined,
+    preset: TextField.presets.UNDERLINE,
     price: '',
     editable: false
   };

demo/src/screens/componentScreens/TimelineScreen.tsx

@@ -15,7 +15,7 @@ const contents = [
 const TimelineScreen = () => {
   const [anchorIndex, setAnchorIndex] = useState(0);
   const [expand, setExpand] = useState(false);
-  const anchor = useRef();
+  const anchor = useRef(undefined);
 
   const onPress = useCallback(() => {
     setAnchorIndex(anchorIndex === 0 ? 1 : 0);

demo/src/screens/componentScreens/index.js

@@ -30,7 +30,6 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
-  registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
   registrar('unicorn.components.NumberInputScreen', () => require('./NumberInputScreen').default);
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
   registrar('unicorn.components.PanViewScreen', () => require('./PanViewScreen').default);

demo/src/screens/foundationScreens/TypographyScreen.js

@@ -1,16 +1,11 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
 import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib';
 
 const WEIGHTS = ['Thin', 'Light', 'Default', 'Regular', 'Medium', 'Bold', 'Heavy', 'Black'];
 
 export default class TypographyScreen extends Component {
-  static propTypes = {
-    color: PropTypes.string
-  };
-
   static defaultProps = {
     color: Colors.grey10
   };

demo/src/screens/componentScreens/MarqueeScreen.tsx → demo/src/screens/incubatorScreens/IncubatorMarqueeScreen.tsx

@@ -1,6 +1,8 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Marquee, MarqueeDirections, Text, View, Spacings} from 'react-native-ui-lib';
+import {Incubator, MarqueeDirections, Text, View, Spacings} from 'react-native-ui-lib';
+
+const {Marquee} = Incubator;
 import {renderBooleanOption, renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
 export default class MarqueeScreen extends Component<{}> {

demo/src/screens/incubatorScreens/index.js

@@ -5,4 +5,5 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
   registrar('unicorn.components.IncubatorSliderScreen', () => require('./IncubatorSliderScreen').default);
   registrar('unicorn.components.IncubatorGradientScreen', () => require('./IncubatorGradientScreen').default);
+  registrar('unicorn.components.IncubatorMarqueeScreen', () => require('./IncubatorMarqueeScreen').default);
 }

demo/src/screens/realExamples/ListActions/ActionsList.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {Animated, LayoutAnimation, PanResponder, I18nManager} from 'react-native';
 import {Constants, Assets, Colors, View, TouchableOpacity, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line
@@ -17,11 +16,6 @@ const DIRECTIONS = {
 
 export default class ActionsList extends Component {
   static displayName = 'ActionsList';
-
-  static propTypes = {
-    item: PropTypes.object,
-    index: PropTypes.number
-  }
 
   constructor(props) {
     super(props);

docs/getting-started/v8.md

@@ -1,12 +1,13 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 sidebar_label: Migrating v7 -> v8
 title: "Migrating v7 -> v8"
 # path: "/getting-started/v8"
 ---
 ## `react-native-ui-lib@8.x.x`
 
 ## General
+Now supports react-native 0.77  
 `uilib-native` (our native library) has been moved from `dependencies` to `peerDependencies`.  
 Make sure to `pod install` after updating.  
 We do plan on making this optional in the future.
@@ -53,6 +54,10 @@ Check out the full API: https://wix.github.io/react-native-ui-lib/docs/component
 ### ExpandableOverlay (Incubator)
 This component is affected by the Dialog migration  
 
+### Marquee
+This component has been moved to the Incubator
+Android does not start scrolling automatically
+
 ### PanView (new)
  One component to replace all the previous views (`PanGestureView`, `PanDismissibleView`, `PanResponderView`, `PanListenerView`, `PanningProvider`, `asPanViewConsumer` and `PanningContext`).
 - Use `PanView.PanningDirections.X` (or `Dialog.directions.X` where relevant) instead of `PanningProvider.Directions.X`.  
@@ -75,6 +80,9 @@ Removed (use `PanView` instead)
 ### PanResponderView
 Removed (use `PanView` instead)
 
+### Picker
+This component is affected by the Dialog migration  
+
 ### SharedTransition
 Removed
 

docs/getting-started/v9.md

@@ -0,0 +1,21 @@
+---
+sidebar_position: 7
+sidebar_label: Migrating v8 -> v9
+title: "Migrating v8 -> v9"
+# path: "/getting-started/v9"
+---
+## `react-native-ui-lib@9.x.x`
+
+## General
+Now supports react-native 0.78 and React 19  
+
+## Components
+
+### MaskedInput
+Only the newer version is now available (the `migrate` prop is removed)  
+
+## Utils
+
+### modifiers
+extractOwnProps - removed  
+extractComponentProps - removed

docuilib/package.json

@@ -39,12 +39,12 @@
   },
   "devDependencies": {
     "@tsconfig/docusaurus": "^1.0.4",
-    "@types/react": "18.3.24",
+    "@types/react": "19.0.0",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
     "metro-react-native-babel-preset": "^0.77.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-shimmer-placeholder": "^2.0.9",
     "react-native-ui-lib": "8.0.0",