SyntaxError when adding TextInput to my app - react-native

Question

I'm building an app in React Native,
When I add the TextInput to my code I get an SyntaxError:
Adjacent JSX elements must be wrapped in an enclosing tag (85:6)
I've checked the file and all elements are closed properly and I've got no syntax error I've noticed.
What causes this error to appear?
File
import React, { Component } from 'react';
import {
AppRegistry,
ListView,
View,
Text,
StyleSheet,
Image,
ImageBackground,
Button,
TouchableOpacity,
TextInput,
} from 'react-native';
import { createStackNavigator, } from 'react-navigation';
const image1 = require('./assets/card-0.png')
const image2 = require('./assets/card-2.png')
const image3 = require('./assets/card-3.png')
const image4 = require('./assets/card-4.png')
const image5 = require('./assets/card-5.png')
// Row data (hard-coded)
const rows = [
{id: 0, club: 'Club Air', genre: 'Hip Hop / R&B', image: image1},
{id: 1, club: 'Abe', genre: 'Hip Hop / R&B', image: image2},
{id: 2, club: 'John Doe', genre: 'Hip Hop / R&B', image: image3},
{id: 3, club: 'Encore', genre: 'Hip Hop / R&B', image: image4},
{id: 4, club: 'Jimmy Whoo', genre: 'Hip Hop / R&B', image: image5},
]
// Row comparison function
const rowHasChanged = (r1, r2) => r1.id !== r2.id
// DataSource template object
const ds = new ListView.DataSource({rowHasChanged})
export class HomeScreen extends Component {
static navigationOptions = {
// title: 'Alpha',
header: null,
};
state = {
dataSource: ds.cloneWithRows(rows)
}
renderRow = (rowData) => {
return (
<View style={styles.card}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
<View style={styles.innerCard}>
<Image
style={styles.imageCard}
source={rowData.image}
/>
<Text style={styles.innerText}>
{rowData.club}
</Text>
</View>
<View style={styles.outerCard}>
<Text style={styles.outerText}>
{rowData.genre}
</Text>
<Text style = {styles.outerTexts}>
View
</Text>
</View>
</TouchableOpacity>
</View>
)
}
render() {
return (
<View>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</View>
<ListView
style={styles.container}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black',
},
button: {
backgroundColor: 'transparent',
width: '50%',
},
textInput: {
height: 30,
borderWidth: 1,
borderColor: '#DD016B',
marginBottom: 10,
marginHorizontal: 10,
},
card: {
marginBottom: 15,
},
innerCard: {
height:110,
},
imageCard: {
width: 500,
height: 150,
paddingTop: 0,
paddingBottom: 0,
marginBottom:0,
marginTop: 0,
},
innerText: {
color: 'white',
marginBottom: 0,
fontSize: 35,
position: 'absolute',
top: 100,
},
outerText: {
color: '#DD016B',
marginBottom: 0,
marginTop: 50,
width: 100,
},
})
AppRegistry.registerComponent('App', () => App)
export default createStackNavigator({
Home: {
screen: HomeScreen,
},
}, {
initialRouteName: 'Home',
});

Answer 1

Your render() method has to return only one element. The solution is simple:
render() {
return (
<View>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</View>
<ListView
style={styles.container}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
)
}
has to become
render() {
return (
<View>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<ListView
style={styles.container}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</View>
)}