React Native Calculator with Dark Mode | Beginner Tutorial 2022

In this video, I teach you how to build a simple React Native calculator with addition, subtraction, multiplication, and division. We add dark mode for better visuals and scale the display text so long numbers still fit.

This tutorial targets beginners learning state, context, and dynamic styles with TypeScript and Expo. I also cover project structure, reusable components, and theming with React Context.

What's inside

• Introduction and creating the project with Expo and TypeScript
• Folder and file organization for components and styles
• Color definitions and initial Dark Mode setup
• Context for Light/Dark theme
• Switch to toggle themes and apply dynamic styles
• Button component with style and event props
• Global styles that adapt to the active theme
• Math operations and display updates

Introduction and creating the project with Expo and TypeScript

We create a project with expo init, pick the TypeScript template, name it "calculator tutorial", and wait for dependencies.

Open with code ., run expo start, and launch the iOS simulator to confirm the app runs. That gives us React Native and TypeScript ready to go.

Folder and file organization for components and styles

A src folder holds components and styles for scalability.

colors.ts centralizes palette values for consistency and easy updates.

Color definitions and initial Dark Mode setup

colors.ts defines light and dark colors for backgrounds, text, buttons, and results. Adjust values to customize the look.

Dark mode improves accessibility and aesthetics. Central colors make theme switching straightforward.

Context for Light/Dark theme

createContext shares theme state app-wide, starting at light.

Any component can read the current theme without prop drilling.

Switch to toggle themes and apply dynamic styles

A switch toggles theme with local useState and updates context on change.

The root view applies conditional styles from light or dark style arrays for background and other elements.

Button component with style and event props

A reusable button accepts title, onPress handler, and flags for blue or gray styling.

useContext reads the theme so some buttons stay fixed color while others respect dark mode.

Global styles that adapt to the active theme

globalStyles.ts uses StyleSheet.create with colors from colors.ts.

Background and text colors switch with the theme for readability and a polished look.

Math operations and display updates

We implement add, subtract, multiply, and divide with state for current number, previous number, and selected operation.

The display shrinks font size for long numbers (up to 10 characters). Clear and backspace buttons round out the UX.

Resources

CourseReact Native course

React Native with TypeScript and Expo through practical projects.