CODEWITHSUNDEEP
react-native
MonkeyBonkey
MonkeyBonkey

Reputation: 47901

How can I use react-native-actionsheet alongside react-native-gifted-chat in the same view?

Using this gifted chat library https://github.com/FaridSafi/react-native-gifted-chat

I've tried adding the ActionSheet to the render function but it won't render gifted-chat because the chat screen only works when it's the sole root view control.

This render function won't work with an outer enclosing View

return (
  <View>
    <GiftedChat
      messages={this.state.messages}
      onSend={this.onSend}
      onPressAvatar={this.pressProfile}
      user={{
        _id: user.id,
        name: user.username,
        avatar: user.thumbnail,
      }}
    />
    <ActionSheet
      ref={o => this.ActionSheet = o}
      title={title}
      options={options}
      cancelButtonIndex={CANCEL_INDEX}
      destructiveButtonIndex={DESTRUCTIVE_INDEX}
      onPress={this.handlePress}
    />
  </View>
);

If I have to make the root view a GiftedChat where should I put the ActionSheet view?

Upvotes: 0

Views: 875

Answers (1)

Chris Geirman
Chris Geirman

Reputation: 9684

Have you tried this?

<GiftedChat
  messages={this.state.messages}
  onSend={this.onSend}
  onPressAvatar={this.pressProfile}
  user={{
    _id: user.id,
    name: user.username,
    avatar: user.thumbnail,
  }}
>
   <ActionSheet
     ref={o => this.ActionSheet = o}
     title={title}
     options={options}
     cancelButtonIndex={CANCEL_INDEX}
     destructiveButtonIndex={DESTRUCTIVE_INDEX}
     onPress={this.handlePress}
  />
</GiftedChat>

Upvotes: 0

Related Questions