Unable to execute TouchableOpacity onPress

[MinhazMM]

Description

I need to allow users to press a TouchableOpacity before sliding up and after sliding up. But unfortunately it doesn't happen for both, the onPress function doesn't get called. Instead, it gets executed on load of the app.

Code & Screen recording

class BottomSheet extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello world</Text>
        <SlidingUpPanel
          ref={(c) => (this._panel = c)}
          draggableRange={{top: height * 1, bottom: 500}}
          animatedValue={this._draggedValue}
          showBackdrop={false}>
          <View style={styles.panel}>
            <View style={styles.panelHeader}>
              <Text>Bottom Sheet Peek</Text>
            </View>
            <View style={styles.container}>
              <TouchableOpacity onPress={alert('One')} style={{margin: 20}}>
                <Text>Bottom Sheet Peek</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={alert('Two')} style={{margin: 20}}>
                <Text>Bottom Sheet Peek</Text>
              </TouchableOpacity>
            </View>
          </View>
        </SlidingUpPanel>
      </View>
    );
  }
}

URL for screen recording of the issue

---

Environment

• Version: ^2.4.0
• React Native version:0.62.2
• Platform: iOS
• Device info: iPhone 11

[octopitus]

You should wrap alert in a callback, otherwise it will be invoked synchronously.

<TouchableOpacity onPress={() => alert('One')} />