Nativebase: DeckSwiper cannot be used inside of a Content Component

Created on 8 Sep 2017 · 8Comments · Source: GeekyAnts/NativeBase

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:
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.

Source

Most helpful comment

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

akhil-geekyants on 29 Sep 2017

👍6

All 8 comments

deck
@w- Seems to be working fine with the content in the latest version 2.3.1

shivrajkumar on 11 Sep 2017

@shivrajkumar Thanks for confirming. I am on 2.3.1
It doesn't work for me in expo.
I'm not sure what else I can do on my end.
I guess you can close this as you are unable to repro, but it's strange that it works for you and not for me.

w- on 12 Sep 2017

@w- Have you checked whether you are able to access items in blah function

shivrajkumar on 12 Sep 2017

Yes. I tried rendering blah independently without issue.

w- on 13 Sep 2017

I am seeing this same issue in Android, but it works in iOS. No error or reason given

dalefrancis88 on 19 Sep 2017

I'm also having this issue with Android.

To add to @dalefrancis88, it does render on an older iPad, but cards don't seem to want to fully "flip" and stop in the middle with two cards showing, one that is half-flipped and the one underneath that should have become the top card. It takes a few swipes to get it to flip.