Location Permissions (to render current position on the mapView)

#1

does not ask for permissions, everything else is working fine.

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { ChatApi } from '../../../constants/api';
import { LoadingScreen } from '../../commons';
import { ChatList } from './components';
import styles from './styles/HomeScreen';
import { FontAwesome } from '@expo/vector-icons';
import Colors from '../../../constants/Colors';
import * as Expo from 'expo';
import { Components } from 'expo';


const chatApi = new ChatApi();

class HomeScreen extends Component {
  static defaultProps = {
    chatApi
  }

  static navigationOptions = {
    header: {
      style: { backgroundColor: Colors.redColor }
    },
    tabBar: {
      icon: ({ tintColor }) => (
        <FontAwesome
          name="home"
          size={25}
          color={tintColor}
        />
      )
    }
  }

  state = {
    loading: false,
    chats: []
  }
  async getLocationAsync() {
    const { Location, Permissions } = expo;
    const { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status === 'granted') {
      return Location.getCurrentPositionAsync({enableHighAccuracy: true});
    } else {
      throw new Error('Location permission not granted');
    }
  }

  async componentDidMount() {
    this.setState({ loading: true });
    const chats = await this.props.chatApi.fetchGroupChats();
    this.setState({ loading: false, chats });

  }

  render() {
    if (this.state.loading) {
      return <LoadingScreen />;
    }
    return (
      <View style={styles.root}>
        <Components.MapView
          style={{flex: 1}}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
        <View style={styles.bottomContainer}>
          <ChatList chats={this.state.chats} />
        </View>
      </View>
    );
  }
}

export default HomeScreen;
0 Likes

#2

Add this.getLocationAsync(); to componentWillMount()

1 Like

#3

awesome! thank you! Now our location object looks like this - not exactly a lat or long - {"_45":0,"_81":0,"_65":null,"_54":null}

0 Likes

#4

this returns a promise, thats Lori and Ide for the help! I got it mostly working

1 Like

#5

after refactoring around for redux, i am getting success on ios and logging a location object. but returns a location request time out because of an unhandled promise rejection on android

my calls are defined here -

https://github.com/amlcodes/chat-frontend/blob/develop/constants/api.js

and my second issue is to port that location data over into this MapView here

https://github.com/amlcodes/chat-frontend/blob/develop/src/screens/home/HomeScreen.js.

0 Likes