React Native cookbook : step-by-step recipes for solving common React Native development problems, 2nd edition

Improve your React Native mobile development skills and transition from web to mobile development with this solution-packed guide Key Features Learn strategies and techniques to face React Native mobile development challenges head-on Explore ways to use iOS and Android for React Native development to maximize code reuse and cohesion Build engaging user experiences with React Native Book Description If you are a developer looking to create mobile applications with maximized code reusability and minimized cost, React Native is what you need. With this practical guide, you'll be able to build attractive UIs, tackle common problems in mobile development, and achieve improved performance in mobile environments. This book starts by covering the common techniques for React Native customization and helps you set up your development platforms. Over the course of the book, you'll work through a wide variety of recipes that help you create, style, and animate your apps with built-in React Native and custom third-party components. You'll also develop real-world browser-based authentication, build a fully functional audio player, and integrate Google Maps in your apps. This book will help you explore different strategies for working with data, including leveraging the popular Redux library and optimizing your app's dataflow. You'll also learn how to write native device functionality for new and existing React Native projects and how app deployment works. By the end of this book, you'll be equipped with tips and tricks to write efficient code and have the skills to build full iOS and Android applications using React Native. What you will learn Build UI features and components using React Native Create advanced animations for UI components Develop universal apps that run on phones and tablets Leverage Redux to manage application flow and data Expose both custom native UI components and application logic to React Native Employ open source third-party plugins to create React Native apps Who this book is for If you're a JavaScript developer looking for a practical guide for developing feature-rich mobile apps using React Native, this book is for you. Though not necessary, some experience of working with React will help you understand the React Native concepts covered in this book easily. While React Native development can be done on a Windows machine, certain aspects, such as running your apps on iOS devices and in the iOS simulator, or editing native code with Xcode, can only be done with a Mac. Table of Contents Setting Up Your Environment Creating a Simple React Native App Implementing Complex User Interfaces – Section 1 Implementing Complex User Interfaces – Section 2 Implementing Complex User Interfaces -- Section3 Adding Basic Animations to Your App Adding Advanced Animations to Your App Working with Application Logic and Data Implementing Redux App Workflow and Third-Party Plugins Adding Native Functionality - Part I Adding Native Functionality - Part II Integration with Native Applications Deploying Your App Optimizing the Performance of Your App Title Page Copyright and Credits React Native Cookbook Second Edition About Packt Why subscribe? Packt.com Contributors About the author About the reviewer Packt is searching for authors like you Preface Who this book is for What this book covers To get the most out of this book Download the example code files Download the color images Conventions used Sections Getting ready How to do it... How it works... There's more... See also Get in touch Reviews Setting Up Your Environment Technical requirements Installing dependencies Installing Xcode Installing Genymotion Installing Node.js Installing Expo Installing Watchman Initializing your first app Running your app in a simulator/emulator Running your app on an iOS simulator Running your app on an Android emulator Running your app on a real device Running your app on an iPhone or Android Summary Further reading Creating a Simple React Native App Adding styles to elements Getting ready How to do it... How it works... There's more... Using images to mimic a video player Getting ready How to do it... How it works... Creating a toggle button Getting ready How to do it... How it works... There's more... Displaying a list of items Getting ready How to do it... How it works... There's more... Using flexbox to create a layout Getting ready How to do it... How it works... There's more... See also Setting up and using navigation Getting ready How to do it... How it works... See also Implementing Complex User Interfaces - Part I Creating a reusable button with theme support Getting ready How to do it... How it works... Building a complex layout for tablets using flexbox Getting ready How to do it... There's more... See also Including custom fonts Getting ready How to do it... How it works... See also Using font icons Getting ready How to do it... How it works... See also Implementing Complex User Interfaces - Part II Dealing with universal applications Getting ready How to do it... How it works... See also Detecting orientation changes Getting ready How to do it... There's more... Using a WebView to embed external websites Getting ready How to do it... How it works... Linking to websites and other applications Getting ready How to do it... How it works... See also Creating a form component Getting ready How to do it... How it works... Implementing Complex User Interfaces - Part III Introduction Creating a map app with Google Maps Getting ready How to do it... How it works... There's more... Creating an audio player Getting ready How to do it... How it works... There's more... Creating an image carousel Getting ready How to do it... How it works... There's more... Adding push notifications to your app Getting ready How to do it... How it works... There's more... Implementing browser-based authentication Getting ready How to do it... How it works... See also Adding Basic Animations to Your App Introduction Creating simple animations Getting ready How to do it... How it works... Running multiple animations Getting ready How to do it... How it works... Creating animated notifications Getting ready How to do it... How it works... There's more... Expanding and collapsing containers Getting ready How to do it... How it works... See also Creating a button with a loading animation Getting ready How to do it... How it works... Conclusion Adding Advanced Animations to Your App Introduction Removing items from a list component Getting ready How to do it... How it works... See also Creating a Facebook reactions widget Getting ready How to do it... How it works... Displaying images in fullscreen Getting ready How to do it... How it works... See also Working with Application Logic and Data Introduction Storing and retrieving data locally Getting ready How to do it... How it works... See also Retrieving data from a remote API Getting ready How to do it... How it works... Sending data to a remote API Getting ready How to do it... How it works... Establishing real-time communication with WebSockets Getting ready How to do it... How it works... There's more... Integrating persistent database functionality with Realm Getting ready How to do it... How it works... Masking the application upon network connection loss Getting ready How to do it... How it works... Synchronizing locally persisted data with a remote API Getting ready How to do it... How it works... Logging in with Facebook Getting ready How to do it... How it works... Implementing Redux Introduction Installing Redux and preparing our project Getting started How to do it... How it works... Defining actions Getting ready How to do it... How it works... There's more... Defining reducers Getting ready How to do it... How it works... Setting up the Redux store How to do it... How it works... Communicating with a remote API Getting ready How to do it... How it works... Connecting the store to the view Getting ready How to do it... How it works... Storing offline content using Redux Getting ready How to do it... How it works... App Workflow and Third-Party Plugins How this chapter works React Native development tools Expo React Native CLI CocoaPods Planning your app and choosing your workflow How to do it... Expo CLI setup Using NativeBase for cross-platform UI components Getting ready Using a pure React Native app (React Native CLI) Using an Expo app How to do it... How it works... Using glamorous-native for styling UI components Getting ready How to do it... How it works... Using react-native-spinkit for adding animated loading indicators Getting started How to do it... How it works... There's more... Using react-native-side-menu for adding side navigation menus Getting ready How to do it... How it works... Using react-native-modalbox for adding modals Getting ready How to do it... How it works... Adding Native Functionality - Part I Introduction Exposing custom iOS modules Getting ready How to do it... How it works... There's more... See also Rendering custom iOS view components How to do it... How it works... Exposing custom Android modules Getting ready How to do it... How it works... Rendering custom Android view components How to do it... How it works... Handling the Android back button Getting ready How to do it... How it works... Adding Native Functionality - Part II Introduction Reacting to changes in application state How to do it... How it works... Copying and pasting content Getting ready How to do it... How it works... Receiving push notifications Getting ready How to do it... How it works... Authenticating via touch ID or fingerprint sensor Getting ready How to do it... How it works... Hiding application content when multitasking Getting ready How to do it... How it works... Background processing on iOS Getting ready How to do it... How it works... Background processing on Android Getting ready How to do it... How it works... Playing audio files on iOS Getting ready How to do it... How it works... Playing audio files on Android Getting ready How to do it... How it works... Integration with Native Applications Introduction Combining a React Native app and a Native iOS app Getting ready How to do it... How it works... See also Communicating from an iOS app to React Native Getting ready How to do it... Communicating from React Native to an iOS app container Getting ready How to do it... How it works... Handling being invoked by an external iOS app Getting ready How to do it... How it works... Embedding a React Native app inside a Native Android app Getting ready How to do it... How it works... Communicating from an Android app to React Native Getting ready How to do it... How it works... Communicating from React Native to an Android app container Getting ready How to do it... How it works... Handling being invoked by an external Android app How to do it... How it works... Deploying Your App Introduction Deploying development builds to an iOS device Getting ready How to do it... How it works... Deploying development builds to an Android device Getting ready How to do it... There's more... How it works... Deploying test builds to HockeyApp Getting ready How to do it... How it works... Deploying iOS test builds to TestFlight Getting ready How to do it... How it works... Deploying production builds to the Apple App Store Getting ready How to do it... How it works... Deploying production builds to Google Play Store Getting ready How to do it... How it works... Deploying Over-The-Air updates Getting ready How to do it... How it works... Optimizing React Native app size Getting ready How to do it... How it works... Optimizing the Performance of Your App Introduction Optimizing our JavaScript code Getting ready How to do it... How it works... Optimizing the performance of custom UI components Getting ready How to do it... How it works... See also Keeping animations running at 60 FPS Getting ready How to do it... How it works There's more... Getting the most out of ListView Getting ready How to do it... How it works... See also Boosting the performance of our app How to do it... How it works... Optimizing the performance of native iOS modules Getting ready How to do it... How it works... Optimizing the performance of native Android modules Getting ready How to do it... How it works... Optimizing the performance of native iOS UI components Getting ready How to do it... How it works... Optimizing the performance of native Android UI components Getting ready How to do it... How it works... Other Books You May Enjoy Leave a review - let other readers know what you think **Improve your React Native mobile development skills and transition from web to mobile development with this solution-packed guide** ## Key Features * Learn strategies and techniques to face React Native mobile development challenges head-on * Explore ways to use iOS and Android for React Native development to maximize code reuse and cohesion * Build engaging user experiences with React Native If you are a developer looking to create mobile applications with maximized code reusability and minimized cost, React Native is what you need. With this practical guide, you'll be able to build attractive UIs, tackle common problems in mobile development, and achieve improved performance in mobile environments. This book starts by covering the common techniques for React Native customization and helps you set up your development platforms. Over the course of the book, you'll work through a wide variety of recipes that help you create, style, and animate your apps with built-in React Native and custom third-party components. You'll also develop real-world browser-based authentication, build a fully functional audio player, and integrate Google Maps in your apps. This book will help you explore different strategies for working with data, including leveraging the popular Redux library and optimizing your app's dataflow. You'll also learn how to write native device functionality for new and existing React Native projects and how app deployment works. By the end of this book, you'll be equipped with tips and tricks to write efficient code and have the skills to build full iOS and Android applications using React Native. ## What you will learn * Build UI features and components using React Native * Create advanced animations for UI components * Develop universal apps that run on phones and tablets * Leverage Redux to manage application flow and data * Expose both custom native UI components and application logic to React Native * Employ open source third-party plugins to create React Native apps If you're a JavaScript developer looking for a practical guide for developing feature-rich mobile apps using React Native, this book is for you. Though not necessary, some experience of working with React will help you understand the React Native concepts covered in this book easily. While React Native development can be done on a Windows machine, certain aspects, such as running your apps on iOS devices and in the iOS simulator, or editing native code with Xcode, can only be done with a Mac. 1. Setting Up Your Environment 2. Creating a Simple React Native App 3. Implementing Complex User Interfaces – Section 1 4. Implementing Complex User Interfaces – Section 2 5. Implementing Complex User Interfaces -- Section3 6. Adding Basic Animations to Your App 7. Adding Advanced Animations to Your App 8. Working with Application Logic and Data 9. Implementing Redux 10. App Workflow and Third-Party Plugins 11. Adding Native Functionality - Part I 12. Adding Native Functionality - Part II 13. Integration with Native Applications 14. Deploying Your App 15. Optimizing the Performance of Your App Improve your React Native mobile development skills or transition from web development to mobile development with this practical solution-packed guide Key Features Learn strategies and techniques to face challenges in React Native mobile development head-on Leverage the best ways to use iOS and Android for React Native development while maximizing code reuse and cohesion Build engaging, performant user experiences with React Native Book Description If you are a developer looking to create mobile applications with maximized code reusability and minimized cost, then React Native is here to help. With this practical guide, you will be able to build attractive UIs, tackle common mobile development-related issues, and achieve improved performance in mobile environments. This book starts with common techniques for React Native customization and helps you set up your development platforms. Over the course of the book, a wide variety of step-by-step recipes are designed with both built-in React Native and custom third-party components that you will create, style, and animate. You will create real-world browser-based authentication, build a fully functional audio player, and integrate with Google maps. You will also explore different strategies for working with data, including leveraging the popular Redux library and optimizing your app's dataflow. You will then get an introduction to writing native device functionality for new and already existing native projects. Finally, you will learn how app deployment works, and tips and tricks for writing performant code. By the end of the book, you'll have gained enough knowledge to build full iOS and Android applications using React Native. What you will learn Build UI features and components using React Native Create advanced animations for UI components Develop universal apps that run on phones and tablets Leverage Redux to manage application flow and data Expose both custom native UI components and application logic to React Native Employ open-source third-party plugins to create React Native apps more efficiently Who this book is for If you're a JavaScript developer looking for a practical guide with step-by-step tutorials for developing feature rich mobile apps using React Native, then this book is for you. Though not required, some experience working with React will help you more easily understand the React Native concepts covered in this book. While React Native development can be done on a Windows mach.. React Native is perfect for creating mobile applications with maximized code reusability and cost saving. With this practical solutions guide by your side, you can build amazing UIs, tackle mobile development-related issues, and build high-performance apps for mobile environments