React Native Text

 React Native Text

A Respond part for showing text.

Text upholds settling, styling, and contact taking care of.

React Native Text - In the accompanying model, the settled title and body text will acquire the fontFamily from styles.baseText, yet the title gives its own extra styles. The title and body will stack on top of one another by virtue of the exacting newlines:

React Native Text

import React, { Component } from "react";
import { Text, StyleSheet } from "react-native";

class TextInANest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleText: "Bird's Nest",
      bodyText: "This is not really a bird nest."
    };
  }

  onPressTitle = () => {
    this.setState({ titleText: "Bird's Nest [pressed]" });
  };

  render() {
    return (
      <Text style={styles.baseText}>
        <Text
          style={styles.titleText}
          onPress={this.onPressTitle}
        >
          {this.state.titleText}
          {"\n"}
          {"\n"}
        </Text>
        <Text numberOfLines={5}>{this.state.bodyText}</Text>
      </Text>
    );
  }
}

const styles = StyleSheet.create({
  baseText: {
    fontFamily: "Cochin"
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold"
  }
});

export default TextInANest;

Nested text

Both Android and iOS permit you to show designed text by explaining scopes of a string with explicit organizing like intense or shaded text (NSAttributedString on iOS, SpannableString on Android). Practically speaking, this is exceptionally drawn-out. For Respond Local, we chose to involve web worldview for this where you can settle text to accomplish a similar impact.

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const BoldAndBeautiful = () => {
  return (
    <Text style={styles.baseText}>
      I am bold
      <Text style={styles.innerText}> and red</Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontWeight: 'bold'
  },
  innerText: {
    color: 'red'
  }
});

export default BoldAndBeautiful;

Behind the scenes, React Native converts this to a flat NSAttributedString or SpannableString that contains the following information: