feat: make react-native-share and react-native-haptic-feedback optional (#1744)

Author: madsroskar

docusaurus/docs/reactnative/basics/getting_started.mdx

@@ -70,14 +70,14 @@ Most if not all of the required packages now support auto-linking so setup shoul
 <TabItem value='yarn'>
 
 ```bash
-yarn add @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-share react-native-svg
+yarn add @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-svg
 ```
 
 </TabItem>
 <TabItem value='npm'>
 
 ```bash
-npm install @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-share react-native-svg
+npm install @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-svg
 ```
 
 </TabItem>
@@ -199,6 +199,64 @@ include ':react-native-video'
 project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
 ```
 
+#### Sharing attachments
+
+Install `react-native-share` in your React Native project.
+
+Installing this package will allow your users to share attachments from the gallery using the native sharing interface on their devices.
+
+<Tabs
+  defaultValue='yarn'
+  values={[
+    { label: 'Yarn', value: 'yarn' },
+    { label: 'npm', value: 'npm' },
+  ]}
+>
+<TabItem value='yarn'>
+
+```bash
+yarn add react-native-share
+```
+
+</TabItem>
+<TabItem value='npm'>
+
+```bash
+npm install react-native-share
+```
+
+</TabItem>
+</Tabs>
+
+#### Haptic feedback
+
+Install `react-native-haptic-feedback` in your React Native project.
+
+Installing this package will enable haptic feedback when scaling images in the image gallery if the scaling hits the higher or lower limits for its value.
+
+<Tabs
+  defaultValue='yarn'
+  values={[
+    { label: 'Yarn', value: 'yarn' },
+    { label: 'npm', value: 'npm' },
+  ]}
+>
+<TabItem value='yarn'>
+
+```bash
+yarn add react-native-haptic-feedback
+```
+
+</TabItem>
+<TabItem value='npm'>
+
+```bash
+npm install react-native-haptic-feedback
+```
+
+</TabItem>
+</Tabs>
+
 ### AndroidX Support
 
 > AndroidX is a major step forward in the Android ecosystem, and the old support library artifacts are being deprecated.

package/native-package/package.json

@@ -28,5 +28,12 @@
   "scripts": {
     "prepack": " cp ../../README.md .",
     "postpack": "rm README.md"
+  },
+  "devDependencies": {
+    "@react-native-camera-roll/camera-roll": "^5.0.2",
+    "@types/react-native-share": "^3.3.3",
+    "react-native-document-picker": "^8.1.1",
+    "react-native-haptic-feedback": "^1.14.0",
+    "react-native-image-crop-picker": "^0.38.0"
   }
 }

package/native-package/src/handlers/NetInfo.ts

@@ -0,0 +1,43 @@
+import { default as OriginalNetInfo, NetInfoState } from '@react-native-community/netinfo';
+
+export const NetInfo = {
+  addEventListener(listener) {
+    let unsubscribe;
+    // For NetInfo >= 3.x.x
+    if (OriginalNetInfo.fetch && typeof OriginalNetInfo.fetch === 'function') {
+      unsubscribe = OriginalNetInfo.addEventListener(({ isConnected, isInternetReachable }) => {
+        // Initialize with truthy value when internetReachable is still loading
+        // if it resolves to false, listener is triggered with false value and network
+        // status is updated
+        listener(isInternetReachable === null ? isConnected : isConnected && isInternetReachable);
+      });
+      return unsubscribe;
+    } else {
+      // For NetInfo < 3.x.x
+      unsubscribe = OriginalNetInfo.addEventListener('connectionChange', () => {
+        // @ts-ignore
+        OriginalNetInfo.isConnected.fetch().then((isConnected: NetInfoState) => {
+          listener(isConnected);
+        });
+      });
+
+      return unsubscribe.remove;
+    }
+  },
+  fetch() {
+    return new Promise((resolve, reject) => {
+      // For NetInfo >= 3.x.x
+      if (OriginalNetInfo.fetch && typeof OriginalNetInfo.fetch === 'function') {
+        OriginalNetInfo.fetch().then(({ isConnected }) => {
+          resolve(isConnected);
+        }, reject);
+      } else {
+        // For NetInfo < 3.x.x
+        // @ts-ignore
+        OriginalNetInfo.isConnected.fetch().then((isConnected: NetInfoState) => {
+          resolve(isConnected);
+        }, reject);
+      }
+    });
+  },
+};

package/native-package/src/handlers/Sound.tsx

@@ -0,0 +1,26 @@
+import AudioVideoPlayer from '../optionalDependencies/Video';
+
+export const Sound = {
+  initializeSound: null,
+  // eslint-disable-next-line react/display-name
+  Player: AudioVideoPlayer
+    ? ({ onBuffer, onEnd, onLoad, onProgress, paused, soundRef, style, uri }) => (
+        <AudioVideoPlayer
+          audioOnly={true}
+          onBuffer={onBuffer}
+          onEnd={onEnd}
+          onError={(error: Error) => {
+            console.log(error);
+          }}
+          onLoad={onLoad}
+          onProgress={onProgress}
+          paused={paused}
+          ref={soundRef}
+          source={{
+            uri,
+          }}
+          style={style}
+        />
+      )
+    : null,
+};

package/native-package/src/handlers/Video.tsx

@@ -0,0 +1,22 @@
+import AudioVideoPlayer from '../optionalDependencies/Video';
+export const Video = AudioVideoPlayer
+  ? ({ onBuffer, onEnd, onLoad, onProgress, paused, repeat, style, uri, videoRef }) => (
+      <AudioVideoPlayer
+        ignoreSilentSwitch={'ignore'}
+        onBuffer={onBuffer}
+        onEnd={onEnd}
+        onError={(error) => {
+          console.error(error);
+        }}
+        onLoad={onLoad}
+        onProgress={onProgress}
+        paused={paused}
+        ref={videoRef}
+        repeat={repeat}
+        source={{
+          uri,
+        }}
+        style={style}
+      />
+    )
+  : null;

package/native-package/src/handlers/compressImage.ts

@@ -0,0 +1,34 @@
+// @ts-ignore this module does not have a type declaration
+import ImageResizer from 'react-native-image-resizer';
+
+type CompressImageParams = {
+  compressImageQuality: number;
+  height: number;
+  uri: string;
+  width: number;
+};
+
+export const compressImage = async ({
+  compressImageQuality = 1,
+  height,
+  uri,
+  width,
+}: CompressImageParams) => {
+  try {
+    const { uri: compressedUri } = await ImageResizer.createResizedImage(
+      uri,
+      height,
+      width,
+      'JPEG',
+      Math.min(Math.max(0, compressImageQuality), 1) * 100,
+      0,
+      undefined,
+      false,
+      'cover',
+    );
+    return compressedUri;
+  } catch (error) {
+    console.log(error);
+    return uri;
+  }
+};

package/native-package/src/handlers/deleteFile.ts

@@ -0,0 +1,11 @@
+import RNFS from 'react-native-fs';
+
+export const deleteFile = async ({ uri }: { uri: string }) => {
+  try {
+    await RNFS.unlink(uri);
+    return true;
+  } catch (error) {
+    console.log('File deletion failed...');
+    return false;
+  }
+};

package/native-package/src/handlers/getLocalAssetUri.ts

@@ -0,0 +1,10 @@
+import { CameraRoll } from '@react-native-camera-roll/camera-roll';
+
+export const getLocalAssetUri = async (remoteUri: string) => {
+  try {
+    const localUri = await CameraRoll.save(remoteUri);
+    return localUri;
+  } catch {
+    throw new Error('getLocalAssetUri Error');
+  }
+};

package/native-package/src/handlers/getPhotos.ts

@@ -0,0 +1,39 @@
+import { PermissionsAndroid, Platform } from 'react-native';
+import { CameraRoll, GetPhotosParams } from '@react-native-camera-roll/camera-roll';
+
+export const getPhotos = async ({ after, first }: Pick<GetPhotosParams, 'after' | 'first'>) => {
+  try {
+    if (Platform.OS === 'android') {
+      const readExternalStoragePermissionAndroid =
+        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE;
+      const hasPermission = await PermissionsAndroid.check(readExternalStoragePermissionAndroid);
+      if (!hasPermission) {
+        const granted = await PermissionsAndroid.request(readExternalStoragePermissionAndroid, {
+          buttonNegative: 'Deny',
+          buttonNeutral: 'Ask Me Later',
+          buttonPositive: 'Allow',
+          message: 'Permissions are required to access and share photos.',
+          title: 'Photos Access',
+        });
+        if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
+          throw new Error('getPhotos Error');
+        }
+      }
+    }
+    const results = await CameraRoll.getPhotos({
+      after,
+      assetType: 'All',
+      first,
+      include: ['fileSize', 'filename', 'imageSize', 'playableDuration'],
+    });
+    const assets = results.edges.map((edge) => ({
+      ...edge.node.image,
+      source: 'picker',
+    }));
+    const hasNextPage = results.page_info.has_next_page;
+    const endCursor = results.page_info.end_cursor;
+    return { assets, endCursor, hasNextPage };
+  } catch (_error) {
+    throw new Error('getPhotos Error');
+  }
+};

package/native-package/src/handlers/index.ts

@@ -0,0 +1,11 @@
+export * from './shareImage';
+export * from './deleteFile';
+export * from './compressImage';
+export * from './getLocalAssetUri';
+export * from './getPhotos';
+export * from './NetInfo';
+export * from './saveFile';
+export * from './takePhoto';
+export * from './triggerHaptic';
+export * from './Sound';
+export * from './Video';