import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MapView, Permissions, Location } from 'expo';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            region: null,
        }
        this._getLocationAsync();
    }
    _getLocationAsync = async () => {
        let { status } = await Permissions.askAsync(Permissions.LOCATION);
            if(status !== 'granted')
            console.log('Permission to access location was denied');
        let location = await Location.getCurrentPositionAsync({
            enabledHighAccuracy: true
        })
        let region = {
            latitude: location.coords.latitude,
            longitude: location.coords.longitude,
            latitudeDelta: 0.045,
            longitudeDelta: 0.045,
        }
        this.setState({region: region})
    }
    render() {
        return (
            <View style={styles.container}>
                <Text>Home</Text>
                <MapView
                    initialRegion={this.state.region}
                    showsUserLocation={true}
                    showsCompass={true}
                    rotateEnabled={false}
                    style={{flex:1}}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

ABOUT US
const Container = styled.div<InfoSectionProps>`
display: flex;
flex-direction: column;
letter-spacing: 2px;
line-height: 1.8em;
align-items: center;
padding:2rem;
${props => props.primary && css`
background: yellow /*doesnt work*/
 `
background: ${props => props.primary ? "red" : "yellow"} /*gives both infoSection yellow background, so not recognising primary props*/
}
`
export default (props: InfoSectionProps) => {
 console.log(props)
 const { header, subheader, content, logo, footerLogo, cta, ctaText } = props
 return (
  <Container>
   {
    logo && <LogoImage src={logo} alt="logo" />
   }
   <Content >
    <Header> {header}</Header>
    <SubHeader>{subheader}</SubHeader>
    {content!.map((paragraph: string, index: number) =>
     <p key={index}>{paragraph}</p>
    )}
    {cta && <BookNowButton>{ctaText}</BookNowButton>}
   </Content>
   {
    footerLogo && <BGroundImage src={footerLogo} alt="cat" />
   }
  </Container >
 );
}
APP.JS
<InfoSection
       primary
       logo={Logo}
       header={homeSection.header}
       subheader={homeSection.subheader}
       content={homeSection.content}
       cta={homeSection.cta}
       ctaText={homeSection.ctaText}
      />
      <InfoSection
       logo={Logo}
       header={aboutUsSection.header}
       subheader={aboutUsSection.subheader}
       content={aboutUsSection.content}
       footerLogo={Boss}
      />
export interface InfoSectionProps {
 primary?: boolean,
 logo?: any;
 header?: string;
 subheader?: string;
 content?: string[];
 footerLogo?: any;
 cta?: boolean,
 ctaText?: string
}