Gotchas:

For react-native run-android errors:

• Always have the latest gradle installed from :

Gradle | Installation

Also, run the following commands after that:

mkdir /opt/gradle
unzip -d /opt/gradle gradle-4.10.2-bin.zip
export PATH=$PATH:/opt/gradle/gradle-4.10.2/bin

• Apart from that, do the following:
  1. Go to your React native Project -> android
  2. Create a file local.properties
  3. paste your Android SDK path like below
     • in Windows sdk.dir = C:\\\\Users\\\\USERNAME\\\\AppData\\\\Local\\\\Android\\\\sdk
     • in macOS sdk.dir = /Users/USERNAME/Library/Android/sdk
     • in linux sdk.dir = /home/USERNAME/Android/Sdk
  4. Then, react-native run android runs smoothly.

For error on phone/emulator: bundling failed: Error: Unable to resolve module /../react-transform-hmr/lib/index.js

Run the following: react-native start --reset-cache

For accessing CameraRoll on Android (with iOS) to get photos of user:

• Refer the code below:

import React, { Component } from "react";
import {
  Dimensions,
  ScrollView,
  StyleSheet,
  View,
  Text,
  CameraRoll,
  Button,
  PermissionsAndroid,
  Platform,
  Image
} from "react-native";

const { width, height } = Dimensions.get("window");

export default class App extends Component {
  state = { photos: [] };

  checkPlatform = async () => {
    if (Platform.OS === "ios") {
      this.getPhotos();
    }
    if (Platform.OS === "android") {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
          {
            title: "Alert",
            message: "This app would like to access your camera roll."
          }
        );
        console.log("granted: ", granted);
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          this.getPhotos();
        } else {
          console.log("Camera permission denied");
        }
      } catch (err) {
        console.warn(err);
      }
    }
  };

  getPhotos = async () => {
    try {
      const data = await CameraRoll.getPhotos({
        first: 10,
        assetType: "All"
      });
      console.log("data: ", data);
      this.setState({ photos: data.edges });
    } catch (err) {
      console.log("error:", err);
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Camera Roll Demo</Text>
        <Button onPress={this.checkPlatform} title="Get Photos" />
        <ScrollView>
          <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
            {this.state.photos.map((image, index) => (
              <Image
                source={{
                  uri: image.node.image.uri
                }}
                style={{
                  width: width / 2,
                  height: width / 2
                }}
              />
            ))}
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 30,
    flex: 1
  }
});

• Follow this answer for only Android (if above doesn't work):

  READ_EXTERNAL_STORAGE permission is in manifest but still doesn't work

• For iOS, we have to do some manual config inside Xcode before writing code above:

  To do this, we'll need to go ahead & open the Xcode project.

  Once the Xcode project is open, do the following:

  1. Right click on Libraries in the folders on the left.
  2. Choose Add files to "YOURPROJECTNAME".
  3. Navigate to the node_modules folder of your project, & choose the following item: node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj
  4. Click on Build Phases -> Link Binary With Libraries
  5. Click on the + button, & choose libRCTCameraRoll.a.
  6. Click on Info.plist
  7. Add a new property: Privacy - Photo Library Usage Description with the value of 'This application would like to access your camera roll'.