React Native: Text strings must be rendered within a <Text> component - react-native

Question

I am trying to create a Profile page where the user can upload an image as the react-native-elements Avatar and update his profile information on a native-base form element.
I am also using the React Native default ImageEditor for image cropping and ImagePicker from Expo to select images.
But when I open the app on Expo, i get this error
Invariant Violation: Invariant Violation: Text strings must be rendered within a component
Below is the code that I am using.
Please help.
import React from "react";
import {
View,
Text,
FlatList,
ActivityIndicator,
TouchableOpacity,
StyleSheet,
ImageEditor
} from "react-native";
import { Avatar } from "react-native-elements";
import { Container, Content, Form, Input, Label, Item } from 'native-base';
import * as Expo from 'expo';
export default class ProfileScreen extends React.Component {
static navigationOptions = {
}
constructor(props) {
super(props);
this.state = {
loading: false,
image: null,
error: null,
refreshing: false
};
}
async _pickImage() {
let result = await Expo.ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [4, 3],
});
if (result.cancelled) {
console.log('got here');
return;
}
let resizedUri = await new Promise((resolve, reject) => {
ImageEditor.cropImage(result.uri,
{
offset: { x: 0, y: 0 },
size: { width: result.width, height: result.height },
displaySize: { width: 100, height: 100 },
resizeMode: 'contain',
},
(uri) => resolve(uri),
() => reject(),
);
});
// this gives you a rct-image-store URI or a base64 image tag that
// you can use from ImageStore
this.setState({ image: resizedUri });
}
render () {
let { image } = this.state;
return (
<Container>
<Content>
<View style={{flex:1, flexDirection: 'column', alignContent: 'flex-start', marginLeft: 20}}>
<View style={{flex:1, flexDirection: 'row', alignContent: 'flex-end'}}>
<TouchableOpacity onPress={() => alert('Save')}>
<Text style={{color: '#1f618d', fontWeight: 'bold'}}>Save</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => alert('Cancel')}>
<Text style={{color: '#1f618d', fontWeight: 'bold'}}>Cancel</Text>
</TouchableOpacity>
</View>
<View style={{height: 30}}></View> //Empty view
<View style={{alignContent: 'center'}}>
<Avatar rounded size="xlarge" title="Profile Photo" source={{ uri: this.state.image }} onPress={this._pickImage}/>
</View>
<View style={{height: 30}}></View> //Empty view
<Form>
<Item floatingLabel>
<Label style={styles.labelText}>First Name</Label>
<Input/>
</Item>
<Item floatingLabel>
<Label style={styles.labelText}>Last Name</Label>
<Input/>
</Item>
<Item floatingLabel>
<Label style={styles.labelText}>Email</Label>
<Input/>
</Item>
</Form>
</View>
</Content>
</Container>
)
}
}
const styles = StyleSheet.create({
labelText: {
fontSize: 12,
color: '#1f618d',
fontWeight: '100'
}
});

Answer 1

the problem is the way that use comment in render //Empty View use something like that {/* Empty view */}

Answer 2

Comments inside JSX must have the following syntax.
{/* Empty view */}

Answer 3

Remove comment using like //Empty view
if you wish to add comment in render return method you have to use {/*Empty View*/} something like this.
Instead of
<View style={{height: 30}}></View> //Empty view
write
<View style={{height: 30}}>{/*Empty View*/}</View>
you can not add comment directly like //comments in return function, only allow to in render or business logic parts.
Thanks

Answer 4

remove the // comment
make use of jsx commenting style
{/* comment */}

Answer 5

This can happen if you pass and empty string into a component, which is then "rendered" within a <Text> element.