Setting map region based on current location

i would really appreciate some help with this issue.

Basically i am trying to pass my current latitude and longtitude via var1 and var2 into the coordinates of the initial region. However, upon running this code there will be an error message stating that Warning: Failed prop type: The prop initialRegion.latitude is marked as required in MapView, but its value is undefined.

I have printed out the value of var1 and var2 to console and it can be seen that they are numbers and are definitely not undefined. Can someone please kindly explain to me what is going on and recommend a solution?

import React, { Component } from 'react';
import { Platform, Text, View, StyleSheet,Dimensions } from 'react-native';
import  MapView, { Marker } from 'react-native-maps';
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = 
    {
      region : 
      {
        latitude: 1.290270,
        longitude: 103.851959,
        latitudeDelta: 0.02,
        longitudeDelta: 0.02,
      },
      location: null,
      errorMessage : null,

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

  _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 });
  };

  render() {
    let text = 'Waiting..';
    if (this.state.errorMessage) {
      text = this.state.errorMessage;
    } else if (this.state.location) {
      var1 = (this.state.location.coords.latitude);
      var2 = (this.state.location.coords.longitude);
      console.log(var1);
      console.log(var2 +" "+typeof(var2));

    }

    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{this.var1, this.var2}</Text>
        <MapView 
        style={styles.mapStyle}  
        initialRegion={{latitude: this.var1,longitude: this.var2, latitudeDelta:0.02, longitudeDelta: 0.02}}
        >
            <Marker
              coordinate={{latitude: 1.290270, longitude: 103.851959}}
              title={'Singapore'}
              description={'Sg505'}
            />
        </MapView> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
  mapStyle: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});