Render not working in an arrow function

[aleef02]

I am using an arrow function as an onPress for a Touchable object. When I try to run my project it gives me the error: Unexpected token, expected ";" at the { in render() {. I have searched, but I cannot find why this is a problem. If anyone has any idea what’s going wrong, please share!

class SectionListItem extends React.Component {
	render() {
		return (
			<View>
				<Touchable
					style={styles.option}
					background={Touchable.Ripple('#ccc', false)}
					onPress={() => this._openArticle(this.props.item.fileName)}>
					<View style={{
						flex: 1,
						flexDirection: 'column',
						backgroundColor: '#FFFFFF'
					}}>
						<Text style={{
							fontSize: 16,
							fontWeight: 'bold',
							color: '#000000',
							marginLeft: 15,
							marginRight: 10,
						}}>
							{this.props.item.title}
						</Text>
						<Text style={{
							fontSize: 16,
							color: '#000000',
							marginLeft: 20,
							marginRight: 10,
						}}>
							{this.props.item.date}
						</Text>
						<View style={{
							backgroundColor: '#CCCCCC',
							height: 1,
							margin: 6,
							marginLeft: 15,
							marginRight: 10
						}}>				
						</View>
					</View>
				</Touchable>
			</View>
		);
	}
	
	_openArticle = (articleName) => {
		console.log('Clicked ' + articleName);
		currentMag = articleName;
		render() {
			return(
				<View>
					<Touchable
						style={styles.option}
						background={Touchable.Ripple('#ccc', false)}
						onPress={() => this._openArticle(this.props.item.fileName)}>
						<View style={{
							flex: 1,
							flexDirection: 'column',
							backgroundColor: '#FFFFFF'
						}}>
							<TabBarIcon
								focused={focused}
								name={
								Platform.OS === 'ios'? 
									`ios-arrow-back`
									: 'md-arrow-back'
								}
							/>
							<Text style=({
								color: '#122EFF',
								fontSize: 16,
							})>
								Back
							</Text>
						</View>
					</Touchable>
				</View>
			);
		}
	}
}

[ncailleux]

First, I just paste your code in my editor, and there is an issue with the style of this Text
It must be “{{ styles }}” not “({ styles })”

<Text style=({
     color: '#122EFF',			
     fontSize: 16,
})>

[charliecruzan]

Hey @aleef02 ,

This doesn’t look like a problem with the Expo SDK, so I’m going to move it to the How To category.
It would be helpful if you described what the intended functionality is, also I believe you can only have one render() per React Component.

Good luck!

[aleef02]

I have fixed this issue, but I am still getting the error

[ncailleux]

What is the meaning of your component ? A list of article and when you click on one of them it opens above all or just expand like a drawer?
For both cases there are other way (better) to achieve this.
I also think that the issue is that you are putting a render inside the function.