react-native-speech-bubble's Introduction

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 :

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

License

MIT.

react-native-speech-bubble's People

Contributors

Stargazers

Watchers

react-native-speech-bubble's Issues

about floating

could it be set to float on other component?

Or did I miss anything?

Thank you.

Attempting to run js driven animation on animation node

Hello,

I tried to run this, as in the example :

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

But I get this error:

attempting to run js driven animation on animation node that has been moved to "native" earlier by starting an animation with 'useNativeDriver: true'

I think it's an incompatibility between the version of React and your module. It's sad because I think I could have built cool things

Hopefully it will be settled in a future release !

[Crash] only on release build style undefined

com.facebook.react.common.JavascriptException: undefined is not an object (evaluating 'r.View.propTypes.style'), stack:

Only happens on release build (Emulator and devices)

<SpeechBubble
onSpeechReplay={()=>{ this.setState({showreward: false}); } }
speeches={[ 'You leveled up!', 'You unlocked a background!' ]}
/>

Recommend Projects

charpeni / react-native-speech-bubble Goto Github PK