If you want to know about app development, this beginner’s guide is for you to know the available app building options. In case you want to develop a mobile app very quickly for Android or IOS, this is the guide for you. I'll explain common methods of developing a mobile app and how you can benefit with free tools. The important reasons why you should make a mobile app today are: To grow your audience reach To add another revenue channel for your business To improve customer experience and convenience To grow your audience reach To add another revenue channel for your business To improve customer experience and convenience Having just a website is okay too, but you will probably want to grow your business sooner or later. Don't worry, we're not going to produce this code with AI just because AI is trending nor do we want AI slop. The goal of this article is to show you the options you how quickly you can deploy a mobile app using React Expo which can be seen at http://expo.dev http://expo.dev http://expo.dev As a pre-requisite, you should have knowledge of the functionality of websites, installing software on Mac or Windows, and using the terminal command line. This is more of a quickstart guide so it's not code heavy. As a pre-requisite Available Options The first approach is to understand the options available to build mobile apps. The obvious platforms are Android and iOS which have their own unique app ecosystems. The origins of iOS app development started with Objective-C which evolved to Swift and Dart programming languages. For Android, it's Java and Kotlin. Those are known as the native programming languages that get you the best possible performance for mobile device hardware yet are the most intricate to build with. You don't need to use these languages unless you intend to have a full-time Android or iOS development career. You don't need to use these languages unless you intend to have a full-time Android or iOS development career. There are tools and languages available which can convert your website and web app into a mobile app without the hassle of using Java or Swift. The tradeoff is app performance and access to all hardware features if you choose the alternate methods. Those mobile app building methods can be: React Native & React Expo Ionic LynxJS NativeScript Flutter Xamarin React Native & React Expo React Native React Native React Expo React Expo Ionic Ionic Ionic LynxJS LynxJS LynxJS NativeScript NativeScript NativeScript Flutter Flutter Flutter Xamarin Xamarin Xamarin So far I've tried building with Ionic, React Native and LynxJS. I can tell you that recent changes to the React Native architecture have convinced me to follow their path to building an app. They say that the app performance is very near to that of the native coding language. In addition, the React Expo ecosystem for faster testing and deployments for Android+iOS is helps your workflow tremendously. React Native architecture React Native architecture The biggest lie is thinking that React Native is akin to coding in ReactJS. It is not and I don't think the name "React" should even be used in "React Native". I'll go as far as to provide this analogy: "Javascript is to Java" as "ReactJS is to React Native".That's my opinion so don't be offended. There are actually a few shared concepts between React Native such as page routing, import statements, and function logic. "Javascript is to Java" "ReactJS is to React Native" Building Steps In the following process, you'll learn to: Install React Expo SDK 53 Start a project Debug/Test with the Expo emulator Deploy app with EAS Install React Expo SDK 53 Start a project Debug/Test with the Expo emulator Deploy app with EAS What do we want to accomplish? A mobile app but a really basic app for learning purposes. So does it matter if the app loads content from the internet or the phone itself? The early app-generator frameworks were just placing wrappers around GUIs, websites and other elements; essentially websites wrapped by mobile apps. This is what we are going to do giving you exposure to React Expo so you can get a taste of it without dedicating time to build a full-fledged React Native app. Afterwards, I'll show you the commands to test your app locally (real-time previews), on your phone and generate the necessary files to do a real installation of the app. Without React Expo, you would have to install Android Studio which is ~7gb in size and compile or build code to see each change. This is unlike web development which has a smoother workflow. Here are 2 amazing parts that speed up making a mobile app unlike any other: npx create-expo-app myNewApp creates your app boilerplate eas build --platform all builds your app file for deployment to the app store npx create-expo-app myNewApp creates your app boilerplate npx create-expo-app myNewApp eas build --platform all builds your app file for deployment to the app store eas build --platform all Now for the quickstart guide to create a mobile app based of a website. We're going to use the webview method to render our website inside the React Native code. This is in no way the best method to build an app; I am simply demonstrating the conveniences and speed of the process using React Expo. Ensure you have NodeJS installed including npm & npx so you can run the appropriate commands. Download NodeJS here and then install npx with the global flag: npm & npx Download NodeJS here Download NodeJS here npm install -g npx npm install -g npx Now install the boilerplate code provided by Expo: npx create-expo-app myNewApp cd myNewApp npx create-expo-app myNewApp cd myNewApp cd myNewAppand see the project folders and files: cd myNewApp Next, install the webview component by command line. This is how 95% of adding parts to your app looks like npx expo install react-native-webview npx expo install react-native-webview Navigate to yourwebview/app/(tabs) folder and delete explore.tsx and replace the contents of index.tsx. We won't use those. webview/app/(tabs) explore.tsx index.tsx import { WebView } from 'react-native-webview'; export default function App() { return ( <WebView style={{ marginTop: 20 }} source={{ uri: 'https://expo.dev' }} /> ); } import { WebView } from 'react-native-webview'; export default function App() { return ( <WebView style={{ marginTop: 20 }} source={{ uri: 'https://expo.dev' }} /> ); } After you replaced the index.tsx file you can preview your project in the browser and android phone by the command: index.tsx npx expo start npx expo start This screen shows the benefits of running one React Expo command which doubles as your local web server, allows you to open Android Studio, iOS simulator, reload the app, etc. Type "w" and your browser will open with an error. React Native WebView does not support this platform. React Native WebView does not support this platform. To resolve this issue and have it render in your web browser, you may need to add originWhitelist={['*']} to the <Webview> component. You can also import the Platform component to add iframes using: originWhitelist={['*']} <Webview> Platform import { Platform } from 'react-native'; import { Platform } from 'react-native'; In your logic, add the condition to check if the user’s platform is web or android: const srcURI = Platform.OS !== 'web' ? 'https://expo.dev' : '<iframe width="100%" height="50%" src="https://expo.dev" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'; return ( <WebView originWhitelist={['*']} source={{ uri: srcURI }} style={{ marginTop: 20 }} /> ) const srcURI = Platform.OS !== 'web' ? 'https://expo.dev' : '<iframe width="100%" height="50%" src="https://expo.dev" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'; return ( <WebView originWhitelist={['*']} source={{ uri: srcURI }} style={{ marginTop: 20 }} /> ) This occurs because, ironically, the webview feature does not load the website from your code as shown source={{ uri: 'https://expo.dev' }} if you’re not running the code on Android or the simulator. So the next step is to preview the app on your android with "Expo Go" instead of Android Studio. Download Expo Go from the Google Play Store. source={{ uri: 'https://expo.dev' }} Download Expo Go Download Expo Go Then connect WIFI on your phone to the same network as your computer. This is what the Expo Go app looks like. Scan the QR code with your phone, make sure internet is available and your app should render the website https://expo.dev. https://expo.dev https://expo.dev If you're satisfied with your app, then build it and submit it to the app store. Ensure you have an account on Expo, there's a free plan available. Use the command below and Expo.dev will generate the build files for you: eas build --platform all eas build --platform all The build command will generate an apb file for the Google Play Store and a file for the Apple Store. If you want to use the app without publishing to the app store, you have the option to build the “preview” file which is an installable APK file for Android device. Use: eas build --profile preview --platform android eas build --profile preview --platform android Follow for more!
