Chore/upgrade demo sdk 48.0.4 #2306

README.md

@@ -19,8 +19,10 @@ Check out our [Docs](https://wix.github.io/react-native-ui-lib/). <br>
 Our [Discord Channel](https://discord.gg/2eW4g6Z)
 
 Download our Expo demo app <br>
-<img height="120" src="https://user-images.githubusercontent.com/1780255/76164023-f2171400-6153-11ea-962d-d57b64a08a80.png"> <br>
+<img height="120" src="https://qr.expo.dev/expo-go?owner=vn.chemgio&slug=rnuilib&releaseChannel=default&host=exp.host"> <br>
 (You will need the Expo App)
+or open link in your devices
+[expo ] [exp://exp.host/@vn.chemgio/rnuilib?release-channel=default](exp://exp.host/@vn.chemgio/rnuilib?release-channel=default)
 
 ## Installing
 

demo/package.json

@@ -16,7 +16,7 @@
     "demoRelease": "node ./scripts/demoRelease.js"
   },
   "devDependencies": {
-    "react-native-ui-lib": "*",
+    "react-native-ui-lib": "7.1.0",
     "shell-utils": "^1.0.10"
   },
   "peerDependencies": {

demo/src/index.js

@@ -198,6 +198,9 @@ module.exports = {
       get ColorsScreen() {
         return require('./screens/foundationScreens/ColorsScreen').default;
       },
+      get DarkMode() {
+        return require('./screens/foundationScreens/DarkModeScreen').default;
+      },
       get TypographyScreen() {
         return require('./screens/foundationScreens/TypographyScreen').default;
       },
@@ -214,10 +217,40 @@ module.exports = {
       get ProgressBarScreen() {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },
+      get ScrollBar() {
+        return require('./screens/componentScreens/ScrollBarScreen').default;
+      },
+      get Marquee() {
+        return require('./screens/componentScreens/MarqueeScreen').default;
+      },
+      get NumberInput() {
+        return require('./screens/componentScreens/NumberInputScreen').default;
+      },
+      get WheelPicker() {
+        return require('./screens/componentScreens/WheelPickerScreen').default;
+      },
+      get GridList() {
+        return require('./screens/componentScreens/GridListScreen').default;
+      },
+      get SortableGridList() {
+        return require('./screens/componentScreens/SortableGridListScreen').default;
+      },
       // Incubator
       get PanViewScreen() {
         return require('./screens/incubatorScreens/PanViewScreen').default;
       },
+      get IncubatorSlider() {
+        return require('./screens/incubatorScreens/IncubatorSliderScreen').default;
+      },
+      get IncubatorDialog() {
+        return require('./screens/incubatorScreens/IncubatorDialogScreen').default;
+      },
+      get IncubatorToast() {
+        return require('./screens/incubatorScreens/IncubatorToastScreen').default;
+      },
+      get IncubatorExpandableOverlay() {
+        return require('./screens/incubatorScreens/IncubatorExpandableOverlayScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;
@@ -237,6 +270,30 @@ module.exports = {
       // wrapperScreens
       get TouchableOpacityScreen() {
         return require('./screens/componentScreens/TouchableOpacityScreen').default;
+      },
+      get Modal() {
+        return require('./screens/componentScreens/ModalScreen').default;
+      },
+      get Timeline() {
+        return require('./screens/componentScreens/TimelineScreen').default;
+      },
+      get WithScrollEnabler() {
+        return require('./screens/componentScreens/WithScrollEnablerScreen').default;
+      },
+      get WithScrollReached() {
+        return require('./screens/componentScreens/WithScrollReachedScreen').default;
+      },
+      get Fader() {
+        return require('./screens/componentScreens/FaderScreen').default;
+      },
+      get GridView() {
+        return require('./screens/componentScreens/GridViewScreen').default;
+      },
+      get Playground() {
+        return require('./screens/PlaygroundScreen').default;
+      },
+      get KeyboardAwareScrollView() {
+        return require('./screens/componentScreens/KeyboardAwareScrollViewScreen').default;
       }
     };
   },

demo/src/screens/realExamples/ProductPage/index.tsx

@@ -77,13 +77,12 @@ class Product extends Component {
               migrate
               value={selectedColor}
               onChange={(value: string) => this.setState({selectedColor: value})}
-              rightIconSource={{}}
-              rightIconStyle={{
+              trailingAccessory={<Icon {...{
                 width: 24,
                 height: 24,
                 backgroundColor: colorOptions[selectedColor].color,
                 borderRadius: 12
-              }}
+              }} />}
             >
               {_.map(colorOptions, (colorOption, colorKey) => {
                 return <Picker.Item key={colorKey} value={colorKey} label={colorOption.name}/>;

expoDemo/app.json

@@ -7,7 +7,7 @@
     "privacy": "public",
     "description": "Demo project show case for react-native-ui-lib components",
     "githubUrl": "https://github.com/wix/react-native-ui-lib",
-    "version": "2.0.0",
+    "version": "7.1.0",
     "orientation": "portrait",
     "icon": "https://user-images.githubusercontent.com/1780255/107911939-34e98a80-6f66-11eb-91a6-1eb1b384e429.png",
     "splash": {

expoDemo/metro.config.js

@@ -0,0 +1,28 @@
+const {getDefaultConfig} = require('@expo/metro-config');
+
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+module.exports = (async () => {
+  const {
+    resolver: {sourceExts, assetExts}
+  } = await getDefaultConfig(__dirname);
+  return {
+    transformer: {
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: false
+        }
+      }),
+      babelTransformerPath: require.resolve('react-native-svg-transformer')
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg']
+    }
+  };
+})();

expoDemo/package.json

@@ -1,5 +1,4 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -8,30 +7,35 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-native/normalize-color": "^2.0.0",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/stack": "^6.0.13",
-    "expo": "^46.0.0",
-    "expo-status-bar": "~1.4.0",
+    "@expo/metro-config": "^0.7.1",
+    "@react-native/normalize-color": "^2.1.0",
+    "@react-navigation/native": "^6.1.5",
+    "@react-navigation/stack": "^6.3.15",
+    "expo": "^48.0.4",
+    "expo-status-bar": "~1.4.4",
     "fuzzysearch": "^1.0.3",
     "lodash": "^4.17.21",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.6",
-    "react-native-gesture-handler": "~2.5.0",
-    "react-native-reanimated": "~2.9.1",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-screens": "~3.15.0",
-    "react-native-svg": "12.3.0",
-    "react-native-ui-lib": "snapshot",
-    "react-native-web": "~0.18.7",
-    "unicorn-demo-app": "snapshot"
-  },  
+    "metro-config": "^0.75.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.3",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-haptic-feedback": "^1.14.0",
+    "react-native-navigation": "^7.32.1",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
+    "react-native-svg": "13.4.0",
+    "react-native-svg-transformer": "^1.0.0",
+    "react-native-ui-lib": "^7.1.0",
+    "react-native-web": "~0.18.12",
+    "unicorn-demo-app": "file:../demo"
+  },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@types/react": "~18.0.0",
-    "@types/react-native": "~0.69.1",
-    "typescript": "^4.6.3"
+    "@babel/core": "^7.21.0",
+    "@types/react": "~18.0.28",
+    "@types/react-native": "~0.71.3",
+    "typescript": "^4.9.5"
   },
   "private": true
 }