I tried to code in react native today and tried to write a program with a button and a text that changes with every press:
import { Text, View, StyleSheet, TouchableOpacity, Button, TextInput } from 'react-native';
import Constants from 'expo-constants';
export default () => {
const onButton = () =>
{
myResult(10);
}
return (
<Text>Hello World</Text>
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
)
}
It gives me this error:
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
If I comment the text class or the button class like that:
//<Text>Hello World</Text>
the other class would work.
Any suggestions?
You can't render multiple component like that. Like the error message said, you have to wrap them in an enclosing tag.
<View>
<Text>Hello World</Text>
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
</View>
You are returning 2 components, in react you must return just one component, so your code you could wrapping in two ways:
<View>
<Text>Hello World</Text>
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
</View>
Or using Fragment component of react that will no add a node in your component tree
//You can use Fragment as <></> or <React.Fragment></React.Fragment>
<>
<Text>Hello World</Text>
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
</>
The best option is to wrap it in a <View> tag, as mentioned in the other two answers.
Here is a fun solution, you can even return an array.
Example:
return [
<Text>Hello World</Text>,
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
];
Related
i am trying to put conditions on the Button, in my component. I have a Boolean condition from my Firebase collection for lastRunStatus {cloundFunctions.lastRunStatus} and if it's true i was it to stay green and say 'Cloud Function' and if its false i want it to turn red and say 'somethings wrong.
Any tips, pointers, or code would be highly appreciated :)
import "../../App";
import "semantic-ui-css/semantic.min.css";
import { Icon, Card, Button } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import React from "react";
import "semantic-ui-css/semantic.min.css";
import moment from "moment";
const Cards = ({ cloudFunction }) => {
return (
<Card color="green">
<Card.Content>
<Card.Header>{cloudFunction.id}</Card.Header>
</Card.Content>
<Card.Content extra>
<Icon name="cog" /> Records: {cloudFunction.lastRunLoad}
<br />
<Icon name="cog" />
{cloudFunction.lastRunMessage}
<br />
<Icon name="clock" /> Last Run:{" "}
{moment(cloudFunction.lastRunTime.toDate().toString()).format(
"DD/MM/YYYY HH:mm",
true
)}
<br />
<Icon name="angle double down" />
Schedule: {cloudFunction.schedule}
</Card.Content>
<Card.Content extra>
<div className="ui two buttons">
<Button
basic
type="button"
color="green"
onClick={(e) => {
e.preventDefault();
window.open(cloudFunction.url.toString(), "_blank");
}}
>
Cloud Function
</Button>
</div>
</Card.Content>
</Card>
);
};
export default Cards;
Look at conditions in React. If I understand your correctly, you can do something like:
{cloundFunctions.lastRunStatus ? (
<Button
basic
type="button"
color="green"
onClick={(e) => {
e.preventDefault();
window.open(cloudFunction.url.toString(), "_blank");
}}
>
Cloud Function
</Button>
) : (
<div>Something's wrong</div>
)
I have number of card components in which I'm rendering some images inside. What I'm trying to do is onPress of card retrieving the clicked image.
<TouchableOpacity
onPress={this.viewProduct.bind(this)}
>
<Card>
<CardItem cardBody>
<Image source={require('../../assets/images/products/product_1.jpg')} style={{ height: 200, width: null, flex: 1 }} />
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Text>₹3500</Text>
</Button>
</Left>
<Right>
<Button transparent>
<Text style={styles.offText}>50% off</Text>
</Button>
</Right>
</CardItem>
</Card>
</TouchableOpacity>
I'm rendering the component inside a TouchableOpacity to make it as a clickable element and I have attached a function viewProduct as a event listner.
viewProduct = (item) => {
console.log(`Selected image is ${item.uri}`);
}
But when I click the function I'm not getting the clicked Image. Is there anything I have to bind inside the function or how to retrieve the image onPress of Card.
youre directly giving it a source. you need to extract that into a separate obj and parse that as your image source
check out this snippet:
https://snack.expo.io/#karanwadhwa/stack-overflow-62977355
edit: updated above snack to use local files instead
Not sure why it is asking for a brace there. As far as i can tell all the braces are matched. Is it because of a closing tag is wrong somewhere? I am pretty new to react native so I am having trouble understanding some of the basic formatting that is required.
import React, { Component, Header } from 'react';
import { StyleSheet, View} from 'react-native';
import { Button } from 'react-native-elements';
export default class App extends Component {
render () {
return (
<View
style={styles.contain}>
<Button style={styles.leagueButton} title='League Of Legends' />
<Button style={styles.contain} title='CSGO' />
<Button style={styles.overwatchButton} title='Overwatch' />
<Button style={styles.dota2Button} title='Overwatch' />
<Button style={styles.fortniteButton} title='Fortnite' />
<View/>
<Header>
centerComponent={{ text: 'Games', style: { color: '#fff' } }}
<Header/>
)
}
}
const styles = StyleSheet.create({
leagueButton: {
top: 50
},
contain: {
top: 70
},
overwatchButton: {
top: 90
},
dota2Button: {
top: 110
},
fortniteButton:{
top: 130
}
})
Update:Now I get a JSX closing tag error after adding another header tag
Update again: Render error picture
<Header>
centerComponent={{ text: 'Games', style: { color: '#fff' } }}
<Header/>
Problem is u closed off the Header tag which im guessing the centerComponent is the props of it?
UPDATES:
return (
<View
style={styles.contain}>
<Button style={styles.leagueButton} title='League Of Legends' />
<Button style={styles.contain} title='CSGO' />
<Button style={styles.overwatchButton} title='Overwatch' />
<Button style={styles.dota2Button} title='Overwatch' />
<Button style={styles.fortniteButton} title='Fortnite' />
<View/>
<Header>
centerComponent={{ text: 'Games', style: { color: '#fff' } }}
<Header/>
)
There is only one level of tag can be returned but you're returning both View and Header at the same level. So instead you should wrap both into another View
return (
<View>
<View style={styles.contain}>
<Button style={styles.leagueButton} title='League Of Legends' />
<Button style={styles.contain} title='CSGO' />
<Button style={styles.overwatchButton} title='Overwatch' />
<Button style={styles.dota2Button} title='Overwatch' />
<Button style={styles.fortniteButton} title='Fortnite' />
</View>
<Header
centerComponent={{ text: 'Games', style: { color: '#fff' } }}
/>
</View>)
You can also wrap your <Header> and <View> with a single <React.Fragment> </React.Fragment>. That should fix your error.
Put that around your head and view instead of another <View> </View> or ' ' etc.
It basically wraps your stuff together so that you return only one parent div (to meet jsx requirements) but without needing you to wrap your child components with an actual div or higher order component.
The react fragment tag will disappear at the DOM in effect but still allow you to wrap your same level tags under one parent. In the latest versions of react you can also use the new, shorter syntax:
<>
// Your other components / tags
</>
`.
I was trying to create a login page using react native and native-base. I did follow the instructions from the docs but I still got an error in my coding, Would you guys help me to find where I made wrong at? Thx
Here is my code:
import React, { Component } from "react";
import { View, StatusBar } from "react-native";
import {
Container,
Content,
Form,
Item,
Input,
Label,
Button,
Text
} from "native-base";
class Customerlogin extends Component {
render() {
return (
<Container>
<View>
<StatusBar backgroundColor="#EE5FD6" barStyle="light-content" />
</View>
<Content>
<Form>
<Item floatingLabel>
<Label> Username </Label> <Input />
</Item>
<Item floatingLabel last>
<Label> Password </Label> <Input />
</Item>
</Form>
<Button rounded warning>
<Text> Sign In </Text>
</Button>
</Content>
</Container>
);
}
}
export default Customerlogin;
Thx b4.
My use-case is trigger something when click parent component (TouchableOpacity for example), but trigger nothing when click children component (Screen and others for Example). My case is same like prevent bubbling on web. From docs I've read said that it should use onStartShouldSetResponderCapture, but I still don't understand for the usage. Below is the snippet.
<TouchableOpacity style={styles.container} onPress={() => alert('tes')}
>
<Screen style={styles.screenContainer} onStartShouldSetResponderCapture={() => false}>
<Title>Edit Nama Restoran</Title>
<Divider styleName='line' />
<TextInput
style={{ flex: 1 }}
value={value}
onChangeText={value => this.setState({ value })}
onSubmitEditing={this.handleSubmit}
/>
<View styleName='horizontal' style={styles.nameContainer}>
<Button styleName='confirmation dark' onPress={this.handleSubmit}>
<Text>UPDATE</Text>
</Button>
<Button styleName='confirmation' onPress={onClose}>
<Text>CLOSE</Text>
</Button>
</View>
</Screen>
</TouchableOpacity>
EDIT:
Below is an illustration of my case.
If I click overlay (outside of <Screen>), it triggers an alert (expected).
If I click white dialog (<Screen> and children inside), it triggers an alert too (unexpected). What I need is not trigger alert when click <Screen>.
Updated to show how to do with a modal:
<Modal
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<TextInput
style={{ flex: 1 }}
value={value}
onChangeText={value => this.setState({ value })}
onSubmitEditing={this.handleSubmit}
/>
</Modal>
Not sure if this is the right snippet from your code, but basically the part you want to pop up, pull it out from the touchable opacity and wrap a modal around it. Then on click have it visible/invisible.