Practice: Component & Styling Challenges

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Get a no-fear understanding of Practice: Component & Styling Challenges
Write the code yourself and run it on Expo Go
Apply this concept immediately in a real app project

Let's think about it this way for a moment

This practice set isn't about new concepts — it's designed around four hands-on tasks to help you re-practice the core component/styling/flexbox knowledge from the Basics chapter.

Let's connect it to a real scenario

Four tasks: (1) Build a profile card component (avatar image, name, bio, an icon row using flexDirection: row), (2) Build a 3-column grid layout (using flexWrap: 'wrap'), (3) Build a custom button component (props: label, onPress, color — make it reusable), (4) Build a card list (FlatList) with alternating row colors (using index % 2).

Tasks 1-2: Profile card + grid layout (flexbox challenges)
Task 3: A reusable Button component (props-driven styling)
Task 4: FlatList with alternating row colors (index-based conditional styling)

Code Example

javascript

// Task 3 starter — make this Button reusable via props
function CustomButton({ label, onPress, color = '#3b82f6' }) {
  return (
    <TouchableOpacity style={[styles.button, { backgroundColor: color }]} onPress={onPress}>
      <Text style={styles.buttonText}>{label}</Text>
    </TouchableOpacity>
  );
}
// Try: <CustomButton label="Save" color="#10b981" onPress={...} />

You should see

You'll finish with runnable code for the component/screen in all four tasks.

5-Minute Try-It

Work through the four tasks yourself, in order — try to think it through before peeking at the code sample.

A Quick Word of Caution

Don't move on to the next task before finishing the current one — getting each layout/component concept solid will make the Project chapter much easier.

Easy traps

Not realizing flexWrap: 'wrap' needs to go on the parent View in Task 2 (the grid), so the layout doesn't come out right
In Task 3, forgetting to include a default prop value (color = '#3b82f6') in the destructuring, then having to pass color manually every single time it's used

Now Try It Yourself

Work through the four tasks yourself, in order — try to think it through before peeking at the code sample.

You'll know it worked when: You'll finish with runnable code for the component/screen in all four tasks.