I am pretty new to React Native and am getting this error:
Adjacent JSX elements must be wrapped
Code:
render(){
return(
<UpperPadding>
<View style={styles.upperContainer}>
<TouchableHighlight onPress={() => Actions.register()>
<Image
source={require('./../images/registerbutton.png')} style={styles.background}
/>
</TouchableHighlight> //THIS IS WHERE I GET THE ERROR
</View>
</UpperPadding>
);
}
}
Thankful for any help!
Thanks!
Related
If i click on Lungs Banks i want to move to another screen How can i do this
<KeyboardAvoidingWrapper>
<WelcomeStyledContainer>
<StatusBar style="dark" />
<OrganHeading>
<OrganHeadingText>Donate Able Organ</OrganHeadingText>
</OrganHeading>
<View style={styles.container}>
<View style={styles.Box}>
<View style={styles.inerBox}>
<CardStyle>
<CardImage source={require('./../assets/organImage/lungs.png')} />
<CardText>Lungs Bank</CardText>
</CardStyle>
</View>
</View>
Below solution will work for you if you are using React-navigation.
UI Screen:
<CardText onPress={()=>navigation.navigate("YOUR SCREEN NAME HERE")}>Lungs Bank</CardText>
Card Text Component:
const CardText = ({onPress}) => {
return <Text onPress={onPress}>{props.children}</Text>;
}
Thanks!
You can use react-navigation
library to get started with navigation in react-native.
I will be very happy if you can help me. I am making react native expo app. I have code that displays information from the database. When I inserted the code to add an image, I had an error, why?
Error:
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (79:12)
<View>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) =>
<Image
source={require('../assets/rose-blue-flower-rose-blooms-67636.jpeg')}
/>
<Text
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
otherParam: rowData.article_title,
});
}}
>{rowData.article_title}</Text>
}
/>
</View>
<View>
<ListView
dataSource={this.state.dataSource}
renderSeparator={this.ListViewItemSeparator}
renderRow={rowData => (
<>
<Image
source={require("../assets/rose-blue-flower-rose-blooms-67636.jpeg")}
/>
<Text
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate("Details", {
otherParam: rowData.article_title,
});
}}
>
{rowData.article_title}
</Text>
</>
)}
/>
</View>;
This issue is that you're rendering in your expression two components that are on the same level. so you must have a JSX fragment or another div as a single parent in your return statement of the renderRow.. I believe the above code should solve the problem
You just need to wrap the elements with a Fragment element. The reason why is ListView requires one element to work off of for a "row". You can simulate this with the fragment :)
<React.Fragment>
<Image />
<Text />
</React.Fragment>
theres some nice syntax for fragments if your compiler supports it
<>
</>
To apply it to your code
<ListView
dataSource={this.state.dataSource}
renderSeparator={this.ListViewItemSeparator}
renderRow={rowData => (
<React.Fragment>
<Image
source={require("../assets/rose-blue-flower-rose-blooms-67636.jpeg")}
/>
<Text
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate("Details", {
otherParam: rowData.article_title,
});
}}
>
{rowData.article_title}
</Text>
</ React.Fragment>
)}
/>
I am using React-Navigation but I guess You don't really need to have a prior knowledge about it.
So I have a header Component which looks like this
const Header = (props) => {
return (
<View style={headerContainer}>
<View>
<Button onPress={() => props.navigation.navigate('Home')}
title="Go Back"/>
</View>
<Text style={header}> Knicx
<Text style={headerSecondary}> Crypto Ticker </Text>
</Text>
</View>
)
}
Now, In the above notice the button, Which I am currently showing on all the pages
<Button onPress={() => props.navigation.navigate('Home')}
title="Go Back"/>
But I don't want it to be there on some specific pages, like HomeScreen to say the least.
Now, One solution is to remove the <Header /> component in my homepage, Copy the above code snippet, past it in my HomeScreen and remove the Component ( sort of like hardcoding ) or two create two Header component, one with button and one without button
[Question:] But I was thinking if we could toggle the visibility of button dynamically or stack it on the top of <Header /> ? Can someone please tell me how can we do it? (No, We can set the opacity of the button to zero and change it whenever we need it)
[Update:] We can use redux to manage/pass the state but the problem is that in React-native we do not have display: none and I don't want to change use the opacity
Send showHomeButton: boolean as a prop to header
const Header = props => (
<View style={headerContainer}>
{this.props.showHomeButton && (
<View>
<Button onPress={() => props.navigation.navigate('Home')} title="Go Back" />
</View>
)}
<Text style={header}>
{' '}
Knicx
<Text style={headerSecondary}> Crypto Ticker </Text>
</Text>
</View>
);
Here is my phone screen I tried ScrollView with keyboardShouldPersistTaps, but it didn't work. I have a ScrollView for Autocomplete suggestions, and when user can types there, they should also be able to select from suggestions. However, without closing keyboard, it is not possible in my case. Here is my work
<ScrollView
scrollEnabled={false}
keyboardShouldPersistTaps={true}>
<View style={{ maxHeight: 220 }}>
<ScrollView style={Style.suggestionContainer}
scrollEnabled={true} >
{this.state.showOptions.map(this.renderSuggestions)}
</ScrollView>
</View>
</ScrollView>
.
.
.
private renderSuggestions(option: MultiInputQuestionOption) {
return (
<TouchableOpacity onPress={this.addSelection.bind(this, option)} >
<Text style={Style.suggestions}>
{option[this.props.titleKey]}
</Text>
</TouchableOpacity >
)
}
Is there any possible solution?
You need to pass the key keyboardShouldPersistTaps=‘handled’ on scroll view which contains the TextInput:-
<ScrollView keyboardShouldPersistTaps=‘handled’>
...
<TextInput />
</ScrollView>
And if you are having issue inside of a modal then You need to pass key keyboardShouldPersistTaps=‘handled’ on All scrollview which are in component stack for the screen. In the ancestors/parent of the Modal also.
Like in my case:
const CountryModal=(props)=>{
return(
<Modal
visible={props.visible}
transparent={false}
{...props}
>
<ScrollView keyboardShouldPersistTaps=‘handled’>
…
</ScrollView>
/>
)
}
In Parent class:
In the parent class where ancestors of modal is there. You need to pass key keyboardShouldPersistTaps=‘handled’`.
class Parent extends Component{
render(){
return(
<ScrollView keyboardShouldPersistTaps=‘handled’> // pass ‘handled’ here also
…
<CountryModal /> // Its the same modal being used as a component in parent class.
</ScrollView>
)
}
Try adding
keyboardShouldPersistTaps={'always'}
to the second ScrollView as well.
Use the 'handled' value for keyboardShouldPersistTaps property because the true value is deprecated. use the keyboardShouldPersistTaps in two ScrollViews and handle your keyboard state in somewhere else by using Keyboard.dismiss() function.
I am using react-native-elements to speed up the development of my react-native app.
I am using react-native ScrollView in my List element to enable scroll functionality.
Unfortunately, it seems that the List element is overflowing at the bottom, hiding the last few list item elements from view
Any idea why this is the case?
EDIT: Here is the render function of the list component
render () {
const { transactions, handleEditTransaction, handleDeleteTransaction } = this.props
return (
<View>
<View>
<List>
<ScrollView>
{
transactions.map((item, i) => (
<TransactionListItem
key={i}
item={item}
/>
))
}
</ScrollView>
</List>
</View>
</View>
)
}
I had the same problem. To solve this, go to the root <View> and add style={{flex: 1}}.
This means to also add this to the parent component if necessary.
<View style={{flex:1}}>
<ScrollView>
//Content here
</ScrollView>
</View>
parent component (if required)...
<View style={{flex:1}}>
<ChildComponent />
</View>