Day 2: Building and Customizing the User Interface (UI)

On Day 2, we’ll dive deeper into React Native’s component structure and layout. We will customize the interface, introduce styles, and organize content better. Today, you will learn how to add more components to your app, style them, and use layout techniques like Flexbox.

Step 1: Continue from Yesterday’s Code

We will build on the existing code from App.js that we wrote yesterday. Open App.js and replace everything with the code below. This will form the foundation of today’s progress.

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, ScrollView } from 'react-native';

// Main Component
export default function App() {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Welcome to My First App</Text>
      </View>

      <View style={styles.inputSection}>
        <TextInput
          style={styles.input}
          placeholder="Enter your name"
        />
        <Button
          title="Submit"
          onPress={() => alert('Submitted!')}
        />
      </View>

      <View style={styles.boxSection}>
        <View style={styles.box}><Text style={styles.boxText}>Box 1</Text></View>
        <View style={styles.box}><Text style={styles.boxText}>Box 2</Text></View>
        <View style={styles.box}><Text style={styles.boxText}>Box 3</Text></View>
      </View>
    </ScrollView>
  );
}

// Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  header: {
    backgroundColor: '#6200EE',
    padding: 20,
    borderRadius: 10,
    marginBottom: 20,
  },
  headerText: {
    fontSize: 24,
    color: 'white',
    textAlign: 'center',
  },
  inputSection: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 10,
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  boxSection: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  box: {
    width: '30%',
    backgroundColor: '#6200EE',
    padding: 20,
    borderRadius: 10,
  },
  boxText: {
    color: 'white',
    textAlign: 'center',
    fontWeight: 'bold',
  }
});

Step 2: Understanding the Layout and Components

Here’s what this code does and how it improves upon what we had in Day 1:

• View Structure:
• The main app is wrapped in a ScrollView so it becomes scrollable.
• We have multiple View sections to group the content:
  • A header with a text element styled as a title.
  • An inputSection where users can input text and press a button.
  • A boxSection with three boxes laid out side by side.

Step 3: Adding More Layout Elements

Now, let’s expand the UI by adding more components and organizing them. Copy and paste the following code inside the App component, below the existing boxSection view:

      <View style={styles.listSection}>
        <Text style={styles.sectionTitle}>List of Items</Text>
        <View style={styles.listItem}><Text style={styles.listText}>Item 1</Text></View>
        <View style={styles.listItem}><Text style={styles.listText}>Item 2</Text></View>
        <View style={styles.listItem}><Text style={styles.listText}>Item 3</Text></View>
        <View style={styles.listItem}><Text style={styles.listText}>Item 4</Text></View>
      </View>

Then, add the following styles to the StyleSheet at the bottom:

  listSection: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 10,
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  listItem: {
    padding: 10,
    backgroundColor: '#eee',
    borderRadius: 5,
    marginBottom: 5,
  },
  listText: {
    fontSize: 16,
  }

Step 4: Customizing Buttons and Interactivity

Now let’s add an interactive section to modify the state. Replace the previous Button with a more interactive button that updates based on user input.

Modify the stateful component as follows:

1. Import useState at the top of your file: import React, { useState } from 'react';
2. Inside your App component, initialize the state for user input: const [name, setName] = useState('');
3. Modify the TextInput and Button to handle the user input: <TextInput style={styles.input} placeholder="Enter your name" value={name} onChangeText={setName} /> <Button title="Submit" onPress={() => alert(`Hello, ${name}!`)} />
4. Now, whenever the user enters their name and clicks “Submit,” they will see a personalized alert with their name.

Step 5: Adding Images and Icons

Next, we will include images in our layout. You can either use online images or add local images to your project.

1. Add the following import at the top of your file: import { Image } from 'react-native';
2. Below the input section, paste this new image component: <View style={styles.imageSection}> <Image style={styles.image} source={{ uri: 'https://reactjs.org/logo-og.png' }} /> </View>
3. Add the following styles to the StyleSheet:
   javascript imageSection: { marginBottom: 20, }, image: { width: '100%', height: 200, resizeMode: 'contain', },

Now, an image will be displayed below the input section. If you want to use a local image instead of a URL, place the image file in your project’s assets folder and update the source like this:

source={require('./assets/myimage.png')}

Step 6: Adding More Buttons and Actions

Let’s add two more buttons for more interactive functionality. Place the following code inside your App component below the list section:

      <View style={styles.buttonSection}>
        <Button title="Action 1" onPress={() => alert('Action 1 executed')} />
        <Button title="Action 2" onPress={() => alert('Action 2 executed')} />
      </View>

Now, add these styles to the StyleSheet:

  buttonSection: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 20,
  }

Step 7: Testing the Layout on a Mobile Device

Now, save your code and preview it on your mobile device using the Expo Go app as we did in Day 1. After scanning the QR code and running the app, you should now see the following elements in your app:

1. A header with a welcome message.
2. A TextInput field to capture the user’s name.
3. A list of items showing several items in a vertical scroll.
4. A set of three boxes laid out horizontally.
5. A clickable Submit button that greets the user.
6. Two more action buttons that trigger alerts.
7. An image displayed at the bottom.

Step 8: Final Enhancements

Let’s finish by tweaking some visual enhancements. Add a shadow effect and padding to the listItem to make the list stand out more.

Modify the listItem style as follows:

  listItem: {
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 5,
    marginBottom: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    elevation: 2,
  }

Now your list items will have a subtle shadow, giving them a more card-like effect.

Step 9: Testing Responsiveness

React Native apps automatically adjust to different screen sizes, but it’s good practice to make sure your

layout works across various devices. You can do this by testing the app on both a tablet and a phone using the Expo Go app.

If you encounter any layout issues, you can fine-tune the flexDirection, padding, and margin properties in your styles.

Conclusion

In this long Day 2 tutorial, you learned how to:

• Structure your UI with different React Native components
• Use useState to handle dynamic user input
• Add images and buttons for interactivity
• Apply complex layouts with Flexbox
• Style components with shadows, padding, and margins

Now that you’ve built and styled the layout of your app with components and Flexbox, in Day 3, we will introduce navigation and add more interactive elements like buttons that respond to user actions, taking the user experience to the next level!