# Texts

Texts are automatically detected and their code is generated by Monday Hero. With texts, you can describe an interface element or provide messages. Texts display static text with no editing features. 

Monday Hero names **texts** on the design as **Labels**. However, it's also possible to convert label into components like buttons or create Custom Labels to reuse elements on the page like **HeaderLabel** below: 

![Automatically detected labels(Text) and components](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-Mc54b35lPlnnVpL5CPB%2F-Mc56mHcqucxlK9zf1Sc%2FGroup%20461.png?alt=media\&token=298a2264-57fb-48bf-bf99-8b2996122f08)

### Automatically Detected Texts

 In the image above, there is a **Welcome to Travel App** label. It's code is autogenerated like below. 

{% tabs %}
{% tab title="iOS" %}

## Label

Texts are called as `Label` in the Swift language. Let's see the generated code and its attributes.

```swift
//Signup Page, Welcome Label
import UIKit

class SignUpViewController: UIViewController {

	// MARK: - Properties
	@IBOutlet private weak var welcomeLabel: UILabel!

	override func viewDidLoad() {
		super.viewDidLoad()
		setupViews()
		setupLayout()
	}

}

extension SignUpViewController {
	private func setupViews() {

		welcomeLabel.textColor = UIColor.black
		welcomeLabel.numberOfLines = 0
		welcomeLabel.font = UIFont.textStyle7
		welcomeLabel.textAlignment = .center
		welcomeLabel.text = NSLocalizedString("welcome.to.travel.app", comment: "")

	}

	private func setupLayout() {
		//Constraints are defined in Storyboard file.
	}

}
```

{% endtab %}

{% tab title="Android" %}

## TextView

Texts are called as `TextView` in the Android Kotlin/Java XML. Let's see the already generated code and its attributes.

```markup
<!--activityExample.xml-->

	<TextView
	android:id="@+id/titleTextView"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:text="@string/title_text"
	style="@style/textStyle13"
	android:textAlignment="center"
	android:textColor="?attr/black"
	android:layout_marginStart="39dp"
	android:layout_marginEnd="39dp"
	android:layout_marginBottom="12dp"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/mondayHeroLogoImageView"
	app:layout_constraintBottom_toTopOf="@+id/descriptionTextView"/>
	
```

```markup
<!--strings.xml-->
<string name="title_text">"SimpleText"</string>
<string name="description_text">"This is a textView example and textViews are better while it kept short and legible."</string>
```

{% endtab %}
{% endtabs %}

### Custom Texts

In order to reuse the same styled labels like header1, header2, create custom texts. Here is how to do it:&#x20;

![Create a reusable label](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-Mc5C1sC3ahg1gW0nGDi%2F-Mc5D8_PabMzDRfGR87L%2FGroup%20459.png?alt=media\&token=1c632701-a569-4cd5-b51d-2c78cb00acce)

The code will be generated like below for custom texts:

{% tabs %}
{% tab title="HeaderLabel.swift - iOS" %}

```swift
//HeaderLabel.swift

import UIKit

class HeaderLabel: UILabel {

	// MARK: - Initializers
	override init(frame: CGRect) {
		super.init(frame: frame)
		initialize()
	}

	required init?(coder aDecoder: NSCoder) {
		super.init(coder: aDecoder)
		initialize()
	}

	func initialize() {
		applyDefaultStyle()
	}

	// MARK: - Styling
	func applyDefaultStyle() {
		self.textColor = UIColor.pebble
		self.numberOfLines = 0
		self.font = UIFont.textStyle18
		self.textAlignment = .left
	}

	func set(text: String){
		self.text = text
	}

}
```

{% endtab %}

{% tab title="SignupPage.swift - iOS" %}

```swift
import UIKit

class SignupPage: UIViewController {

	// MARK: - Properties
	@IBOutlet private weak var welcomeLabel: HeaderLabel!

	override func viewDidLoad() {
		super.viewDidLoad()
		setupViews()
		setupLayout()
	}

}

extension SignupPage {
	private func setupViews() {

		welcomeLabel.set(text: NSLocalizedString("welcome.to.travel.app", comment: ""))

	}

	private func setupLayout() {
		//Constraints are defined in Storyboard file.
	}

}

```

{% endtab %}

{% tab title="Android" %}
Coming soon.
{% endtab %}
{% endtabs %}