React Native Expandable View Issue - reactjs

Question

This is my component usage
<Panel title="ABC Trade & Investments (Pvt) LTd" amount="$,350.00 LKR">
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<TextInput style={styles.textBox} />
</View>
<View style={styles.container}>
<TouchableHighlight
style={styles.buttonContainerOK}
onPress={this.onPressLearnMore}
underlayColor="#a7ccaf"
>
<Image
style={styles.buttonImage}
source={require("./assets/img/ic_done_24px.png")}
/>
</TouchableHighlight>
<View style={styles.space} />
<TouchableHighlight
style={styles.buttonContainerDelete}
onPress={this.onPressLearnMore}
underlayColor="#f79191"
>
<Image
style={styles.buttonImage}
source={require("./assets/img/ic_clear_24px.png")}
/>
</TouchableHighlight>
</View>
</View>
</Panel>
Here I add my component code
class Panel extends Component {
constructor(props) {
super(props);
this.icons = {
up: require("../assets/img/Arrowhead-01-128.png"),
down: require("../assets/img/Arrowhead-Down-01-128.png")
};
this.state = {
title: props.title,
expanded: false,
animation: new Animated.Value()
};
}
onPressLearnMore() {
console.log("Test");
}
componentWillMount() {
console.log("this.state.expanded => " + this.state.expanded);
console.log("this.state.maxHeight => " + this.state.maxHeight);
console.log("this.state.minHeight => " + this.state.minHeight);
}
toggle() {
let initialValue = this.state.expanded
? this.state.maxHeight + this.state.minHeight
: this.state.minHeight,
finalValue = this.state.expanded
? this.state.minHeight
: this.state.maxHeight + this.state.minHeight;
this.setState({
expanded: !this.state.expanded
});
console.log("initialValue => " + initialValue);
this.state.animation.setValue(initialValue);
Animated.spring(this.state.animation, {
toValue: finalValue
}).start();
console.log("finalValue => " + finalValue);
}
_setMaxHeight(event) {
if (!this.state.maxHeight) {
console.log("_setMaxHeight => " + event.nativeEvent.layout.height);
this.setState({
maxHeight: event.nativeEvent.layout.height
});
}
}
_setMinHeight(event) {
if (!this.state.minHeight) {
console.log("_setMinHeight ! => " + event.nativeEvent.layout.height);
this.setState({
minHeight: event.nativeEvent.layout.height,
animation: new Animated.Value(event.nativeEvent.layout.height)
});
}
}
render() {
let icon = this.icons["down"];
if (this.state.expanded) {
icon = this.icons["up"];
}
return (
<Animated.View
style={[styles.container, { height: this.state.animation }]}
>
<View
style={styles.titleContainer}
onLayout={this._setMinHeight.bind(this)}
>
<View style={styles.header}>
<Text style={styles.title}>{this.state.title}</Text>
<Text style={styles.amount}>4,350.00 LKR</Text>
</View>
<TouchableHighlight
style={styles.toggle_button}
onPress={this.toggle.bind(this)}
underlayColor="#f1f1f1"
>
<Image style={styles.buttonImage} source={icon} />
</TouchableHighlight>
<TouchableHighlight
style={styles.approve_button}
onPress={this.onPressLearnMore}
underlayColor="#a7ccaf"
>
<Image
style={styles.listButtonImage}
source={require("../assets/img/ic_done_24px.png")}
/>
</TouchableHighlight>
<View style={styles.space} />
<TouchableHighlight
style={styles.reject_button}
onPress={this.onPressLearnMore}
underlayColor="#f79191"
>
<Image
style={styles.listButtonImage}
source={require("../assets/img/ic_clear_24px.png")}
/>
</TouchableHighlight>
</View>
<View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
{this.props.children}
</View>
</Animated.View>
);
}
}
Issue is that I have added TextInput to expanded Panel.But once I clicked it my view is collapsed.here I will attached image of my two scenarios.
It seems issue occur due to onLayout={this._setMaxHeight.bind(this)} this code.But I could not resolve that.Please help me.
FYI - this is the link I refer to build this - https://moduscreate.com/blog/expanding-and-collapsing-elements-using-animations-in-react-native/

Answer 1

It seems that, nested event bubbling took place here. You can avoid this by adding onFocus and onKeyPress events to yout TextInput and need to handle parent event as follows:
<TextInput
onFocus={this.restrictParentClick.bind(this)}
onKeyPress={this.restrictParentClick.bind(this)}
/>
And this will be your restrictParentClick function as follows:
restrictParentClick (evnt) {
evnt.preventDefault()
evnt.stopPropagation();
if(evnt.nativeEvent)
evnt.nativeEvent.stopImmediatePropagation();
}
}