README.md

react-native-speech-bubble

A speech bubble dialog component for React Native.

Install

npm install --save react-native-speech-bubble

Usage

import SpeechBubble from 'react-native-speech-bubble';

<SpeechBubble
  speeches={[ 'String 1', 'String 2', 'String 3' ]}
/>

API

Prop	Type	Description
allowSkip	bool	Speech bubble will be clickable before the end of the animation (Default is false)
allowSpeechReplay	bool	Add a replay action at the end of the speeches (Default is false)
hideIcons	bool	Speech bubble will hide icons (Default is false)
nextStyle	Text.propTypes.style	Style of the "Next" icon
onSpeechEnd	func	Callback that will be called at the end of the animation of the current speech
onSpeechNext	func	Callback that will be called when you triggered the next speech
onSpeechReplay	func	Callback that will be called when you triggered the replay action
speaker	string	Title of the speech bubble (Speaker or interlocutor)
speakerStyle	ViewPropTypes.style,	Style that will be applied to the speaker view
speakerTextStyle	Text.propTypes.style	Style that will be applied to the speaker text style
speechBubbleActiveOpacity	number	Opacity of the clickable bubble as a TouchableOpacity
speechBubbleStyle	ViewPropTypes.style,	Style that will be applied to the speech bubble
speechBubbleTextStyle	Text.propTypes.style	Style that will be applied to the text of the speech bubble. This is actually applied to a View element. If you want to influence the Text Component, please use typeWriterStyle instead
speeches	array of string	(Required) Speeches that will be displayed into the speech bubble, one item = one bubble.
style	ViewPropTypes.style,	Style of the <SpeechBubble> component (container)
typeWriterStyle	Text.propTypes.style	Style of the TypeWriter Text Component
animateTouchIcon	bool	The touch icon will be animated (Default is true)
touchIcon	Image.propTypes.source	Replace the default touch icon
animateReplayIcon	bool	The replay icon will be animated (Default is true)
replayIcon	Image.propTypes.source	Replace the default replay icon
writingDelay	number	Time in milliseconds between each letter (Default is 100)

How To

Run Tests

• Linter: yarn lint

Contributing

Never commit directly on master, instead use branches and pull requests.

You must use the following Style Guides :

• Airbnb React/JSX Style Guide
• Airbnb JavaScript Style Guide

This project contains a linting config, you should setup eslint into your IDE with .eslintrc.js.

License

MIT.