npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-styled-text

v2.0.0

Published

A React Native component for easy rendering of styled text.

Downloads

24,829

Readme

Styled Text for React Native

Introduction

The purpose of this library is to support easy rendering of mixed text styles.

The library implements a StyledText component taking an HTML-like string in the children property and an optional text styles property.

Try it out

Online demo on expo.io

Installation

To install the library into your project, run yarn or npm:

yarn add react-native-styled-text

or

npm i react-native-styled-text

Examples

Using default styles

For simple styling StyledText supports some predefined styles:

  • b: bold
  • i: italic
  • u: underline

Example:

import { StyleSheet } from 'react-native';
import StyledText from 'react-native-styled-text';

...
  <StyledText
    style={styles.header}
  >
    {"Ha<i>pp</i>y <b>Styling</b>!"}
  </StyledText>
...

const styles = StyleSheet.create({
  header: {
    fontSize: 24,
    color: 'orange',
    textAlign: 'center',
    padding: 30,
  },
});

Renders as

Using custom styles

For richer styling, you set the textStyles property of StyledText to an object (e.g. StyleSheet) containing your custom text styles and apply these styles in the text property.

Example:

import { StyleSheet } from 'react-native';
import StyledText from 'react-native-styled-text';

...
  <StyledText
    style={styles.welcome}
    textStyles={textStyles}
  >
    {"Welcome to <b><u>React Native</u> <demo><i>Styled</i> Text</demo></b> demo!"}
  </StyledText>
...

const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    padding: 30,
  },
});

const textStyles = StyleSheet.create({
  demo: {
    textShadowOffset: { width: 2, height: 2 },
    textShadowColor: '#555555',
    textShadowRadius: 6,
    fontSize: 24,
    color: '#22AA44',
  },
});

Renders as

How it works

Internally, the render function of StyledText parses the value of the children property, which must be a string, and returns a nested structure of React Native Text components.

From the example above:

<StyledText style={styles.header}>{'Ha<i>pp</i>y <b>Styling</b>!'}</StyledText>

would be transformed to:

<Text style={styles.header}>
  Ha<Text style={defaultStyles.i}>pp</Text>y{' '}
  <Text style={defaultStyles.b}>Styling</Text>!
</Text>

So StyledText just provides a more compact, readable and flexible coding of nested Text components.

API

In addition to the React Native Text properties, StyledText supports the following properties, with a restriction on the children proerty:

| Name | Description | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | children | String with style tags for mixed styling of the text. Each style tag must match one of the styles provided in textStyles or one of the default styles, see below. (Optional) | | textStyles | Object (e.g. StyleSheet) containing definition of the styles used in the provided text. (Optional) |

The following default styles are defined:

| Name | Description | | ---- | ----------- | | b | bold | | i | italic | | u | underline |

Contributors

Bjørn Egil Hansen (@bjornegil)

Sponsors

Fram X - a cross platform app company from Norway.