Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
DeckSwiper cannot be used inside of a Content Component
See original GitHub issueHi! Thanks for trying out NativeBase! Due to the overwhelming requests and issues/questions we ask you to add the following details with your issue.
Please check the existing open/closed issues for a possible duplicate before creating a new issue 😃
Also DO fill out the below form to give us a better idea about your environment and help us debug it quicker. Issues without the required details will mostly be unattended to.
react-native, react and native-base version
“native-base”: “^2.3.1”, “react”: “16.0.0-alpha.12”, “react-native”: “https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz”,
also using this on expo v20.0.0
Expected behaviour
Using DeckSwiper inside a Content component should render components returned by renderItem prop.
Actual behaviour
Using DeckSwiper inside of a Content component will cause items to not render. The component rendered by renderEmpty prop is fine. No component returned by renderItem prop is ever visible on screen
This is similar behavior to what is observed here: https://github.com/GeekyAnts/NativeBase/issues/369
Steps to reproduce (code snippet or screenshot)
This does not work.
class DummyScreen extends React.Component{
constructor(props){
super(props);
this.blah = this.blah.bind(this)
}
blah(item){
return <TinderCard title='OMG IT RENDERED'></TinderCard>
}
render(){
let data = [];
data = [1,2,3,4,5];
return (
<Container>
<Header>
<Left>
<Button transparent onPress={this.showMenu}>
<Icon name="menu"></Icon>
</Button>
</Left>
<Body>
<Title>Tinder</Title>
</Body>
<Right></Right>
</Header>
<Content>
<View style={{ flex: 1 }}>
<DeckSwiper
dataSource={data}
renderItem={this.blah}
renderEmpty={ ()=><Text>GFY</Text> } />
</View>
</Content>
</Container>
);
}
}
but if we remove Content component it works
class DummyScreen extends React.Component{
constructor(props){
super(props);
this.blah = this.blah.bind(this)
}
blah(item){
return <TinderCard title='OMG IT RENDERED'></TinderCard>
}
render(){
let data = [];
data = [1,2,3,4,5];
return (
<Container>
<Header>
<Left>
<Button transparent onPress={this.showMenu}>
<Icon name="menu"></Icon>
</Button>
</Left>
<Body>
<Title>Tinder</Title>
</Body>
<Right></Right>
</Header>
<View style={{ flex: 1 }}>
<DeckSwiper
dataSource={data}
renderItem={this.blah}
renderEmpty={ ()=><Text>GFY</Text> } />
</View>
</Container>
);
}
}
for the record this does not work either:
<Content style={{ flex: 1 }}>
<DeckSwiper
dataSource={data}
renderItem={this.blah}
renderEmpty={ ()=><Text>GFY</Text> } />
</Content>
Screenshot of emulator/device
Is the bug present in both ios and android or in any one of them?
haven’t been able to test ios
Any other additional info which would help us debug the issue quicker.
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
adding
flex:1to propcontentContainerStylesolves the issue in android#957