TaylorBriggs/react-native-typewriter

Inline styling for text

nsdub opened this issue · 8 comments

nsdub commented

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?

TaylorBriggs commented

Thanks for writing up this issue. It should support nesting <Text /> within the component. I'll have to look into why that isn't working. In the meantime, feel free to poke around the code and open a PR if you find a fix!

  • 👍1
TaylorBriggs commented

There's currently no special handling for nested Text elements, that's the problem. The TypeWriter component expects children to be a string. I'll need to add an enhancement to handle nested Text correctly.

nsdub commented

Thanks for the follow up, Taylor!

TaylorBriggs commented

@nsdub I have a fix in progress, should get to complete it and publish a new version sometime this week.

nsdub commented

@TaylorBriggs Awesome, thanks for taking the time!

TaylorBriggs commented

@nsdub v0.6.0 is published to add support for nested <Text> elements.

nsdub commented

Thanks for the update here @TaylorBriggs!

I've been playing around with the updated package and I'm noticing that a limitation seems to be that the nested Text tag will work at the conclusion of the string, but not in the middle of a string.

Illustration using the automated test from the last release. This works as expected:

<TypeWriter typing={1} style={{fontSize: 40}}>
  Hello
  {' '}
  <Text style={{ color: 'red' }}>World!</Text>
</TypeWriter>

This does not:

<TypeWriter typing={1} style={{fontSize: 40}}>
  Hello
  {' '}
  <Text style={{ color: 'red' }}>World!</Text>
  This is TypeWriter.
</TypeWriter>

Nor does any combination of throwing 'Hello' or 'This is TypeWriter' into Text tags. From my testing, only the content up to and including the first nested Text tag gets rendered.

TaylorBriggs commented

Thanks for writing this up @nsdub. I'm looking into it and will publish a fix once I figure it out.

  • 👍1