Build a Calculator | React Native 2022

A calculator is the perfect first real React Native project: small enough to finish, meaty enough to teach you state, context, and theming for real. This one does full arithmetic, shrinks the font as numbers get longer, and has a dark mode toggle that restyles the whole app. I build every piece of it in the video with TypeScript and Expo.

What's inside

• Toggle dark mode app-wide with React Context and a Switch
• Build one reusable Button component that adapts to theme and type
• Centralize colors and global styles so theming stays clean
• Shrink the display font automatically as input gets longer
• Handle operations, results, delete, and clear with React state

Resources

CourseReact Native course

Ready for more than a calculator? 17 sections and 800+ minutes, from fundamentals to the stores.