How to hide it in the first place?

[christinehesher]

Hello there! I can't figure out how to make the body hidden when the component mounts. Please help me out, thanks in advance.

[rikenppatel]

@crysfel awesome job. working very good with sliding. but facing same issue, its not mount with expanded: false .

please help me out.

[fostertime]

I accomplished this by using .measure in componentDidMount().

Example:
First set a timeout on componentDidMount():

componentDidMount() {
    setTimeout( this._setToggleClosed.bind(this) );
}

Then in the _setToggleClosed function, set your min and max heights based on the refs of your two containers, and set the value of your animation to the min height:

_setToggleClosed() {
    this.refs.textContainer.measure((ox, oy, width, height, px, py) => {
        this.setState({
            maxHeight: height
        });
    });
    this.refs.labelContainer.measure((ox, oy, width, height, px, py) => {
        this.setState({
            minHeight: height
        });
        this.state.animation.setValue(height);
    });
}

[Rashhh]

what is refs.textContainer.measure here?

[prasann278]

@fostertime i have initgrated your code in my code but it is not working

initialy i need toggle to be closed

[hungdev]

@prasann278
solution here:
#1 (comment)

 _setMaxHeight(event) {
    if (!this.state.maxHeight) {
      this.setState({
        maxHeight: event.nativeEvent.layout.height,
      });
    }
  }

  _setMinHeight(event) {
    if (!this.state.minHeight) {
      this.setState({
        minHeight: event.nativeEvent.layout.height,
        animation: new Animated.Value(event.nativeEvent.layout.height),
      });
    }
  }

and set expanded to false

[ShaikhKabeer]

Hey @hungdev , it is working but at the initial panels are showing as expanded and then slowly closing. Any workaround for this ?

[HotSpotNick]

@ShaikhKabeer Any findings here?

[ShaikhKabeer]

Hey @HotSpotNick ,used the same code mentioned by @hungdev and it's working fine.

[Poyser1911]

Got a solution to having it work both ways..

1. Added accepting an initial prop to set the default value.

state = {
        title: this.props.title,
+      expanded: this.props.initial,
        animation: new Animated.Value()
    }

2. Modified methods further upon @hungdev's solution

_setMaxHeight(event) {
        if (!this.props.initial && this.state.maxHeight) return
        this.setState({
            maxHeight: event.nativeEvent.layout.height
        })

    }

    _setMinHeight(event) {
        if (!this.props.initial && this.state.minHeight) return
            this.setState({
                minHeight: event.nativeEvent.layout.height,
                animation: !this.props.initial ? new Animated.Value(event.nativeEvent.layout.height) : this.state.animation
            })
    }

3. Working Fine with example below.

 <Panel title={'Title'} initial>
        <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
 </Panel>

<Panel title={'Title'} initial={false}>
       <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
</Panel>