Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Recalculate card positions on layout to handle rotation #76

Merged
merged 3 commits into from
Jun 5, 2017
Merged

Recalculate card positions on layout to handle rotation #76

merged 3 commits into from
Jun 5, 2017

Conversation

andrewpope
Copy link

I was getting problems in my implementation when rotating the device, cards were resizing but not being positioned correctly.

I saw there was a TODO to handle the device orientation event but I found that binding _calcCardPositions to onLayout for the parent ScrollView seemed to work well for me.

@bd-arc
Copy link
Contributor

bd-arc commented Jun 5, 2017

Hi @andrewpope,

Thanks for the PR! This is a good idea and this should play along nicely with a commit that I'm going to push soon which makes sure that carousel gets updated when sliderWidth and/or itemWidth are modified (a common use case when rotating the device).

@bd-arc bd-arc merged commit 1754783 into meliorence:master Jun 5, 2017
@bd-arc
Copy link
Contributor

bd-arc commented Jun 5, 2017

@andrewpope Unfortunately, this doesn't seem to work :-( onLayout is never fired expect on init (tested on iOS so far).

This is probably a React Native bug, but I'm wondering how you've managed to make this work. Can you tell me the version(s) of React Native on which you have tested the PR?

@andrewpope
Copy link
Author

andrewpope commented Jun 5, 2017

@bd-arc Ah no, I created my application using create-react-native-app using these versions:

"react": "16.0.0-alpha.6",
"react-native": "^0.44.0",

Hopefully it'll just be as simple as different versions but definitely working great for me on iOS.

Here's a simplified example as to how I'm handling it in my implementation:

constructor(props) {
    super(props);
    this.state = {
        viewport: { 
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height
        }
    };
}

render() {
    return (
        <View
            onLayout={() => {
                this.setState({
                    viewport: { 
                        width: Dimensions.get('window').width,
                        height: Dimensions.get('window').height
                    }
                });
            }}
        >
            <Carousel
                ref={carousel => { this.carousel = carousel; } }
                sliderWidth={this.state.viewport.width}
                itemWidth={this.state.viewport.width}
                ...
            >
            </Carousel>
        </View>
    );
}

@bd-arc
Copy link
Contributor

bd-arc commented Jun 7, 2017

Thank you @andrewpope for sharing, that was useful. You've made it to the doc ;-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants