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 like div

• ScrollView: Like View but Scrollable

• Text: Displays texts

• Button: Supports touches

• TouchableOpacity: Like Button but can encapsulate Button

• TextInput: Supports inputting texts

• Image: 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

flex direction

• row: organise components horizontally

• column: organise components vertically

Justify content

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:

import { StyleSheet, Text, View } from 'react-native';

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eaeaea',
  },
  title: {
    marginTop: 16,
    backgroundColor: '#61dafb',
    color: '#20232a',
    fontSize: 30,
    fontWeight: 'bold',
  },
});

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.