https://github.com/charpeni/react-native-speech-bubble

:speech_balloon: A speech bubble dialog component for React Native.
https://github.com/charpeni/react-native-speech-bubble

bubble component dialog introduction react-native speech speech-bubble typewriter ui

Last synced: about 1 month ago
JSON representation

:speech_balloon: A speech bubble dialog component for React Native.

• Host: GitHub
• URL: https://github.com/charpeni/react-native-speech-bubble
• Owner: charpeni
• License: mit
• Created: 2016-06-21T13:51:55.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-18T13:29:44.000Z (about 6 years ago)
• Last Synced: 2024-11-01T05:05:39.169Z (2 months ago)
• Topics: bubble, component, dialog, introduction, react-native, speech, speech-bubble, typewriter, ui
• Language: JavaScript
• Homepage:
• Size: 34.2 KB
• Stars: 50
• Watchers: 7
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-speech-bubble [![CircleCI](https://circleci.com/gh/charpeni/react-native-speech-bubble.svg?style=shield)](https://circleci.com/gh/charpeni/react-native-speech-bubble) [![npm version](https://badge.fury.io/js/react-native-speech-bubble.svg)](https://badge.fury.io/js/react-native-speech-bubble)

A speech bubble dialog component for React Native.



## Install

```

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

```

## Usage

```javascript

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

```

```jsx

```

## 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 `` 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](https://github.com/airbnb/javascript/tree/master/react)

* [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)

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

## License

MIT.