In this episode we will check some parts of Expo SDK. Using the Expo SDK you can access system functionality such as contacts, camera and more.

We will see how to get the phone contacts and Geolocation.

Getting Contacts

Let's try to get the phone contacts. From a TabBar Expo blank Application we will:

  • Changing the Constructor
  constructor(props) {
    super(props);
    let contacts = [{ name: "Loading..." }];
    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      dataSource: this.ds.cloneWithRows(contacts)
    };
  }

We will add a ListView in our render method.

<ListView
  dataSource={this.state.dataSource}
  renderRow={rowData => <Text>{rowData.name}</Text>}
/>

And we will use a function to get the contacts from the phone.

showFirstContactAsync = () => {
    Exponent.Contacts.getContactsAsync().then(contacts => {
      if (contacts.length > 0) {
        let dataSource = this.ds.cloneWithRows(contacts);
        console.log(contacts);
        this.setState({ dataSource });
      }
    });
  };

And our render method will be:

  render() {
    this.showFirstContactAsync();
    return (
      <View style={styles.container}>
        <ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}
        >
          <View style={styles.welcomeContainer}>
            <Image
              source={require("../assets/images/expo-wordmark.png")}
              style={styles.welcomeImage}
            />
          </View>

          <View style={styles.getStartedContainer}>

            <MonoText style={styles.getStartedText}>
              Get Contacts and Location
            </MonoText>

            <ListView
              dataSource={this.state.dataSource}
              renderRow={rowData => <Text>{rowData.name}</Text>}
            />
          </View>
        </ScrollView>
      </View>
    );

What we should see on the screen is a lis of all the phone contacts.

You can see in our repository the code of this part

Location

Expo SDK also has Location feature.

We will add some information in our state and import the necessary things.

    this.state = {
      dataSource: this.ds.cloneWithRows(contacts),
      location: null,
      errorMessage: null
    };
import { Contacts, Constants, Location, Permissions } from "expo";

We need to have a function to get the location. This will return a JSON with the location information.

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== "granted") {
      this.setState({
        errorMessage: "Permission to access location was denied"
      });
    }

    let location = await Location.getCurrentPositionAsync({});
    this.setState({ location });
  };

We will request the location when the component will mount.

componentWillMount() {
  if (Platform.OS === "android" && !Constants.isDevice) {
    this.setState({
      errorMessage: "Oops, this will not work on Sketch in an Android emulator. Try it on your device!"
    });
  } else {
    this._getLocationAsync();
  }
}

In our render method we will get the location.

  let location = "Waiting..";
  if (this.state.errorMessage) {
    location = this.state.errorMessage;
  } else if (this.state.location) {
    location = JSON.stringify(this.state.location);
  }

And we will just render this in our render method:

<Text>{location}</Text>

You can see in our repository the code of this episode.

Summary

In this episode we saw how to use the Expo SDK and get the contacts and get the location from your phone.

In this week, we are studying about Expo. Stay tunned!

Resources