How to Build a React Native Application on Your Apple IOS Device
What is React Native?
React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.
Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.
In this walkthrough I will introduce you with a few steps on how to build a basic React Native App that you can make it run on your IOS device within minutes!!!
Steps to follow:
1. Setting up your development environment
1.1 make sure you are running node 12 version or higher. Run node -v to check your node version.
1.2 install Expo CLI globaly by running the command npm i -g expo cli
1.3 install also Expo Client on your phone so you can run the app in a physical device.
“Expo CLI is a free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React.”
1.4 choose a code editor (Visual Studio Code is recommended together with React Native Tools, React-Native/React/Redux/snippets, Prettier, and Material Icon Theme extensions)
2. Now that we have set up our development environment let’s create our first expo project!!!
- open a new Terminal window and type expo init “Name of the App” and select blank option appropriate for managing the workflow. Installation is progress and our project is ready to go!!
- our project is ready to be open in VSC. There you will se an assets folder where you will store your images, App.js which is a basic React Native component where you already have the skeleton for building the app.
- View is like a <div>in React
- Text is for displaying text on the screen
- By default React Native is using functional component
- StyleSheet contains all the styles for our container(similar with CSS attributes)
- next we should open the terminal in VSC and type expo start server to server our app and open our Metro bundler in the browser pointing our port number
- next run the app in IOS simulator . Before this you need Xcode app where you can take it from the App Store (recommended to have a mac). Once you install Xcode, run it, and the go to Xcode-Preferences , go to the locations panel and make sure you have installed the latest command line tools. Now we can start an IOS simulator. Close the window, go again to Xcode- OpenDeveloperTool- Simulator. An iPhone simulator will pop out on your screen and you can change the type of the simulator by going to File-Open Device and under IOS you can pick whatever version of iPhone you want. You can also run it in VSC by pressing “i” in the terminal window.
Open Expo app and by pressing Control+C and then Control+D the developer menu will show up, and from there you will see option for reloading the app(in case something goes wrong), Debug Remote JS (to see errors in the browser console), you can go to Home(here you can see all your expo projects you have been working on).
Also once you open Expo app on your real device and you simply shake your device and you can reload the app within seconds. Just make sure your phone is connected at the same wireless network as your computer, otherwise is not gonna work.
For the sake of keeping this project simple, I will provide an example of how I made a Welcome screen and LoginScreen for my app called “MarceLimo”!
3 . Code source for Welcome Screen
First make a new folder called screen and in that folder make a new file called WelcomeScreen.js and place the following code:
(AppButton.js source code is down bellow)
import React from “react”;
import { Image, ImageBackground, StyleSheet, View, Text } from “react-native”;
import AppButton from “../components/AppButton”;
function WelcomeScreen(props) {
return (
<ImageBackground style={styles.background}
source={require(“../assets/Chicago.png”)}><View style={styles.logoContainer}><Image style={styles.logo} source={require(“../assets/limo.png”)} />
<Text style={styles.tagline}> Ride with MarceLimo</Text>
</View>
<View style={styles.buttonsContainer}>
<AppButton title=”Login” />
<AppButton title=”Register” color=”secondary” /></View></ImageBackground>)};const styles = StyleSheet.create({
background: {
flex: 1,
justifyContent: “flex-end”,
alignItems: “center”,
},
buttonsContainer: {
padding: 20,
width: “100%”,
},
logo: {
width: 200,
height: 100,
position: “absolute”,
top: 20,
},logoContainer: {
position: “absolute”,
top: 70,
alignItems: “center”,
},tagline: {
fontSize: 25,
fontWeight: “600”,
paddingVertical: 140,
},
});export default WelcomeScreen;
Then, because we’ll be working with all your components in src/App.js. Replace the code currently in src/App.js with the following:
import React from “react”;
import WelcomeScreen from “./app/screens/WelcomeScreen”;function App() {
return (
<>
<WelcomeScreen />
</>
);export default App;
Save it, reload the app and you should see the same result like this without the LOGIN and REGISTER buttons (depending on the image that you added from assets folder).
4. Code source for making a LoginScreen:
First thing you need to go to the components folder and make another folder called forms and inside that folder make 4 files: AppForm.js, ErrorMessage.js, AppFormField.js and SubmitButton.js .
We will use Formik as a library to make the process of building forms more easily and which will give us validation right out of the box (npm i formik@2.1.4). Formik takes care of all the complexities of building forms in React and React Native. In AppForm.js pass the following code for encapsulating all the details inside a single reusable component.
import React from “react”;
import { Formik } from “formik”;function AppForm({ initialValues, onSubmit, validationSchema, children }) {
//we set the props dynamically
return (<Formik
initialValues={initialValues}
onSubmit={onSubmit}
validationSchema={validationSchema}
>{() => <>{children}</>}</Formik>);
}export default AppForm;
Now let’s show an error message if the filed for password and email have been touched and has an error. For this to happen pass the bottom code in components/forms/ErrorMessage.js. We will then import this component in AppFormFiled and the in LoginScreen. We are just getting organized for the final result.
import React from “react”;
import { StyleSheet } from “react-native”;function ErrorMessage({ error, visible }) {
if (!visible || !error) return null;
return <AppText style={styles.error}>{error}</AppText>;
}const styles = StyleSheet.create({
error: {
color: “red”,
fontSize: 20,
fontFamily: "Avenir",},
});export default ErrorMessage;
In components/forms/AppFormField.js pass the next code:
import React from “react”;
import AppTextInput from “../AppTextInput”;
import ErrorMessage from "./ErrorMessage";import { useFormikContext } from “formik”;
//pass down objectsfunction AppFormField({ name, …otherProps }) {const { handleChange, errors, setFieldTouched, touched } = useFormikContext();// setFieldTouched is for showing the errors only if the filed had been touched
return (<>
<AppTextInput
onChangeText={handleChange(name)}
onBlur={() => setFieldTouched(name)}
{…otherProps}
/>
{<ErrorMessage error={errors[name]} visible={touched[name]} />}
</>
);
}// we will render this component at the end (in LogginScreen) only if the filed has been touched and has a error export default AppFormField;
We also need a separate AppButton.js in the components folder with the following code that we will be using in our SubmitButton reusable component.
import React from “react”;
import { StyleSheet, Text, TouchableOpacity } from “react-native”;
import colors from “../config/colors”;
//you can pass your own colors "red"function AppButton({ title, onPress, color = “primary” }) {
return (<TouchableOpacity
style={[styles.button, { backgroundColor: colors[color] }]}
onPress={onPress}><Text style={styles.text}>{title}</Text></TouchableOpacity>
);
}const styles = StyleSheet.create({
button: {
backgroundColor: “gray”,
borderRadius: 25,
justifyContent: “center”,
alignItems: “center”,
padding: 15,
width: “100%”,
marginVertical: 10,
},
text: {
color: “black”,
fontSize: 18,
textTransform: “uppercase”,
fontWeight: “bold”,
},
});export default AppButton;
Encapsulate the onPress={handleSubmit} button in a reusable component so each time we will need to use we don’t have to write all over again.In components/forms/SubmitButton.js place the next code:
import React from “react”;
import { useFormikContext } from “formik”;
import AppButton from “../AppButton”;function SubmitButton({ title }) {
const { handleSubmit } = useFormikContext();
return <AppButton title={title} onPress={handleSubmit} />;
}export default SubmitButton;
Now we will combine all of the above components for building the LoginScreen.js but before adding the code you will need to install yup (npm i yup) for form validation because formik has build in support for data validation with yup. Also we defined a validation schema outside of our function component , an object that determine all the rules for validating our form. We define the schema separate because we don’t want our object to be redefined each time our function gets re-render.
import React from “react”;
import { StyleSheet, Image } from “react-native”;
import * as Yup from “yup”;
import { AppForm, AppFormField, SubmitButton } from “../components/forms”;
import Screen from “../components/Screen”;const validationSchema = Yup.object().shape({
email: Yup.string().required().email().label(“Email”),
password: Yup.string().required().min(4).label(“Password”),
});function LoginScreen(props) {
return (
<Screen style={styles.container}>
<Image style={styles.logo} source={require(“../assets/limo.png”)} /><AppForm
initialValues={{ email: “”, password: “” }}
onSubmit={(values) => console.log(values)}
validationSchema={validationSchema}
><AppFormField
autoCapitalize=”none”
autoCorrect={false}
keyboardType=”email-address”
name=”email”
icon=”email”
placeholder=”Email”
textContentType=”emailAddress”
/><AppFormField
autoCapitalize=”none”
autoCorrect={false}
icon=”lock”
name=”password”
secureTextEntry
placeholder=”Password”
textContentType=”password”
/><SubmitButton title=”Login” /></AppForm>
</Screen>
);
}const styles = StyleSheet.create({
container: {
padding: 10,
backgroundColor: “black”,
},
logo: {
width: 300,
height: 100,
alignSelf: “center”,
marginTop: 50,
marginBottom: 20,},
});export default LoginScreen;
Last Step:
In App.js replace the <WelcomeScreen/> component from before with the <LoginScreen /> component, save it and after reloading the app the end result should look like this:
Also in the console, once we press the login button we should see our values passed in for email and password.
Special note: Check out soon my blog for my final app MarceLimo with the latest updates of the code to make this a functional app where you can book anytime a limo trip around Chicago Area.
Thank you for reading and good luck programming with React Native!
