Building Beautiful UI in React native By - nativebase.io

1. Getting started with React
Native: Building UI
nativebase.io/

2. Building Beautiful UI in React Native
• Building a User Interface (UI) for mobile apps is more difficult than doing
the same for a web app. The reasons for this are :
• Mobile devices have limited screen size.
• Each type of mobile device (tablets, smartphones etc) is different from the
other and they all require various kinds of support.
• Android and Apple have their own respective platform standards that a
developer should follow. So an app built to work on Android devices will
need its code to be changed in order to run on Apple devices.

3. What is React Native?
React Native is an open source JavaScript library that enables a developer to
build cross-platform apps.
Installation
• Before we start building the UI, let’s make sure that you have installed
React Native on your system.
• Click here and follow the steps carefully. Once you have successfully
installed React Native, we can get started with building an UI with the help
of React Native.

4. Let’s Take a Button Component
This component has two parts: the caption which
says “Awesome Button” and the blue box with
rounded corners surrounding the caption. In
React Native, the box is declared
in <TouchableOpacity />and the caption is
declared in <Text />.

5. How to
design
awesome
button

6. Style can be
declared
separately instead
of doing it inside
the class.

7. How To Layout?
Let’s try creating a Layout using React Native
A screen has 3 basic parts:
• Header
• Content Area
• Footer

8. Layout
• The Header and Footer are similar since they both need to
have a fixed height, a background color with white text and
the user should not be able to scroll them.
• The content area, on the other hand should have fluid height
so that the user can scroll in this area.
• <View />is used for header and footer and <Scroll View />is
used for content area. <Scroll View />is same as <View
/>with the exception that the user can scroll with <Scroll
View />.

9. The screen we get by writing the code shown on left would look something
like image shown on right side

10. Adding a color using
component looks like this

11. Few errors in alignment
There are still a few errors in this screen. The content
area is not properly visible and the header and footer
text is at the side rather than at center. We use Flex
box to align it properly .
Flexbox
To position elements on your screen, you can
use Flexbox. Flexbox is a layout module based
on CSS3

12. Two parts of Layout
• The layout is divided into two parts:
Container and Items.
• Flexbox has separate properties for
containers and items.
• Container properties like flex-direction,
align-items and justify-content set the
layout rules for the items inside the
container.

13. Flex Direction
flex-direction defines the direction in
which the items are placed in the container.

14. Align-items
align-items defines the default behaviour for how items are laid out along the cross axis on
the current line.

15. Justify-Content
justify-content defines the alignment along the main axis. It helps distribute
extra free space left over when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size.

16. Align-Self
1. Item properties like align-
self, flex, and aspect-ratio
set the layout rules for a
particular item in the
container. Item properties
take precedence over
container properties.
2. align-self allows the
default alignment (or the
alignment set by a
container property) to be
overridden for an
individual item.

17. Usage of property Flex
• By using the item property flex, which is a
combination of flex-grow, flex-shrink, and flex-basis,
our layout will now change , Use the align-items and
justify-content property to bring your header and
footer text to the center.
• Our layout looks much better than what we had
initially started with. But UI contains a lot more than
just rectangular boxes and buttons.

18. Icons
• React Native has over 3000
icons which can be accessed
from “react-native-vector-
icons” package.
• Writing this code will get
above icon

19. Custom Shapes
We can also design custom shapes in React Native using the
“react-native-svg” package.
To get the shape of right end we will write our code as

20. Adding UI
elements
• But is that all we need to build a
beautiful UI? What about Tabs,
Cards, Swiper…..?
• Building apps using React Native
would be much easier if there was
a generic set of UI components.
We knew this was essential since
long back.
• That’s why we built NativeBase, an
open source UI components
library for React Native.

21. Change in
Screen after
importing UI
Components

22. Takeaways
Finally, we can summarize that:
• Building UI in React Native is quite similar to the web.
• Flexbox is necessary to build better layouts in React Native.
• Using third party libraries like NativeBase can help you save time that is
used for development in React Native.