Error Raw Text “” must be wrapped in an explicit <text> component

[MaxwellGover]

I'm getting this error message when trying to input a year into the title prop

Error Raw Text “” must be wrapped in an explicit <text> component

http://stackoverflow.com/questions/42497037/react-native-error-raw-text-1997-must-be-wrapped-in-an-explicit-text-compone?noredirect=1#comment72144666_42497037

Stackoverflow is saying the error is in the <ListItem /> component which in that case there isn't much I can do since it's a component from this library. Anyone else have this issue?

[binoy14]

@MaxwellGover What component is having this issue? Can you provide code sample so we can debug it.

[MaxwellGover]

The <ListItem /> component. In my renderRow function it gives me an error,

Error: Raw text "1997" must be wrapped in an explicit <text> component

Also says invalid prop type being passed to 'title'

import React, { PropTypes, Component } from 'react'
import { View, Text, ListView, StyleSheet } from 'react-native'
import { connect } from 'react-redux'
import { List, ListItem } from 'react-native-elements'
import NavigationBar from 'react-native-navbar'
import { storeUserYear, getSchedule } from '~/redux/modules/data'

class Year extends Component {
	static propTypes = {
		dispatch: PropTypes.func.isRequired,
		navigator: PropTypes.object.isRequired,
		userCarModel: PropTypes.object.isRequired
	}
	constructor (props) {
		super(props)
		this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2 })
		this.state = {
			dataSource: this.ds.cloneWithRows(this.props.userCarModel.years)
		}
	}
	renderRow = (year) => { 
		return (
			<ListItem 
				key={year.id} 
				title={year.year} 
				onPress={() => {
						this.props.dispatch(storeUserYear(year))
						this.props.dispatch(getSchedule(year.id))
						this.props.navigator.push({
							schedule: true
						})
					}
				}
				underlayColor='#eceeef'
			/>
		) 
	}
	render () {
		console.log(this.props.userCarModel)
		return (
			<View style={{flex: 1}}>
				<NavigationBar 
					title={{title: 'Year'}}
					tintColor='#fff'
					style={{borderColor: '#e80d2d'}}
				/>
				<View style={styles.helpTextContainer}>
					<Text style={{marginLeft: 10}}>
						Select the year of your vehicle
					</Text>
				</View>
				<List containerStyle={{flex: 1, marginTop: 0}}>
					<ListView 
						renderRow={model => this.renderRow(model)}
						dataSource={this.state.dataSource}
					/>
				</List>
			</View>
		)
	}
}

function mapStateToProps ({data}) {
	return {
		userCarModel: data.userCarModel
	}
}

export default connect(mapStateToProps)(Year)

const styles = StyleSheet.create({
	helpTextContainer: {
		height: 30,
		backgroundColor: '#eceeef',
		justifyContent: 'center'
	}
})

[MaxwellGover]

@binoy14 Any updates on this issue?

[binoy14]

@MaxwellGover I know the root cause of the issue and will fix in the next release. In the mean time any number can be passed in using this

title="`${year.year}`" 

or

title={<Text>{year.year}</Text>}

This won't be the case in future. Thanks for reporting

[MaxwellGover]

@binoy14 Ok cool. Thanks. Great library btw.

[binoy14]

@MaxwellGover Thank you for reporting. The issue is in works. #207 is almost ready to get merged