Comments (22)
Correct, the only issue i've ran into with NativeBase is the card component.
from nativebase.
Ignore the sad formatting.
from nativebase.
@bretth18 What are you using at the moment? I just started React Native not long ago :)
from nativebase.
<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.
from nativebase.
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;
from nativebase.
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
from nativebase.
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.
from nativebase.
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.
from nativebase.
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:
from nativebase.
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>
from nativebase.
from nativebase.
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
from nativebase.
Just tried the code above, used the exact import list and I'm still getting the previous red screen of death error.
from nativebase.
Just to confirm, other than card, everything else is working okay?
from nativebase.
Closing due to inactivity.
from nativebase.
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.from nativebase.
@michaelnagy try to type in the example. Sometimes some blank characters get coped over as well.
from nativebase.
@bretth18 Can you try CardItem without any content (Text) in it ?
from nativebase.
@jingyao97 this issue is close to two years old, I abandoned using NativeBase long ago.
from nativebase.
@jingyao97 Share your use-case
from nativebase.
I also faced same problem.
But import {Image} from 'react-native' and use it inside CardItem
solved the problem.
from nativebase.
I'm encountering this issue as well.
from nativebase.
Related Issues (20)
- Type error when run jest test
- SSRProvider warning HOT 2
- Unable to find modules after install and yarn start the react-native cli HOT 3
- Modal Accessibility Issue in UWP
- [Select] customize the content of the Select component HOT 2
- Multiple Modals - Only on iOS the new modal appears below the first Modal HOT 1
- SSRProvider it`s not necessary in React18 HOT 1
- <Item> tag not working
- How to get theme in React Class Components ?
- Why does toast.isActive() only take effect when placement is set to bottom
- Error in React 18
- Select with InputLeftElement
- In React 18, SSRProvider is not necessary and is a noop. HOT 1
- Base style extendTheme for Button component does not work
- onPress triggers twice, when activated via Enter key
- Disabled Button is not WCAG accessible and there is no way to set alternative color with themes other than using opacity.
- when use the useToast, state value is initialized
- Codesandbox demo broken
- Demo doesn't work in Expo snack
- Menu placement is wrong
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativebase.