Activity: Components and Basic Styling

🔍 Discovery Challenge (20 minutes)

Part One: Component Analysis (10 min)

Research 3 popular React Native apps and identify:

1. Common UI Components

   • Navigation bars
   • Cards/containers
   • Buttons and controls
   • Lists and grids
   • Input fields

2. Visual Patterns

   • What colors are used?
   • How is spacing handled?
   • What typography choices stand out?

Part 2: Style Investigation (10 min)

Examine this code snippet and predict what it will look like:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    padding: 20,
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 15,
    marginBottom: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  }
});

Sketch Your Prediction

Draw what you think this component would look like on paper.

🎯 Mini Challenge (5 min)

Create a style object for a button that:

• Has rounded corners
• Uses your favorite color
• Has white text
• Adds a subtle shadow

const buttonStyle = {
  // Your styles here
};

💡 Reflection Questions

1. What makes a component reusable?
2. How do mobile styles differ from web styles?
3. What styling approach feels most intuitive to you?

📚 Resources

• React Native Style Documentation
• Flexbox Playground
• Color Psychology in Apps

📤 Submit Your Work

Complete this activity and submit your work through the Activity Submission Form