Detailed Notes
In our third video on React Native: The Beginners Guide to React-Native Fundamental Concepts Part 2, continues our discussion of fundamental components. In addition to the design and layout concepts we covered last time, in this presentation we will be looking the most commonly used component, the text component.
Just in case you missed the last video you can find it here or you need a refresher you can find the first video Started Using React Native For Your Mobile Applications here.
Recap
React Native is an open-source mobile application framework brought to us by Facebook, Inc. We can use to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React's framework along with native platform capabilities.
React-Native Fundamental Concepts Part 2 focuses on: Text Component
For a full list of components and APIs goto https://reactnative.dev/docs/accessibilityinfo
Text
A Text component in React Native is a component we use for displaying text. For example it supports nesting, styling, and touch handling. Furthermore is it probably one of the most widely useful components next to Views in React Native. In addition the text component also comes with the attribute numberOfLines, that we can use to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.
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. In practice, this is very tedious. In React Native, they decided to use a web paradigm for this where you can nest text to achieve the same effect.
Containers
The Text element is unique relative to layout: everything inside is no longer using the Flexbox layout but using text layout. This means that elements inside of a Text are no longer rectangles, but wrap when they see the end of the line.
Limited Style Inheritance
On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
html { font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 11px; color: #141823; }
In this example, all elements in the document will inherit this font unless they or one of their parents specifies a new rule. Because of this rule, React Native requires you must wrap all the text nodes inside of a Text component. However, React Native still supports the concept of style inheritance, but it only applies to text subtrees. While the new way is a bit more constrained way to styling text, it will however lead to better apps.
From a developers perspective:
React components are designed with strong isolation in mind. You can drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
From an implementors perspective:
The implementation of React Native is also simplified. We do not need to have a fontFamily field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only inside of the native Text component and doesn't leak to other components or the system itself.
React-Native Fundamental Concepts Part 2 Additional Resources React is an open-source, front end, JavaScript library for building user interfaces or UI components. In addition, Facebook and a community of individual developers and companies help maintain it. React can be useful as a base in the development of single-page or mobile applications. Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on Chrome V8 engine and executes JavaScript code outside a web browser. Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. In addition it includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Android software development is the process by which applications are created for devices running the Android operating system. Xcode is Apple's integrated development environment for macOS and is used to develop software for macOS, iOS, iPadOS, watchOS, and tvOS.
Transcript Text
[Music] now i've briefly kind of gone over the nesting of our text here but what is next so with android and ios they both allow you to display formatted text by annotation ranges of a string with specific formattings like we showed here with bold uh color and fonts now in practice this can be very tedious that way this is why react native decided to use a web paradigm for this where you can nest the text to achieve the same effect like we showed here so let's look at another simple example now this one we will do gray all right so in this view tag here let me show you a cleaner view of using nested text let's just create a text and inside this let's just do another text and the parent i am old i am the child i am red all right so here we have two text tags uh we have our outer our parent tag which is going to have text i am the parent i am bold and then inside of our parent text tag we also have a child text tag that is going to display the text i am the child i am red and bold now to make this work we now need to apply some styles so i'll come down here and we will add styling so we'll add parent page text and we will set the font weight new bold and then we will set the inner text and we will set it to be the color red okay so far nothing has changed we now have two new styles that we need to apply so we'll take our parent base text and we'll come up here and we will add our style to the parent and since this is only one style we don't need to add extra swirlies or an array we can just use styles dot parent-based text when we save that we see that all of our text is bold now what we're also seeing over here though is all of our text is one big line of text that's because we have no breaks in here and you can do that in case you want to actually add bold within this you know a line of text and then continue on doing some other text so we can do i am bold and then add another style here styles dot or text and you can see i am the parent i am bold and i am the child i am red and bold so this is an interesting way of creating a custom style tags in order to bold italicize your text uh midstream within your applications so after that we could actually then continue adding more text i am after child and bold so behind the scenes react native converts this uh formatting to a flat ns attributed string uh in ios and in android it's a spannable string i'm right that's backwards um so behind the scenes great native is converting this text uh to a flat ns attribute string tag now on ios is converting this to a spannable string so it would read something like this it would convert it and inside of the expandable string it would contain the text i am bold and red then it would have an attribute for zero to nine being bold or basically zero position here give the position here uh the attribute would be bold and then it would say the next set of texts from this position being say 9 to 17 would be bold and red all right so next let's talk about the text tag as a container so the text element is a unique relative to layout everything inside is no longer unique or using a flex box layout but instead it's using a text layout this means that elements inside of a text tag are no longer rectangles but wrap when they see the end of the line so to see this example let's uh create one more example here let's bring this text down because the height can be a little bit smaller for our example here there we go so let's create another scroll view here and in this one let's start with a text it starts with capital and again we'll do nested text in the first part this will be first part and then we have second part right we save this we see our even though we have nested text tags the text is all displayed on one line first part and second part let me also make this guy white reed yellow ah green all right so now here the text container the text will be inline if the space allows it the first part and the second part otherwise the text will flow as if it was one the first part and second and the third so if we actually shrunk this here we actually make our width say 50. you see it actually stacks the text so it only goes in line until it reaches the end of the container and then it wrapped all right so next do another scroll view here [Music] and find colors that stand out so we can see we'll just use blue all right all right so the next one so if we do get this way so if we get rid of the outer text and just put our text inside of our scroll view each text is its own block the first and the second part so you notice here they're not in line because these texts are just added inside of the view when added inside of a text container they are treated as inline text okay does anyone have any questions regarding the text block nope all right so next let's talk about some of the limited style of inheriting so when we look at web pages uh typically you'll see some type of text that looks like this that comment here so on a web page you might have some css that looks like this html family lucid brand etc font style the font size 11 pixels and color some funky uh text code now on the web we can use this kind of css attribute to set our font family and the size for the entire document and because we're applying it to the html tag this now becomes inherited for all of our web pages so if we apply the css to all of our web pages they all have the same look and feel so all the elements in the document again will inherit this font unless they or one of their parent specifies a new rule now because of this rule react native requires you to wrap all the text nodes inside of a text component you cannot have a text node directly under a view or really you shouldn't have a text node under a view if you want to apply a universal text formatting for example let's go to this one here so in this example here um if we just typed in let me do one more here so we have a scroll view let me just do view and instead of putting in a text tag i just did hello world it does not like that that's because you are not allowed to just stick text into your code willy-nilly it tells you right here text string must be rendered within a text component so this guy has to be wrapped inside of a text tag and that worked now react native still has the concept of style inheritance but it is limited to the text subtrees so in our example up here where we applied the styles we applied the style here so it applied to the bold and then it also applied to the subset and then the subset we added an additional style of red which applied only to this text here now this might get seem a little convoluted in order to format your text but you have to think in terms of web development or mobile development so the device really has no concept of things like bold italic like on the web we have to actually create custom styles to do that using the style the css like styles of the javascript styles object so this more constrained way to style text will yield better apps that we can develop so for instance from a developer's perspective the react components are designed with a strong isolation in mind you should be able to drop component anywhere in your application trusting that as long as the props are the same it will look and behave the same way the text properties that can inherit from the outside of the props would break this isolation now from an implementation perspective the implementation of react native is also simplified we do not need to have a font family field on every single element and we do not need to potentially reverse the tree up to the root every time we display a text node the style inheritance is only encoded inside of the native text component and doesn't leak to other components or the system itself making it very easy for us to create custom look and feels for our applications so with that are there any questions uh question for you mike so how is it hard to transfer let me say this code since it's strictly for mobile app to turn into a web web page or can you copy code let me say from let me say the spring show and post it in native and it works so tweak a few things here and there you may have to tweak a few things here and there uh the nice part is so with react native uh where's my console so what i could also do is i could also open this up as a web page so if i do w browser somewhere up there and it is not like something i did what did i not save or not it's not like something oh yeah okay he's happy he's happy reload oh i need to add some components for web so let me go over to the our little cheat here so this tool will automatically include the components it needs to display it as a web page so that's the nice part about react native not only will this convert it to a device but it will also convert it to a web page okay but yes uh typically you would have to copy your styles over probably tweak it slightly like for instance in css it's background dash color but in react david it's background color if you're using visual code what's so nice about this guy is once you're in here if you do yeah control space it gives you a list of all the attributes that you can apply for styling so you gotta be careful because not all of these apply to every element gotcha so even if you have um so so you can pretty much even get code from um let me say the springs also the uh the net framework and paste it here and you just trick a few things then you can you can make it in a app easy is that possible oh okay cool that's nice then do they still um you i mean do they use this a lot in like um i mean i've been in companies whereby they say oh we want to build um let me say you're doing an enterprise system and they want us and they always say like oh we want to make this uh we want to create the mobile and they create let me say the mobile testing team so are they using this style or they react native or they are doing it differently that kind of depends on the company like the company i'm at we currently don't have any true mobile apps um they're using the actual web coding uh that allows you to say let's do doctor who could still be up there it is all right so this is a web version but if i start shrinking my page because of the css i have the css basically switches my site to be mobile like so it acts like a mobile application but it's really a web application so that's what the company i'm at currently is doing for applications now some companies may like uh android so they may only create android applications so they might just go take their java people if they have them and go out and quickly hack out a java uh android app using the android tools uh it just kind of depends on the companies truthfully in today's world it makes really no sense to go out to a specific architecture and build an app for ios directly or android directly unless you're doing something like gaming or something that's very native to an epi uh to a device uh for instance like the iphone cameras if you're doing something that's specifically photo and you needed like all that hd resolution dopely uh whatever uh then yes you would probably want to either do a swift uh use xcode to build out your application uh or android if you're doing something specific to a particular device now with that being said for most generic applications you should be doing something using a tool like this because really you want to get your app out to as many people as possible uh unless there's a reason for you not to allow your application like to android and you want to just strictly keep it on ios okay thanks man no problem all right so with that let's just quickly review so today we talked about the text component the text component is a react component for displaying text it supports nesting styling and touch handling which we did not cover here but we will cover when we get to events and handling it's we can often define static references so that we can declare text globally so we don't have to read or constantly type the same text over and over this is very good to avoid typos we also looked at the number of lines attribute which allows us to restrict the number of lines our text can wrap on and we also talked about some of the different container properties and styling that goes along with our text component that's it for today's discussion on react native i'd like to thank you for your time if you would like to discuss any of these topics further or talking more about react native send us your comments or questions at info development.com you can reach us at our website developernerd.com contact us we're also on youtube and vimeo our goal is making every developer better thank you have a great day [Music] you
Transcript Segments
[Music]
now i've briefly kind of gone over the
nesting of our text here but what is
next
so
with android and ios
they both allow you to display formatted
text by annotation ranges of a string
with specific formattings like we showed
here with bold uh color and fonts
now in practice this can be very tedious
that way this is why react native
decided to use a web paradigm for this
where you can nest the text to achieve
the same effect
like we showed here
so let's look at another simple example
now
this one we will do
gray
all right so in this view tag here
let me show you a cleaner view
of using nested text
let's just create a text
and inside this let's just do another
text
and the parent
i am old
i am the child
i am red
all right so here we have two text tags
uh we have our outer our parent tag
which is going to have text i am the
parent i am bold
and then inside of our parent text tag
we also have a child text tag that is
going to display the text i am the child
i am red
and bold
now to make this work we now need to
apply some styles
so i'll come down
here and we will add
styling
so we'll add parent
page
text
and we will set the font weight
new bold
and then we will set the inner text
and we will set it to be the color
red
okay so far nothing has changed
we now have two new styles that we need
to apply so we'll take our parent base
text
and we'll come up here and we will add
our style to the parent
and since this is only one style we
don't need to add extra
swirlies or an array
we can just use styles
dot
parent-based text
when we save that we see that all of our
text is bold
now what we're also seeing over here
though is all of our text is one big
line of text that's because we have no
breaks in here
and you can do that in case you want to
actually
add bold
within this
you know a line of text and then
continue on doing some other text
so we can do i am bold and then add
another style here
styles dot or text
and you can see i am the parent i am
bold and i am the child i am red and
bold
so this is an interesting way of
creating a custom style tags in order to
bold italicize your text uh
midstream within your
applications
so after that we could actually then
continue adding more text
i am
after child
and bold
so behind the scenes react native
converts this
uh formatting
to a flat ns attributed string
uh
in ios and in android it's a spannable
string i'm right that's backwards
um so
behind the scenes great native is
converting this
text
uh to a flat ns attribute string tag
now on ios is converting this to a
spannable string
so it would read something like this
it would convert it and
inside of the expandable string it would
contain the text i am bold and red
then it would have an attribute for zero
to nine being bold or basically zero
position here give the position here
uh the attribute would be bold and then
it would say the next set of texts from
this position being say 9 to 17 would be
bold and red
all right so next let's talk about the
text tag as a container
so the text element is a unique relative
to layout
everything inside is no longer unique or
using a flex
box layout
but instead it's using a text layout
this means that elements inside of a
text tag are no longer rectangles but
wrap when they see the end of the line
so to see this example let's uh create
one more example here let's bring this
text down because the height can be a
little bit smaller for our example here
there we go
so let's create another
scroll view here
and in this one let's start with a text
it starts with capital
and again we'll do nested text
in the first part this will be first
part
and
then we have second part
right we save this
we see our even though we have nested
text tags
the text is all displayed on one line
first part and second part
let me also make this guy
white
reed
yellow
ah green
all right so now here the text container
the text will be inline if the space
allows it
the first part and the second part
otherwise the text will flow as if it
was one
the first part and second and the
third so if we actually shrunk this here
we actually make our width say
50.
you see it actually
stacks the text
so it only goes in line until it reaches
the end of the container and then it
wrapped
all right so next
do another scroll view here
[Music]
and find colors that
stand out so we can see we'll just use
blue
all right
all right so the next one
so if we do
get this way
so if we get rid of
the outer text and just put our text
inside of our scroll view
each text
is its own block
the first
and the second part
so you notice here they're not in line
because these texts are just added
inside of the view
when added inside of a text container
they are treated as inline text
okay does anyone have any questions
regarding the text block
nope
all right so next let's talk about some
of the limited style of inheriting
so
when we look at web pages uh typically
you'll see some type of text that looks
like this
that comment here
so on a web page you might have some css
that looks like this html
family
lucid
brand
etc
font style
the font
size
11 pixels
and color
some funky
uh
text code
now on the web we can use
this
kind of css attribute to set our font
family and the size for the entire
document
and
because we're applying it to the html
tag
this now becomes
inherited
for all of our web pages so if we apply
the css to all of our web pages
they all have the same look and feel
so all the elements in the document
again will inherit this font unless they
or one of their parent specifies a new
rule
now because of this rule react native
requires you to wrap all the text nodes
inside of a text component
you cannot have a text node directly
under a view or really you shouldn't
have a text node under a view if you
want to apply
a universal
text formatting
for example
let's go to
this one here
so
in this example here
um if we just typed in
let me do one more here so we have a
scroll view let me just do view
and
instead of putting in a text tag i just
did hello
world
it does not like that that's because you
are not allowed to just stick text into
your code
willy-nilly it tells you right here text
string must be rendered within a text
component
so this guy has to be wrapped inside of
a text tag
and that worked
now react native still has the concept
of style inheritance but it is limited
to the text subtrees
so in our example up here where we
applied the styles
we applied the style here
so it applied to the bold and then it
also applied to the subset
and then the subset we added an
additional style of red which applied
only to this text here
now
this might get seem a little convoluted
in order to format your text but you
have to think in terms of
web development or mobile development so
the
device really has no concept of things
like bold italic
like on the web we have to actually
create custom styles to do that using
the style
the css like styles of the
javascript styles object
so this more constrained way to style
text will
yield better apps that we can develop
so for instance from a developer's
perspective the react components are
designed with a strong isolation in mind
you should be able to drop component
anywhere in your application
trusting that as long as the props are
the same it will look and behave the
same way the text properties that can
inherit from the outside of the props
would break this isolation
now from an implementation perspective
the implementation of react native is
also simplified we do not need to have a
font family field on every single
element and we do not need to
potentially reverse the tree up to the
root every time we display a text node
the style inheritance is only encoded
inside of the native text component and
doesn't leak to other components or the
system itself making it very easy for us
to create custom
look and feels for our applications
so
with that
are there any questions
uh question for you mike so how
is it hard to transfer let me say this
code since it's strictly for mobile app
to turn into a web web page or can you
copy code let me say from let me say the
spring show and post it in native and it
works so tweak a few things here and
there you may have to tweak a few things
here and there uh the nice part is
so with react native
uh where's my console
so what i could also do
is i could also open this up as a web
page so if i do w
browser somewhere
up there
and it is not like something i did
what did i not save or not
it's not like something oh
yeah okay he's happy he's happy
reload
oh i need to add some components for web
so let me
go over to the
our little cheat here
so this tool will automatically
include the components it needs
to display it as a web page
so that's the nice part about react
native not only will this convert it to
a device but it will also convert it to
a web page
okay
but yes uh typically you would have to
copy
your styles over probably tweak it
slightly
like for instance in css it's background
dash color
but in react david it's background color
if you're using visual code what's so
nice about this guy
is once you're in here
if you do
yeah control space
it gives you a list of all the
attributes that you can apply for
styling
so you gotta be careful because not all
of these apply to every element gotcha
so even if you have um
so so you can pretty much even get code
from um
let me say the springs also the
uh the net framework and paste it here
and you just trick a few things then you
can you can make it in a
app easy is that possible
oh okay cool that's nice then
do they still um you i mean do they use
this a lot in like um
i mean i've been in companies whereby
they say oh we want to
build um let me say you're doing an
enterprise system and they want us and
they always say like oh we want to make
this uh we want to create the mobile and
they create let me say the mobile
testing team
so are they using this style or they
react native or they are doing it
differently
that kind of depends on the company like
the company i'm at we currently don't
have any true mobile apps um
they're using
the actual web coding
uh that allows you to say
let's do doctor who
could still be up there it is
all right so
this is a web version
but if i start shrinking my page
because of the css i have
the css basically switches my site to be
mobile like so it acts like a mobile
application but it's really a web
application so that's what the company
i'm at currently is doing for
applications now some companies may like
uh
android so they may only create android
applications so they might just go take
their java people if they have them and
go out and quickly hack out a java uh
android app using the android tools uh
it just kind of depends on the companies
truthfully
in today's world it makes really no
sense to go out to a specific
architecture and build
an app
for ios directly or android directly
unless you're doing something like
gaming
or something that's very native to an
epi uh to a device
uh
for instance like the iphone cameras if
you're doing something that's
specifically photo and you needed like
all that hd resolution dopely
uh whatever uh then yes you would
probably want to either do a swift
uh use xcode to build out your
application
uh
or android if you're doing something
specific to a particular device now with
that being said
for most generic applications you should
be doing something using a tool like
this because really
you want to get your app out to as many
people as possible uh unless there's a
reason for you not to allow your
application like to android and you want
to just strictly keep it on ios
okay thanks man
no problem
all right so with that let's just
quickly review so today we talked about
the text component
the text component is a react component
for displaying text
it supports nesting styling and touch
handling which we did not cover here but
we will cover when we get to events and
handling it's we can often define static
references so that we can declare text
globally
so we don't have to read
or constantly type the same text over
and over
this is very good to avoid typos we also
looked at the number of lines attribute
which allows us to restrict the number
of lines our text can wrap on
and we also talked about some of the
different container properties
and styling that goes along with our
text component
that's it for today's discussion on
react native
i'd like to thank you for your time if
you would like to discuss any of these
topics further or talking more about
react native
send us your comments or questions at
info development.com you can reach us
at our website developernerd.com contact
us we're also on youtube and vimeo
our goal is making every developer
better thank you have a great day
[Music]
you