Build a Calculator | React Native 2022

Learn how to create a fully functional calculator app using React Native and TypeScript. You'll learn basic arithmetic operations, a responsive UI that adjusts number size based on input length, and a dark mode toggle.

The tutorial is practical and for React Native developers who want to build a polished app with theme support and reusable components. You’ll see how to organize your project, manage state, and style dynamically based on the current theme.

What's inside

• Setting up the React Native project with Expo and TypeScript
• Organizing source folders and creating a colors file
• Implementing dark mode using React Context and a switch
• Creating global styles and managing theme-based styling
• Building a reusable Button component with dynamic styles
• Handling button props for different button types and colors
• Adjusting UI elements like number font size based on input length
• Managing calculator logic: operations, results, and clearing input

Setting up the React Native project with Expo and TypeScript

I start by initializing a new Expo project using the TypeScript template with the command expo init. This sets up the environment for building the calculator app with typed components.

After installation, the project folder is opened in Visual Studio Code, and the Expo development server is started with expo start. The app is then run on an iOS device simulator to verify the initial setup.

This foundation ensures you have a modern React Native environment ready for development with TypeScript support.

Organizing source folders and creating a colors file

To keep the project clean, a source folder is created with subfolders for components and styles. Inside styles, a colors.tsx file is added to centralize all color definitions used in the app.

The colors file exports a myColors object containing color values for light and dark themes. This approach makes it easy to maintain consistent colors and switch themes dynamically.

You can customize these colors or use the exact ones from the tutorial by copying the provided values.

Implementing dark mode using React Context and a switch

Dark mode is implemented by creating a themecontext.tsx file inside a new context folder. This file exports a React context initialized with a default value of "light".

In App.tsx, the theme state is managed with useState, toggled by a Switch component from React Native. The switch’s value depends on whether the theme is "light" or "dark".

The theme value and setter are provided to the entire app via ThemeContext.Provider, allowing all components to access and react to theme changes.

This setup enables a global dark mode toggle that updates UI colors throughout the app.

Creating global styles and managing theme-based styling

A new globalStyles.tsx file is created inside the styles folder to hold shared styles for buttons, text, and results display.

Styles are defined using React Native’s StyleSheet and reference colors from the myColors object. Separate styles exist for light and dark modes, as well as for different button types (blue, gray).

In components, styles are applied conditionally based on the current theme from context. For example, the app background switches between white and black depending on the theme.

This pattern keeps styling organized and responsive to theme changes.

Building a reusable Button component with dynamic styles

Inside the components folder, a Button.tsx component is created. It uses useContext to access the current theme and applies styles accordingly.

The button uses TouchableOpacity for press handling and changes its background color dynamically based on props and theme. For example, some buttons remain blue or gray regardless of theme, while others adapt.

The component accepts props like onPress, title, and booleans to indicate if the button is blue or gray. This allows flexible rendering of different calculator buttons with consistent styling.

This reusable button simplifies building the calculator keypad with theme-aware visuals.

Handling button props for different button types and colors

The Button component defines a TypeScript interface for its props, including:

• onPress: function to handle button taps
• title: string label shown on the button
• blue and gray: booleans indicating button color category

These props control the button’s appearance and behavior. For example, blue buttons represent operations, gray buttons are neutral, and others adapt to the theme.

This design ensures buttons behave correctly and look consistent across light and dark modes.

Adjusting UI elements like number font size based on input length

The calculator display dynamically adjusts the font size of the input number depending on its length. When many digits are entered, the font size shrinks so all numbers fit on screen.

This feature improves usability by preventing overflow and maintaining readability as users input longer numbers.

I show how to implement this logic by measuring input length and applying conditional styles.

Managing calculator logic: operations, results, and clearing input

The app supports basic arithmetic operations like addition, subtraction, multiplication, and division.

When an operation button is pressed, the current number is stored and the operation symbol is displayed. After entering the second number and pressing equals, the result is calculated and shown in green.

Users can delete the last digit or reset the calculator to zero with dedicated buttons.

I demonstrate how to handle these interactions using React state and event handlers, creating a smooth calculator experience.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

YouTubeBuild a Calculator | React Native 2022

Watch the full tutorial video on building a calculator app with dark mode in React Native.