From 3be31727fe5a8e2a375faeaaa4d137eec0af85eb Mon Sep 17 00:00:00 2001 From: Tahir Awan Date: Tue, 11 Feb 2020 16:08:08 +0300 Subject: [PATCH 1/3] added functional component examples with hooks added functional component examples with hooks --- docs/text.md | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 100 insertions(+), 2 deletions(-) diff --git a/docs/text.md b/docs/text.md index c956884065f..97b13e56691 100644 --- a/docs/text.md +++ b/docs/text.md @@ -9,7 +9,61 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: -```SnackPlayer name=Text +
+ +
+ + + +```SnackPlayer name=Text Functional Component Example + +import React, { useState } from 'react'; +import { Text, StyleSheet } from 'react-native'; + +const onPressTitle = () => { + console.log('title pressed'); +}; + +const TextInANest = () => { + const titleText = useState('Bird\'s Nest'); + const bodyText = useState( + 'This is not really a bird nest.'); + + return ( + + + {titleText} + {'\n'} + {'\n'} + + {bodyText} + + ); +}; + +const styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin' + }, + titleText: { + fontSize: 20, + fontWeight: 'bold' + } +}); + +export default TextInANest; +``` + + + +```SnackPlayer name=Text Class Component Example import React, { Component } from 'react'; import { Text, StyleSheet } from 'react-native'; @@ -47,11 +101,53 @@ const styles = StyleSheet.create({ }); ``` + + ## Nested text Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect. -```SnackPlayer name=Nested +
+
    + + +
+
+ + + +```SnackPlayer name=Nested Function Component Example +import React from 'react'; +import { Text, StyleSheet } from 'react-native'; + +const BoldAndBeautiful = () => { + return ( + + I am bold + and red + + ); +}; + +const styles = StyleSheet.create({ + baseText: { + fontWeight: 'bold' + }, + innerText: { + color: 'red' + } +}); + +export default BoldAndBeautiful; +``` + + + +```SnackPlayer name=Nested Class Component Example import React, { Component } from 'react'; import { Text } from 'react-native'; @@ -69,6 +165,8 @@ export default class BoldAndBeautiful extends Component { } ``` + + Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information: ```jsx From 71101c4d949d35375d6aedd5b13af580da9fb236 Mon Sep 17 00:00:00 2001 From: R Nabors Date: Mon, 24 Feb 2020 15:14:15 +0000 Subject: [PATCH 2/3] Prettifying text snack Also, I don't think we need class component examples pas the first! --- docs/text.md | 80 +++++++++++++++------------------------------------- 1 file changed, 23 insertions(+), 57 deletions(-) diff --git a/docs/text.md b/docs/text.md index 97b13e56691..b83d6720a57 100644 --- a/docs/text.md +++ b/docs/text.md @@ -22,26 +22,24 @@ In the following example, the nested title and body text will inherit the `fontF -```SnackPlayer name=Text Functional Component Example - -import React, { useState } from 'react'; -import { Text, StyleSheet } from 'react-native'; +```SnackPlayer name=Text%20Functional%20Component%20Example +import React, { useState } from "react"; +import { Text, StyleSheet } from "react-native"; const onPressTitle = () => { - console.log('title pressed'); + console.log("title pressed"); }; const TextInANest = () => { - const titleText = useState('Bird\'s Nest'); - const bodyText = useState( - 'This is not really a bird nest.'); + const titleText = useState("Bird's Nest"); + const bodyText = useState("This is not really a bird nest."); return ( {titleText} - {'\n'} - {'\n'} + {"\n"} + {"\n"} {bodyText} @@ -50,29 +48,30 @@ const TextInANest = () => { const styles = StyleSheet.create({ baseText: { - fontFamily: 'Cochin' + fontFamily: "Cochin" }, titleText: { fontSize: 20, - fontWeight: 'bold' + fontWeight: "bold" } }); export default TextInANest; + ``` -```SnackPlayer name=Text Class Component Example -import React, { Component } from 'react'; -import { Text, StyleSheet } from 'react-native'; +```SnackPlayer name=Text%20Class%20Component%20Example +import React, { Component } from "react"; +import { Text, StyleSheet } from "react-native"; export default class TextInANest extends Component { constructor(props) { super(props); this.state = { titleText: "Bird's Nest", - bodyText: 'This is not really a bird nest.' + bodyText: "This is not really a bird nest." }; } @@ -80,11 +79,11 @@ export default class TextInANest extends Component { return ( - {this.state.titleText}{'\n'}{'\n'} - - - {this.state.bodyText} + {this.state.titleText} + {"\n"} + {"\n"} + {this.state.bodyText} ); } @@ -92,12 +91,12 @@ export default class TextInANest extends Component { const styles = StyleSheet.create({ baseText: { - fontFamily: 'Cochin', + fontFamily: "Cochin" }, titleText: { fontSize: 20, - fontWeight: 'bold', - }, + fontWeight: "bold" + } }); ``` @@ -107,20 +106,7 @@ const styles = StyleSheet.create({ Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect. -
-
    - - -
-
- - - -```SnackPlayer name=Nested Function Component Example +```SnackPlayer name=Nested%20Text%20Example import React from 'react'; import { Text, StyleSheet } from 'react-native'; @@ -145,26 +131,6 @@ const styles = StyleSheet.create({ export default BoldAndBeautiful; ``` - - -```SnackPlayer name=Nested Class Component Example -import React, { Component } from 'react'; -import { Text } from 'react-native'; - -export default class BoldAndBeautiful extends Component { - render() { - return ( - - I am bold - - and red - - - ); - } -} -``` - Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information: From 2c7d766f3e983ee4d83dfdf4ebc52e591ad76750 Mon Sep 17 00:00:00 2001 From: R Nabors Date: Mon, 24 Feb 2020 15:14:54 +0000 Subject: [PATCH 3/3] Removing stray endBlcok --- docs/text.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/text.md b/docs/text.md index b83d6720a57..8ab6ccd89df 100644 --- a/docs/text.md +++ b/docs/text.md @@ -100,8 +100,6 @@ const styles = StyleSheet.create({ }); ``` - - ## Nested text Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.