React native get photo name from camera roll [ios]

Question

Im using react native for ios development
Im pretty new to react native and im having a difficult to understand how to get image file name from the photo library . Im trying to using cameraroll .

Answer 1

filename is available in v0.57 but they only does not change the PropTypes in JS side. But it is added in v0.58.

Add to V0.57:

In node_module/react-native/libraries/CameraRoll/CameraRoll.js overwrite following code. You can copy and paste over the same code or only add filename parts.

type GetPhotosReturn = Promise<{
  edges: Array<{
    node: {
      type: string,
      group_name: string,
      image: {
        uri: string,
        height: number,
        width: number,
        isStored?: boolean,
        filename: string,
        playableDuration: number,
      },
      timestamp: number,
      location?: {
        latitude?: number,
        longitude?: number,
        altitude?: number,
        heading?: number,
        speed?: number,
      },
    },
  }>,
  page_info: {
    has_next_page: boolean,
    start_cursor?: string,
    end_cursor?: string,
  },
}>;

/**
 * Shape of the return value of the `getPhotos` function.
 */
const getPhotosReturnChecker = createStrictShapeTypeChecker({
  edges: PropTypes.arrayOf(
    /* $FlowFixMe(>=0.66.0 site=react_native_fb) This comment suppresses an
     * error found when Flow v0.66 was deployed. To see the error delete this
     * comment and run Flow. */
    createStrictShapeTypeChecker({
      node: createStrictShapeTypeChecker({
        type: PropTypes.string.isRequired,
        group_name: PropTypes.string.isRequired,
        image: createStrictShapeTypeChecker({
          uri: PropTypes.string.isRequired,
          height: PropTypes.number.isRequired,
          width: PropTypes.number.isRequired,
          filename: PropTypes.string
          isStored: PropTypes.bool,
          playableDuration: PropTypes.number.isRequired,
        }).isRequired,
        timestamp: PropTypes.number.isRequired,
        location: createStrictShapeTypeChecker({
          latitude: PropTypes.number,
          longitude: PropTypes.number,
          altitude: PropTypes.number,
          heading: PropTypes.number,
          speed: PropTypes.number,
        }),
      }).isRequired,
    }),
  ).isRequired,
  page_info: createStrictShapeTypeChecker({
    has_next_page: PropTypes.bool.isRequired,
    start_cursor: PropTypes.string,
    end_cursor: PropTypes.string,
  }).isRequired,
});

And in node_modules/@types/react-native/index.d.ts overwrite following code:

export interface GetPhotosReturnType {
    edges: {
        node: {
            type: string;
            group_name: string;
            image: {
                uri: string;
                height: number;
                width: number;
                filename: string,
                isStored?: boolean;
            };
            timestamp: number;
            location: {
                latitude: number;
                longitude: number;
                altitude: number;
                heading: number;
                speed: number;
            };
        };
    }[];

    page_info: {
        has_next_page: boolean;
        start_cursor?: string;
        end_cursor?: string;
    };
}

Answer 2

The returned object takes the following shape:

node{
    "type":
    "group_name": 
    "image": {
                "uri": 
                "height": 
                "width": 
                "isStored": 
              },
              .....

There isn't name property, You can add name property like as following code in RCTCameraRollManager.m;

NSString *name = [result defaultRepresentation].filename;
 @"node": @{
              @"type": [result valueForProperty:ALAssetPropertyType],
              @"group_name": [group valueForProperty:ALAssetsGroupPropertyName],
              @"image": @{
                @"uri": uri,
                @"name" : name,
...