Handling UI
Think of it as a tool that allows you to to create stuff with logic and UI. Since CS1101S (or any of the CS1010 variants) focuses mainly on logic, this might be the first time you are dealing with UI.
UI is generally handled with the JSX syntax in the previous section. For React Native, we have some basic out-of-the-box components that we can use.
Common React Native Components
These components are enough to solve 90% of your needs.
View
: A container likediv
ScrollView
: LikeView
but ScrollableText
: Displays textsButton
: Supports touchesTouchableOpacity
: LikeButton
but can encapsulate ButtonTextInput
: Supports inputting textsImage
: Display images
You can read up on other components here.
Organizing Components
Components can be organised using flex box. Understanding the 4 concepts below can meet 90% of your needs. Later on we will try to create the mockup for NUS NextBUS using these concepts alone.
Flex direction
row
: organise components horizontallycolumn
: organise components vertically
Justify content
space-between
: Spread out components evenly. First component at the left end, last component at the end.center
: Components are centered.
Styling UI components
You can style components using the StyleSheet
:
Alternatively, you can style components using CSS libraries such as Tailwind. There are different paradigms to approach styling components but the general idea is the same - they all uses concepts from CSS. You can visit the CSS section in the wiki for more info!
You can set the background colour to black to visualise the space that the component takes up.
Last updated