taylorbriggs / react-native-typewriter Goto Github PK

View Code? Open in Web Editor NEW

98.0 3.0 25.0 2.38 MB

A React Native component for creating typing effects

License: MIT License

JavaScript 100.00%

react-native-typewriter's Introduction

Update: July 25, 2023

This repo hasn't been maintained for about two years and I don't have any plans to continue working on it.

react-native-typewriter

A React Native component for creating typing effects. Inspired by react-typewriter.

Installation

$ yarn add react-native-typewriter

$ npm install --save react-native-typewriter

Usage

Pass text and a typing direction into the component to control its animation.

import React, { Component } from 'react'
import TypeWriter from 'react-native-typewriter'

class TypingText extends Component {
  render() {
    return <TypeWriter typing={1}>Hello World!</TypeWriter>
  }
}

Documentation

Any props accepted by React Native's Text component are accepted by TypeWriter. These additional props are also accepted:

typing

type: Number default: 0

A value of 1 types text left to right until completion. A value of -1 erases text from right to left. A value of 0 stops the animation.

fixed

type: Boolean default: false

This flag will ensure the enclosing container's size and shape is fixed. Prevents the text from shifting around as it grows into its container.

maxDelay

type: Number default: 100

The maximum delay between each typed token in milliseconds.

minDelay

type: Number default: 20

The minimum delay between each typed token in milliseconds.

delayMap

type: Array[Object] default: none

Adds additional delay to specific characters before the next character is typed.

let delayMap = [
  // increase delay by 100ms at index 4
  { at: 4, delay: 100 },
  // increase delay by 400ms following every '.' character
  { at: '.', delay: 400 },
  // decrease delay by 200ms following every '!' character
  { at: /!/, delay: -200 }
]

initialDelay

type: Number default: 200

The time in milliseconds before the first token is typed.

onTyped

type: Function default: none

A callback called when each token is typed or erased during the animation. The function is called with two arguments: (String token, Number previousVisibleCharacters).

onTypingEnd

type: Function default: none

Called once the typing animation has completed. This callback is not called if props.typing is changed to 0 before the animation completes.

License

Released under the MIT license. See LICENSE for details.

react-native-typewriter's People

Contributors

Stargazers

Watchers

react-native-typewriter's Issues

Using onTypingEnd to update state results in

Hi,

I want to create an interactive onboarding screen using your awesome typewriter effect (brings back nostalgia for old school RPG games!). I would like to display a paragraph of text, then prompt for input (i.e. what is your name?). Then another paragraph of text and prompt, etc.

I thought that a good way of doing this would be to use the onTypingEnd function, however, it results in a "Maximum update depth exceeded error - This can happen when a component repeatedly calls setState inside component will update or componentDidUpdate. React limits the number of nested updates to prevent infinite loops".

<TypeWriter typing={1} onTypingEnd={this.setState({ hasFinishedTyping: true })} > Hi there! My name is Cyclo! What is your name? </TypeWriter>

Is this a known issue or am I using/interpreting the usage of onTypingEnd incorrectly?

Many thanks in advance!

Erase after typing (right to left after left to right)

Not sure if it is just an error by me or not but when I try to change the typing prop from 1 ➡️ -1 once the phrase has completed typing the whole Text element disappears before it starts the deleting phase of the animation

check out a demo:
https://snack.expo.io/@peterw-ens/react-native-typewriter-change-directions

maxDelay parameter has little to no effect for faster text animation on multiple text blocks

Thanks for this great tool. Though I noticed the maxDelay parameter has no visible effect on the speed of the text below the 100ms range (on multiple text blocks simultaneously).

I've tried changing the value in the props like so:
<TypeWriter typing={1} maxDelay={10} style = {styles.commentRegular} >{userObject.comment}</TypeWriter>

And changing the MAX_DELAY directly in your code, like so:
const MAX_DELAY = 10;

Is there something I'm missing to get the text to draw faster?

Also... The code above triggers a yellow box warning that says I'm supplying the invalid prop type 'style' to 'TypeWriter'. Oddly enough the styling works despite this warning.

Thanks in advance for any tips you may have,

[RN 0.61.5] Invariant Violation: Maximum update depth exceeded

Hi there, been using this plugin for a couple of years at https://github.com/lesalonapp. Worked great up to 0.59. Currently upgrading and ran into this crash.

I'll try and debug & report the underlying issue here.

If "fixed" equals true then the text will not properly hide itself.

Problem:

If I add the parameter fixed = true, then the "invisible-string" is not hidden.

Quick fix

Change const invisibleStyle = { opacity: 0 } to const invisibleStyle = { opacity: 0, color: 'transparent' } in index.js

Passing Style props to <TypeWriter> component works only for few properties.

Code i have used

TypeWriter style={StyleSheet.flatten(styles.text)} typing={1}
{this.state.keithVoice}
/TypeWriter

text: {
fontSize: 20,
fontWeight: "bold",
color: "red"
}

The above code only changes color of text to red,however other props do not seem to work like fontWeight and fontSize
Can somebody give a working example of how to pass styles to this component?

Emoji icon crash with error "The data couldn’t be read because it isn’t in the correct format"

Hi, there!
Emoji icon crash with error, any ideas how to fix without removing emoji icons? Thanks in advance!
Same thing outside TypeWriter tag works well.

<TypeWriter typing={1} minDelay={typeSpeed} maxDelay={typeSpeed} onTypingEnd={onTypingEnd} style={styles.outputText}> {text + '😎'} </TypeWriter>

RN 0.64

`The data couldn’t be read because it isn’t in the correct format.

RCTFatal
-[RCTCxxBridge handleError:]
__21-[RCTCxxBridge start]_block_invoke
invocation function for block in facebook::react::(anonymous namespace)::RCTObjcExecutor::RCTObjcExecutor(id, void (NSError*) block_pointer, std::__1::shared_ptrfacebook::react::MessageQueueThread, std::__1facebook::react::ExecutorDelegate)
__58-[RCTWebSocketExecutor _executeJSCall:arguments:callback:]_block_invoke
-[RCTWebSocketExecutor webSocket:didReceiveMessage:]
__33-[RCTSRWebSocket _handleMessage:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_lane_serial_drain
_dispatch_lane_invoke
_dispatch_workloop_worker_thread
_pthread_wqthread
start_wqthread
`

temp solution is just remove icons 'Smile😀'.replace(/\p{Emoji}/gu, '');

Warning: Can't perform a React state update on an unmounted component.

I am seeing this warning upon navigating away in certain cases. Its not deterministic (can't reproduce 100% of the time), but its probably happening 1 in 3 times the component unmounts.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method,

Unhandled JS Exception on fixed={true}

ERROR: "Unhandled JS Exception: In this environment the sources for assign MUST be an object.This error is a performance optimization and not spec compliant."

StyleSheet.create doesn't return a plain javascript object, so the "..." operator sometimes can't be applied. See: https://github.com/TaylorBriggs/react-native-typewriter/blob/master/index.js#L147.

As invisibleStyles are created separately anyway so it might be good to remove "style" from props or to use StyleSheet.flatten.

Original code that doesn't work:

        <TypeWriter
          typing={1}
          minDelay={15}
          maxDelay={60}
          fixed={true}
          style={styles.text}
          onTyped={(token) => this.props.onTyped(token)}
          {...this.props}>
          {text}
        </TypeWriter>

const styles = EStyleSheet.create({
  text: {
    fontFamily: '$textFont',
    fontSize: responsiveFontSize(2),
    color: '#bbb'
  }
});

Fix/workaround that works

(...)
style={StyleSheet.flatten(styles.text)}
(...)

Updating values no longer works

When I updated the text by clicking the button, it stopped working.
This is my favorite library, so I would like you to fix it if possible.
For specifications, give up and use v0.5.4.

v0.5.4

v0.6.1

RegEx in delayMap prop only allows for single character matching

In my case, I wanted a longer delay in every end of sentence. So I came up with this RegEx:

const delayMap = [
  // This regular expression matches every last punctuation character. (Using a negative lookahead)
  { at: /[.!?:;](?![.!?:;])/g, delay: 1000 },
];

But with single char RegEx matching (the current implementation), that's impossible.

It's also impossible to insert a delay after matching words, and pretty much every RegEx that's a bit more complex than a single char.

I managed to make a local fix so I'll submit a PR in a bit.

Dependency warnings for RN 0.43+

When upgrading with react-native-git-upgrade following warnings pop out:

warning "[email protected]" has incorrect peer dependency "[email protected]".
warning "[email protected]" has incorrect peer dependency "react-native@^0.42.0".

Add type declarations for TypeScript users

Hi @TaylorBriggs,

I'm just came across this package. It looks good and worth trying out, but I cannot do that yet because of missing type declarations.

It would be great to have the corresponding @types declaration for this package, so that we can simply install types like so -

$ yarn add @types/react-native-typewriter

For now, I guess I will add custom declaration file or something to make it work 🤞.

Thanks!

Inline styling for text

Is there a way to style a segment of text within a Typewriter tag? For example, let's say we want to change the color of a word within a string that's being 'typed' out.

Typically this would be handled by nesting Text tags, but it seems like the Typewriter tag doesn't want to be nested.

This is the nearest I've gotten to the desired behavior, but the code looks obviously wrong. The resultant behavior here is that 'Normal text' types out, and 'Funky text' is rendered outright:

<TypeWriter typing={1}>
    <TypeWriter typing={1}>
         Normal text
    </TypeWriter>
    <TypeWriter typing={1} style={{color: 'blue'}}>
         Funky text
    </TypeWriter>
</TypeWriter>

The above snippet also throws the following warning:

Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `TypeWriter`, expected `string`.

Any ideas on how to accomplish this?