Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for onPress on Bubble #984

Conversation

charleslouis
Copy link

  • Callback when a message bubble is pressed;

This is helpful to implement rich cards chats such as in the following scenario in a chatbot :
1- a user receives a set of bubbles as options to click
2- the user presses the bubble and this sends a pre-written question

An example of implementation could be :

    // restyle the bubbles based on user or richcards
    renderBubble = (props) => {
        let wrapperStyle = {
            left: {
                padding: 5,
                backgroundColor: '#40216F',
            },
            right: {
                padding: 5,
                backgroundColor: '#2678D7',
            }
        };
        let textStyle = {
            left: {
                color: '#ffffff',
                fontSize: 16
            },
            right: {
                color: '#ffffff',
                fontSize: 16,
            }
        };

        let wrapperStyleQuestionBubble = {
          backgroundColor: '#ffffff',
          borderColor: '#40216F',
          borderWidth: 3,
          borderRadius: 10,
        }

        let wrapperStyleQuestionBubbleTextColor = '#40216F';

        let TouchableOpacityBubbleStyle = {
            borderColor: '#FF33AA',
            borderWidth: 3,
            backgroundColor: '#33AAFF',
        }

        if (props.currentMessage.richCard) {

            wrapperStyle.left = wrapperStyleQuestionBubble;
            textStyle.left.color = wrapperStyleQuestionBubbleTextColor;

            return (
                <TouchableOpacity>
                    <Bubble
                        {...props}
                        onPress={() => props.sendRichCard(props.currentMessage)}
                        wrapperStyle={wrapperStyle}
                        textStyle={textStyle}/>
                </TouchableOpacity>
            );
        }

        return (
            <Bubble
                {...props}
                wrapperStyle={wrapperStyle}
                textStyle={textStyle}/>
        );
    }

Callback when a message bubble is pressed; This is helpful to implement rich cards chats (when a user receives a set of options and clicks a pre-written question).
@charleslouis
Copy link
Author

And thank you for this great module by the way !

@Faolain
Copy link
Contributor

Faolain commented Dec 8, 2018

@charleslouis can you please fix the linting error

'onPress' is missing in props validation react/prop-types

And resubmit the PR? Also how does this differ from this #826 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chat-bot related to chat bot pinned
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants