CODEWITHSUNDEEP
react-nativeexpo
user3001658
user3001658

Reputation: 71

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

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'
    }
    });

Upvotes: 5

Views: 4615

Answers (6)

inder_gt
inder_gt

Reputation: 622

In my case, I had a semicolon which was causing this issue.

return (
    <View>
        <View />; // Removing this semicolon fixed it
    </View>
);

Upvotes: 6

Brady Dowling
Brady Dowling

Reputation: 5532

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

Upvotes: 0

Roozbeh Mohammadzadeh
Roozbeh Mohammadzadeh

Reputation: 689

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

Upvotes: 1

nipek
nipek

Reputation: 850

remove the // comment

make use of jsx commenting style 

{/* comment */}

Upvotes: 0

Hardik Virani
Hardik Virani

Reputation: 1755

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

Upvotes: 1

10101010
10101010

Reputation: 1821

Comments inside JSX must have the following syntax.

{/* Empty view */}

Upvotes: 0

Related Questions