taylorbriggs / react-native-typewriter Goto Github PK
View Code? Open in Web Editor NEWA React Native component for creating typing effects
License: MIT License
A React Native component for creating typing effects
License: MIT License
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,
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,
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
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.
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.
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, '');
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?
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)}
(...)
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?
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
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!
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!
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".
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.