oblador / react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
MIT License
2.43k stars 453 forks source link

Collapsible support for screen rotation #372

Open kdo1234 opened 3 years ago

kdo1234 commented 3 years ago

The Collapsible component doesn't seem to expose an api for supporting screen rotation (e.g. from portrait to landscape). I worked around that by calling some of the internal methods of the Collapsible component from the onOrientationDidChange function in the example below. Would it make sense to expose an api like this?

import React from 'react';
import {Text} from 'react-native';
import Collapsible from 'react-native-collapsible';
import Orientation from 'react-native-orientation-locker';

class CollapsibleContainer extends React.Component {
  constructor(props) {
    super(props);
    this.collapsible = React.createRef();
  }

  componentDidMount() {
    Orientation.addOrientationListener(this.onOrientationDidChange);
  }

  componentWillUnmount() {
    Orientation.removeOrientationListener(this.onOrientationDidChange);
  }

  onOrientationDidChange = (orientation) => {
    setTimeout(() => {
      if (!this.collapsible.current.props.collapsed) {
        this.collapsible.current._measureContent((contentHeight) => {
          this.collapsible.current._transitionToHeight(contentHeight);
        });
      }
    }, 200);
  };

  render() {
    return (
      <Collapsible ref={this.collapsible} style={{flex: 1}} collapsed={false}>
        <Text style={{flex: 1}} >{'text '.repeat(20)}</Text>
      </Collapsible>
    );
  }
}

const App = () => {
  return (
    <CollapsibleContainer/>
  );
};

export default App;