Feat/optional dependencies (#1198)

* Create optional dependencies for safe requires

* Remove GestureHandlerPackage

* Update src/optionalDependencies/PickerPackage.ts

Co-authored-by: Miki Leib <[email protected]>

* Fix lint issues

Co-authored-by: Miki Leib <[email protected]>

Author: ethanshar

generatedTypes/optionalDependencies.d.ts

@@ -0,0 +1,5 @@
+declare let BlurViewPackage: any;
+declare let DateTimePickerPackage: any;
+declare let NetInfoPackage: any;
+declare let PickerPackage: any, CommunityPickerPackage: any;
+export { BlurViewPackage, DateTimePickerPackage, NetInfoPackage, PickerPackage, CommunityPickerPackage };

generatedTypes/optionalDependencies/BlurViewPackage.d.ts

@@ -0,0 +1,2 @@
+declare let BlurViewPackage: any;
+export default BlurViewPackage;

generatedTypes/optionalDependencies/DateTimePickerPackage.d.ts

@@ -0,0 +1,2 @@
+declare let DateTimePickerPackage: any;
+export default DateTimePickerPackage;

generatedTypes/optionalDependencies/GestureHandlerPackage.d.ts

@@ -0,0 +1,2 @@
+declare let GestureHandlerPackage: any;
+export default GestureHandlerPackage;

generatedTypes/optionalDependencies/NetInfoPackage.d.ts

@@ -0,0 +1,2 @@
+declare let NetInfoPackage: any;
+export default NetInfoPackage;

generatedTypes/optionalDependencies/PickerPackage.d.ts

@@ -0,0 +1,2 @@
+declare let PickerPackage: any, CommunityPickerPackage: any;
+export { PickerPackage, CommunityPickerPackage };

generatedTypes/optionalDependencies/index.d.ts

@@ -0,0 +1,4 @@
+export { default as DateTimePickerPackage } from './DateTimePickerPackage';
+export { default as BlurViewPackage } from './BlurViewPackage';
+export { default as NetInfoPackage } from './NetInfoPackage';
+export { PickerPackage, CommunityPickerPackage } from './PickerPackage';

lib/components/WheelPicker/index.js

@@ -7,18 +7,14 @@ import WheelPickerItem from './WheelPickerItem';
 import {Constants} from '../../../src/helpers';
 import {Typography, Colors} from '../../../src/style';
 
-/* Safely require picker component */
-let Picker = () => null;
-if (Constants.isIOS) {
-  try {
-    Picker = require('@react-native-picker/picker').Picker; // New package
-  } catch (e) {
-    try {
-      Picker = require('@react-native-community/picker').Picker; // Deprecated package
-      console.warn(`RNUILib Picker will soon migrate to use "@react-native-picker/picker" package instead of '@react-native-community/picker'`);
-    } catch (e) {
-      console.error(`RNUILib Picker requires installing "@react-native-picker/picker" dependency`);
-    }
+import {PickerPackage, CommunityPickerPackage} from '../../../src/optionalDependencies';
+const Picker = PickerPackage?.Picker || CommunityPickerPackage?.Picker || (() => null);
+
+if (!PickerPackage) {
+  if (CommunityPickerPackage) {
+    console.warn(`RNUILib Picker will soon migrate to use "@react-native-picker/picker" package instead of '@react-native-community/picker'`);
+  } else {
+    console.error(`RNUILib Picker requires installing "@react-native-picker/picker" dependency`);
   }
 }
 

src/components/card/index.tsx

@@ -15,15 +15,14 @@ import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import Image from '../image';
 import CardImage from './CardImage';
 import CardSection, {CardSectionProps} from './CardSection';
+import {BlurViewPackage} from '../../optionalDependencies';
 // @ts-ignore
 import Assets from '../../assets';
 import CardContext from './CardContext';
 import * as CardPresenter from './CardPresenter';
 
-let BlurView: any;
-try {
-  BlurView = require('@react-native-community/blur').BlurView;
-} catch (error) {} // warning in ctor, depends if user pass enableBlur
+const BlurView = BlurViewPackage?.BlurView;
+
 
 const DEFAULT_BORDER_RADIUS = BorderRadiuses.br40;
 const DEFAULT_SELECTION_PROPS = {

src/components/connectionStatusBar/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import {StyleSheet, Text} from 'react-native';
-import NetInfo from '@react-native-community/netinfo';
+import {NetInfoPackage as NetInfo} from '../../optionalDependencies';
 import {Constants} from '../../helpers';
 import {PureBaseComponent} from '../../commons';
 import {Colors, Typography} from '../../style';
@@ -59,15 +59,20 @@ export default class ConnectionStatusBar extends PureBaseComponent {
       isConnected: true,
       isCancelled: false
     };
-    this.getInitialConnectionState();
+    
+    if (NetInfo) {
+      this.getInitialConnectionState();
+    } else {
+      console.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
+    }
   }
 
   generateStyles() {
     this.styles = createStyles();
   }
 
   componentDidMount() {
-    this.unsubscribe = NetInfo.addEventListener(this.onConnectionChange);
+    this.unsubscribe = NetInfo?.addEventListener(this.onConnectionChange);
   }
 
   componentWillUnmount() {
@@ -100,7 +105,7 @@ export default class ConnectionStatusBar extends PureBaseComponent {
   }
 
   async getInitialConnectionState() {
-    const isConnected = (await NetInfo.fetch()).isConnected;
+    const isConnected = (await NetInfo?.fetch()).isConnected;
 
     this.setState({isConnected});
     if (this.props.onConnectionChange) {

src/components/dateTimePicker/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import RNDateTimePicker from '@react-native-community/datetimepicker';
+import {DateTimePickerPackage as RNDateTimePicker} from '../../optionalDependencies';
 import {Constants} from '../../helpers';
 import {Colors} from '../../style';
 import Assets from '../../assets';
@@ -115,6 +115,10 @@ class DateTimePicker extends Component {
       prevValue: props.value,
       value: props.value
     };
+
+    if (!RNDateTimePicker) {
+      console.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
+    }
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -226,6 +230,10 @@ class DateTimePicker extends Component {
   }
 
   renderDateTimePicker() {
+    if (!RNDateTimePicker) {
+      return null;
+    }
+
     const {value, showExpandableOverlay} = this.state;
     const {mode, minimumDate, maximumDate, locale, is24Hour, minuteInterval, timeZoneOffsetInMinutes} = this.props;
 

src/components/modal/index.tsx

@@ -1,15 +1,13 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, Modal as RNModal, ModalProps as RNModalProps, TouchableWithoutFeedback, GestureResponderEvent} from 'react-native';
+import {BlurViewPackage} from '../../optionalDependencies';
 import {Constants} from '../../helpers';
 import {asBaseComponent} from '../../commons/new';
 import TopBar, {ModalTopBarProps} from './TopBar';
 import View from '../../components/view';
 
-let BlurView: any;
-try {
-  BlurView = require('@react-native-community/blur').BlurView;
-} catch (error) {} // warning in ctor, depends if user pass enableBlur
+const BlurView = BlurViewPackage?.BlurView;
 
 export {ModalTopBarProps};
 export interface ModalProps extends RNModalProps {

src/optionalDependencies/BlurViewPackage.ts

@@ -0,0 +1,6 @@
+let BlurViewPackage: any;
+try {
+  BlurViewPackage = require('@react-native-community/blur');
+} catch (error) {}
+
+export default BlurViewPackage;

src/optionalDependencies/DateTimePickerPackage.ts

@@ -0,0 +1,6 @@
+let DateTimePickerPackage: any;
+try {
+  DateTimePickerPackage = require('@react-native-community/datetimepicker')?.default;
+} catch (error) {}
+
+export default DateTimePickerPackage;

src/optionalDependencies/NetInfoPackage.ts

@@ -0,0 +1,6 @@
+let NetInfoPackage: any;
+try {
+  NetInfoPackage = require('@react-native-community/netinfo');
+} catch (error) {}
+
+export default NetInfoPackage;

src/optionalDependencies/PickerPackage.ts

@@ -0,0 +1,10 @@
+let PickerPackage: any, CommunityPickerPackage: any;
+try {
+  PickerPackage = require('@react-native-picker/picker'); // New package
+} catch (error) {
+  try {
+    CommunityPickerPackage = require('@react-native-community/picker'); // Deprecated package
+  } catch (error) {}
+}
+
+export {PickerPackage, CommunityPickerPackage};

src/optionalDependencies/index.ts

@@ -0,0 +1,4 @@
+export {default as DateTimePickerPackage} from './DateTimePickerPackage';
+export {default as BlurViewPackage} from './BlurViewPackage';
+export {default as NetInfoPackage} from './NetInfoPackage';
+export {PickerPackage, CommunityPickerPackage} from './PickerPackage';