React

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',
  },
});

4:09pm

🥺🥺🥺😔😔

4:09pm

HELP

December 18, 2020 at 8:35pm

ticklepick@ticklepick

8:35pm

hello guys

8:36pm

I want to use prepack instead of webpack when react bundle. How can I do this?

December 28, 2020 at 7:25pm

intecfrontend@intecfrontend

7:25pm

Hi guys, I want to use Sanity with react. I signed in npm i -g

@sanity

/cli ... got version 2.1.0 BUT SANITY INIT sais -bash: sanity: command not found... why?

December 29, 2020 at 5:26pm

Jose@jotace

5:26pm

Help pleaseeee!! Newbie here with react & typescript & styled components

I have the a component -say AboutUs- that I want to reuse and style differently, for example giving it a background color of yellow if primary props are true or red if primary props is false.

When I console.log in ABOUT US shows that the first infoSection has primary props, and the second does not.

I have been trying to style those two infoSections differently the component does not seem to take "primary" into consideration despite being passed as props & showing on the console, so I don’t know what I am doing wrong & don’t seem to be able to find the solution googling it…?

Any help/hint would be much appreciated!

5:26pm

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
}