menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team
Show previous messages

December 14, 2020 at 4:08pm
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',
},
});
🥺🥺🥺😔😔
HELP

December 18, 2020 at 8:35pm
I want to use prepack instead of webpack when react bundle. How can I do this?

December 28, 2020 at 7:25pm
Hi guys, I want to use Sanity with react. I signed in npm i -g /cli ... got version 2.1.0 BUT SANITY INIT sais -bash: sanity: command not found... why?

December 29, 2020 at 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!
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
}
Edited

December 30, 2020 at 9:15am

January 6, 2021 at 4:04pm
Good day
Pls I need help on react
Am using external js, which was link to the app from the index.html file of the public folder.
I noticed that when the page get tender for the first time the actions click works but when navigating to other pages,
the action won't work until the page is refreshed
Pls help me out on this

January 7, 2021 at 7:35am
Hey, anyone who can help me by providing drag and drop form fields or related example code in functional components.
example:

January 15, 2021 at 10:00pm
Hello dear, have a good time
How to make instagram clone and amazon clone and youtube clone and ... www.courses.bangimo.com

February 1, 2021 at 11:09pm
good evening dear developers, I want to use react native contact to access my contacts but my application crashes on startup. when i remove i getContacts code the application chews. I need your help, I am working on a project and I have a deadline to meet

February 2, 2021 at 12:30pm
Hi developers I m looking for a friend to work on react together. I mean just reactjs body :) We can determine a common tutorial then we can develop each other. If somenone says okay for this, get in touch me please
Edited

February 7, 2021 at 2:45pm
React native can be crazy sometimes, mine has refused to give me the latest snapshot of my state
Hello, I am looking to get pointed in the right direction with a react router and react transition group issue.
I am creating a routed slide transition based on this project https://github.com/nicgirault/dynamic-transitions. I am able to get this partially working as the enter transition works, but the exit does not always work as the actual component gets unmounted before the exit transition.
In the uploaded gif we can see the first exit has content, but the second exit loses its content. I am using childFactory in the TransitionGroup which seems to be working as we see the divs properly get the right classes. I just can't figure out why the content unmounts before the transition.
Another note is that the exit works with the root path /, and is not working on any other ex. /routeName. I have looked into causes being css, properly setting keys, the routes themselves too no avail. Any help would be appreciated.

February 10, 2021 at 10:05am
I am trying to display a component 3 time. I have an array of object but when I try to the slice method it shows an error "can not read property slice of undefined.

February 15, 2021 at 10:05am
Hi , guys I am trying to visualise Arduino sensor data to my react app in real time any one have any idea how to do it ? On localhost only I don't wanna deploy it
Show more messages