Nativebase: Error using cards

[bretth18]

I'm trying to use cards inside of my component, and run across this issue whenever the <CardItem />
is used inside of a card. I have my imports setup correctly. I can render components fine, the error only occurs when adding in <CardItem>

ExceptionsManager.js:61 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method ofYakView.

[himanshu-satija]

<Card /> and <CardItem /> components are working fine with React Native v0.25.1 and Native Base v0.3.0.

It would be better if you upload the code you are having problem with.

[bretth18]

here's a trimmed version of the component:

import {Container, Header, Content, Footer, Title, Button, Icon, Card, CardItem } from 'native-base';
import ListComment from './ListComment';
import Firebase from 'firebase';

class YakView extends Component {

  render(){

    return(
      <Container>
          <Header>
            <Button transparent onPress={this._returnToYaks.bind(this)}>
                <Icon name="ios-arrow-left" />
            </Button>
              <Title>bison.</Title>
            <Button transparent>
                <Icon name="navicon"/>
            </Button>
          </Header>

          <Content>

            <View style={styles.container}>
              <Card cardBody={CardItem}>
                <CardItem>
                <Button transparent onPress={this.voteOnPost.bind(this)}>
                    <Icon name="ios-arrow-up"/>
                </Button>
                <Button transparent>
                    <Icon name="ios-arrow-down"/>
                </Button>
                <Text>{this.props.item.title}</Text>

                <Text>{this.props.item.time}</Text>
                <Text>{this.props.item.score}pts</Text>
               </CardItem>
              </Card>

// demo card, even this doesn't work              
              <Card>
                <CardItem>
                  <Text>Test</Text>
                </CardItem>
              </Card>

                <ListView
                  dataSource={this.state.dataSource}
                  renderRow={this._renderComment.bind(this)}
                  style={styles.listview}/>

                <Button info block  onPress={this._addComment.bind(this)}>
                    Add Comment
                </Button>

            </View>
         </Content>
      </Container>
    );
  }
}


module.exports = YakView;

[himanshu-satija]

I tried your code without ListView and onPress props. It works fine. This might not be a NativeBase issue. Are you using a constructor in your class? If yes, did you call super(props) in your constructor?

Refer this SO question http://stackoverflow.com/questions/33376231/react-js-uncaught-error-invariant-violation

[bretth18]

I have a constructor in my class

  constructor(props){
    super(props);
    // sets our components state listener
    // firebase ref
    // console.log(this.props.item._key);
    this.state = {
      dataSource: new ListView.DataSource({
        // bizzare ass expression for handling rows
        rowHasChanged: (row1, row2) => row1 !== row2,
      })
    };
    var childKey = this.props.item._key.toString();
    console.log('CHILDKEY', childKey);
    this.commentRef = new Firebase('https://bisonyak.firebaseio.com/items/' + childKey);
  }

I'm not sure why the listview would be confilicting

Edit: For the record I've also tried adding a card in a component only displaying static text, and I encountered the same error.

[sankhadeeproy007]

Hi, @bretth18 can you try the Card component independently? i.e. Just the Card component in a new page. No extra components. Might help us identify the problem if you still face an error.

[bretth18]

So if i do something like this:

  render(){
    return(
      <Container>

          <Content>
            <Card>
              <Text>Bison</Text>

              <Text>made by @bretth18</Text>
            </Card>


         </Content>



      </Container>
    );
  }

The component is rendering, but nothing is being shown and the styling of the card is non existent.
When cards contain no <CardItem> I'm still pretty sure the styling is wrong, they look like this:

[sankhadeeproy007]

Okay, can you just try this out and get me a screenshot?
<Content padder> <Card > <CardItem> <Text>Nathaniel Clyne Cards have become widely used in recent years. They are a great way to contain and organize information, while also setting up predictable expectations for the user. </Text> </CardItem> </Card> </Content>

[bretth18]

Throws the same error:

[sankhadeeproy007]

It's strange, the beahaviour you're getting.
`import {Container, InputGroup, Footer, Header, Input, Text, Button, Content, View, CheckBox, Title, Picker, Icon, List, CardItem, Thumbnail, Badge, Card} from 'native-base';
import React, {AppRegistry, Component, Switch} from 'react-native';

export default class UseCase extends Component {

render() {
    return (
        <Container> 
            <Header>                    
                <Button transparent  >
                    <Icon name={'ios-home'} />
                </Button>                    
                <Title>center</Title>
                <Button transparent  >
                    Back
                </Button>
            </Header>
            <Content padder>
               <Card >
                <CardItem>                        
                    <Text>Nathaniel Clyne Cards have become widely used in recent years. They are a great way to contain and organize information, while also setting up predictable expectations for the user.   </Text>
                </CardItem>
               </Card>
            </Content>
        </Container>
    )
}

}

`
Please try this out and let me know

[sankhadeeproy007]

Ignore the sad formatting.

[bretth18]

Just tried the code above, used the exact import list and I'm still getting the previous red screen of death error.

[sankhadeeproy007]

Just to confirm, other than card, everything else is working okay?

[bretth18]

Correct, the only issue i've ran into with NativeBase is the card component.

[sankhadeeproy007]

Closing due to inactivity.

[michaelnagy]

I'm getting the same error here, but with the

component, every time I try to add it, I get this same error. I just copied the example code you have on your documentation page and when trying to run this same error appears.

[sankhadeeproy007]

@michaelnagy try to type in the example. Sometimes some blank characters get coped over as well.

[jingyao97]

@bretth18 Can you try CardItem without any content (Text) in it ?

[bretth18]

@jingyao97 this issue is close to two years old, I abandoned using NativeBase long ago.

[jingyao97]

@bretth18 What are you using at the moment? I just started React Native not long ago :)

[SupriyaKalghatgi]

@jingyao97 Share your use-case

[stardev24]

I also faced same problem.
But import {Image} from 'react-native' and use it inside CardItem
solved the problem.