Why advanced UI creates polished apps in React Native - Build It to Prove It

Build: PolishedAppDemo

This screen demonstrates how advanced UI elements make an app look polished and professional by using smooth animations, shadows, and responsive layout.

Target UI

-------------------------
| Polished App Demo      |
|-----------------------|
|                       |
|  [Animated Button]    |
|                       |
|  Shadowed Card View   |
|  -------------------  |
|  | Title           |  |
|  | Description     |  |
|  -------------------  |
|                       |
|  Responsive Layout    |
|  [Text adjusts size]  |
-------------------------

Add a button with a smooth scale animation on press

Create a card view with shadow and rounded corners

Use responsive text that adjusts size based on screen width

Use Flexbox layout for spacing and alignment

Starter Code

React Native

import React from 'react';
import { View, Text, Pressable, StyleSheet, Animated, Dimensions } from 'react-native';

export default function PolishedAppDemo() {
  // TODO: Add animated scale value and handlers

  return (
    <View style={styles.container}>
      {/* TODO: Add animated button here */}

      {/* TODO: Add shadowed card view here */}

      {/* TODO: Add responsive text here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  }
});

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

import React, { useRef } from 'react';
import { View, Text, Pressable, StyleSheet, Animated, Dimensions } from 'react-native';

export default function PolishedAppDemo() {
  const scaleAnim = useRef(new Animated.Value(1)).current;
  const screenWidth = Dimensions.get('window').width;

  const onPressIn = () => {
    Animated.spring(scaleAnim, {
      toValue: 0.95,
      useNativeDriver: true
    }).start();
  };

  const onPressOut = () => {
    Animated.spring(scaleAnim, {
      toValue: 1,
      friction: 3,
      useNativeDriver: true
    }).start();
  };

  const responsiveFontSize = screenWidth > 400 ? 24 : 18;

  return (
    <View style={styles.container}>
      <Pressable onPressIn={onPressIn} onPressOut={onPressOut} accessibilityLabel="Animated button">
        <Animated.View style={[styles.button, { transform: [{ scale: scaleAnim }] }]}> 
          <Text style={styles.buttonText}>Animated Button</Text>
        </Animated.View>
      </Pressable>

      <View style={styles.card} accessible accessibilityRole="summary">
        <Text style={styles.cardTitle}>Shadowed Card</Text>
        <Text style={styles.cardDescription}>This card has shadow and rounded corners.</Text>
      </View>

      <Text style={[styles.responsiveText, { fontSize: responsiveFontSize }]}>Responsive Text adjusts size</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  button: {
    backgroundColor: '#4a90e2',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    marginBottom: 30
  },
  buttonText: {
    color: 'white',
    fontWeight: '600',
    fontSize: 18,
    textAlign: 'center'
  },
  card: {
    width: '80%',
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 6,
    elevation: 8,
    marginBottom: 30
  },
  cardTitle: {
    fontSize: 20,
    fontWeight: '700',
    marginBottom: 8
  },
  cardDescription: {
    fontSize: 16,
    color: '#555'
  },
  responsiveText: {
    color: '#333',
    fontWeight: '500'
  }
});

This solution uses React Native's Animated API to create a button that smoothly scales down when pressed and returns to normal size when released. This subtle animation makes the button feel responsive and polished.

The card view uses shadows and rounded corners to create depth, making the UI look modern and professional. The shadow properties work on both iOS and Android (with elevation).

The responsive text adjusts its font size based on the screen width, ensuring readability on different device sizes. Flexbox layout centers and spaces the elements nicely.

Accessibility labels and roles are added for screen readers, improving usability for all users.

Final Result

Completed Screen

-------------------------
| Polished App Demo      |
|-----------------------|
|                       |
|  [Animated Button]    |
|                       |
|  Shadowed Card View   |
|  -------------------  |
|  | Shadowed Card   |  |
|  | This card has   |  |
|  | shadow and      |  |
|  | rounded corners.|  |
|  -------------------  |
|                       |
|  Responsive Text      |
|  Responsive Text      |
|  adjusts size         |
-------------------------

When user presses the button, it smoothly shrinks slightly and returns to normal on release

Card view has visible shadow and rounded corners giving a layered look

Text below adjusts size depending on device width for better readability

Stretch Goal

Add a dark mode toggle that switches the background and text colors

💡 Hint

Use React state to toggle a dark mode boolean and conditionally apply styles for background and text colors