SolvedNativeBase DeckSwiper cannot be used inside of a Content Component

w-
195

Hi! 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:
#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

image

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.

9 Answers

✔️Accepted Answer

adding flex:1 to prop contentContainerStyle solves the issue in android

<Content contentContainerStyle={{ flex: 1 }}>

More Issues: