React Native Bootcamp

Gotchas:

For react-native run-android errors:

• Always have the latest gradle installed from :

Gradle | Installation

Install the Gradle build tool on Linux, macOS or Windows, either manually or using a package manager like SDKMAN!, Homebrew or Scoop.

https://gradle.org/install/

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

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
To request for any permission you can use the below code and add the permissions you need.

https://stackoverflow.com/a/52063254/7636285

• 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'.