{"id":21863029,"url":"https://github.com/charpeni/react-native-speech-bubble","last_synced_at":"2025-04-14T19:43:15.105Z","repository":{"id":57340301,"uuid":"61637672","full_name":"charpeni/react-native-speech-bubble","owner":"charpeni","description":":speech_balloon: A speech bubble dialog component for React Native.","archived":false,"fork":false,"pushed_at":"2018-10-18T13:29:44.000Z","size":35,"stargazers_count":50,"open_issues_count":1,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-10T05:58:38.393Z","etag":null,"topics":["bubble","component","dialog","introduction","react-native","speech","speech-bubble","typewriter","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/charpeni.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-21T13:51:55.000Z","updated_at":"2022-03-25T18:09:20.000Z","dependencies_parsed_at":"2022-09-07T14:31:51.228Z","dependency_job_id":null,"html_url":"https://github.com/charpeni/react-native-speech-bubble","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charpeni%2Freact-native-speech-bubble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charpeni%2Freact-native-speech-bubble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charpeni%2Freact-native-speech-bubble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charpeni%2Freact-native-speech-bubble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charpeni","download_url":"https://codeload.github.com/charpeni/react-native-speech-bubble/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248949333,"owners_count":21188055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bubble","component","dialog","introduction","react-native","speech","speech-bubble","typewriter","ui"],"created_at":"2024-11-28T03:19:30.648Z","updated_at":"2025-04-14T19:43:15.086Z","avatar_url":"https://github.com/charpeni.png","language":"JavaScript","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)\n\nA speech bubble dialog component for React Native.\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/7189823/16232855/199dc1dc-379a-11e6-97be-612b0dbc5495.gif\" height=\"500\" /\u003e\n\n## Install\n\n```\nnpm install --save react-native-speech-bubble\n```\n\n## Usage\n\n```javascript\nimport SpeechBubble from 'react-native-speech-bubble';\n```\n\n```jsx\n\u003cSpeechBubble\n  speeches={[ 'String 1', 'String 2', 'String 3' ]}\n/\u003e\n```\n\n## API\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `allowSkip`| `bool` | Speech bubble will be clickable before the end of the animation (Default is `false`) |\n| `allowSpeechReplay`| `bool` | Add a replay action at the end of the speeches (Default is `false`)|\n| `hideIcons`| `bool` | Speech bubble will hide icons (Default is `false`)|\n| `nextStyle`| `Text.propTypes.style` | Style of the \"Next\" icon |\n| `onSpeechEnd`| `func` | Callback that will be called at the end of the animation of the current speech |\n| `onSpeechNext`| `func` | Callback that will be called when you triggered the next speech |\n| `onSpeechReplay`| `func` | Callback that will be called when you triggered the replay action |\n| `speaker`| `string` | Title of the speech bubble (Speaker or interlocutor) |\n| `speakerStyle`| `ViewPropTypes.style,` | Style that will be applied to the speaker view |\n| `speakerTextStyle`| `Text.propTypes.style` | Style that will be applied to the speaker text style |\n| `speechBubbleActiveOpacity`| `number` | Opacity of the clickable bubble as a `TouchableOpacity` |\n| `speechBubbleStyle`| `ViewPropTypes.style,` | Style that will be applied to the speech bubble |\n| `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 |\n| `speeches`| `array of string` | **(Required)** Speeches that will be displayed into the speech bubble, one item = one bubble. |\n| `style`| `ViewPropTypes.style,` | Style of the `\u003cSpeechBubble\u003e` component (container) |\n| `typeWriterStyle`| `Text.propTypes.style` | Style of the TypeWriter `Text` Component |\n| `animateTouchIcon`| `bool` | The touch icon will be animated (Default is `true`)|\n| `touchIcon`| `Image.propTypes.source` | Replace the default touch icon |\n| `animateReplayIcon`| `bool` | The replay icon will be animated (Default is `true`)|\n| `replayIcon`| `Image.propTypes.source` | Replace the default replay icon |\n| `writingDelay`| `number` | Time in milliseconds between each letter (Default is `100`) |\n\n## How To\n\n### Run Tests\n\n* Linter: `yarn lint`\n\n## Contributing\n\n**Never** commit directly on master, instead use branches and pull requests.\n\nYou must use the following Style Guides :\n\n* [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)\n* [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)\n\nThis project contains a linting config, you should setup `eslint` into your IDE with `.eslintrc.js`.\n\n## License\nMIT.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharpeni%2Freact-native-speech-bubble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharpeni%2Freact-native-speech-bubble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharpeni%2Freact-native-speech-bubble/lists"}