The development process of the mobile app has been revolutionized by React Native mostly after some mobile app development such as Ionic and few other web-based developments. It will not be sufficient if you aim in developing an expandable as well as maintainable production application. So get an idea of the different libraries as well as tools that you must consider for your react native app development company in India while setting up the next React Native app.
Things to consider for React Native app set up
React Native makes a high level and declarative API to build native apps. Each UI component communicates with the target platform’s native UI component. You can reuse most codes between platforms as well as different parts that will just be working.
Base framework: Try to follow the official website of React native and you will see that it suggests two ways to set up React Native. One is Expo CLI and other is React Native CLI. You can consider either because:
Make sure you have node.js installed on your computer.
Download the expo app from the apple or google play store. We will use this in a moment to see our application in action!
Download the expo cli using npm install expo-cli --global in your terminal.
Run expo init todo-demo (todo-demo will be the name of our project's directory -- feel free to use any name you please).
running this command will prompt you to make a few choices.
- Under Managed Workflows select blank for your template.
- Give your app a name (can be whatever you like). Once again, I use todo-demo for my app's name.
cd todo-demo and open the contents of the directory in the text editor of your choice!
Expo CLI
The React Native environment set up documentation has two ways to get started building a React Native application.
- Expo CLI
- React Native CLI
The React Native CLI has instructions for the various major operating systems (Mac, Windows, Linux) and how to download and configure iOS and Android simulators for each platform. It’s outside the scope of this article to go into the details of setting up different platform-specific environments that, subsequently, have embedded platform-specific environments.
Project Set-Up
Open up a new terminal and run the following commands:
npm install -g expo-cli
expo init rapidapi-react-nativeYou are then prompted for the type of project to initialize by the expo-cli. Choose the managed workflow, tabs.
After the project installs change directories into the new project. This is typically done with the command cd.
cd rapidapi-react-native/In the apps root directory, run the command npm start and grab your smartphone. Check to make sure that both your smartphone and computer are connected to the same wireless network.
If you are using Android, use the Expo client app to scan the QR-code that appears in the terminal (or the Qr-code in the web browser). If you are using iOS, you can use the camera’s built-in QR-code scanner. Select the camera app and point it at the QR-code.
After scanning, the Expo app opens and the Javascript bundle starts to build. This can take a couple of minutes. When it finishes, our app should appear with the template code. Your smartphone should now show the template code for our project!
File Structure
Next, open up the project with your code editor.
Take a moment to examine the file structure. The project starts at the App.js file.
In App.js, the main app layout is created and managed by the NavigationContainer component that accepts the LinkingConfiguration import.
Notice that the LinkingConfiguration file has the same screen options that are found in the screens folder.
Furthermore, the screens and navigation folders are where we are going to spend the majority of our time.
Change Navigation
Understanding navigation is an important step in our application. Open up BottomTabNavigator.js.
This page controls the navigation of our application, much like a navigation bar (or menu) would control navigation in a web application. It’s an important file!
Our application is going to be a simple coin-flipping app that sends an API request when the user hits a button to fetch a result. Our two tabs will be ‘Flip Coin’ and ‘Resources’.
In BottomTabNavigator.js, change the title option of the home screen from 'Get Started' to 'Flip Coin'.
Our app, running on our smartphone, should reflect this change! One of the tabs should now be Flip Coin. If your app did not update, you may need to reopen the application from the Expo client.
There is a helper function at the bottom of BottomTabNavigator.js named getHeaderTitle that returns the header title for each home screen. Change the header title of 'Home' from 'How to get started' to 'Coin Toss!'. Again, the app should reflect the new change!
Add Coin Flip
Open up HomeScreen.js. This page has a lot of code that we are not going to use. Therefore, remove all the code inside and add the code below to clean things up.
import * as React from "react";
import {
Image,
Animated,
StyleSheet,
Alert,
Text,
View,
Button,
ActivityIndicator,
Easing,
} from "react-native";
import { ScrollView } from "react-native-gesture-handler";
export default function HomeScreen() {
return (
<View style={styles.container}>
<ScrollView style={styles.container}>
<Text
style={
(styles.flipTcontentContainerStyle =
styles.contentContainer)
}
></Text>
<Text style={styles.flipContainer}>Flip On It!</Text>
<Text style={styles.basicText}>
An app to help you achieve even odds in the digital age!
</Text>
</ScrollView>
</View>
);
}
HomeScreen.navigationOptions = {
header: null,
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
contentContainer: {
paddingTop: 30,
},
coinImageContainer: {
alignItems: "center",
marginTop: 10,
marginBottom: 20,
},
welcomeImage: {
width: 150,
height: 124,
resizeMode: "contain",
marginTop: 3,
marginLeft: -10,
},
flipContainer: {
alignItems: "center",
marginHorizontal: 50,
},
flipTitle: {
fontSize: 25,
color: "#000",
marginVertical: 8,
paddingTop: 10,
paddingHorizontal: 10,
lineHeight: 24,
textAlign: "center",
},
basicText: {
fontSize: 15,
color: "rgba(96,100,109, 1)",
lineHeight: 18,
textAlign: "center",
},
flipResultText: {
fontSize: 35,
color: "#FF0000",
textAlign: "center",
fontWeight: "700",
},
buttonContainer: {
backgroundColor: "#1a1aff",
marginTop: 16,
marginBottom: 16,
borderRadius: 5,
paddingVertical: 4,
paddingHorizontal: 5,
},
});Button
Next, let’s add the button that controls when to flip the coin. The React Native button component does not have a style component, so we use a wrapping View component to style the button. Add the button below underneath the app description text component (has the text An app to help you achieve even odds in the digital age!) in HomeScreen.js.
<View style={styles.buttonContainer}>
<Button
title="Flip Coin"
onPress={() => fetchData()}
color="#FFFFFF"
accessibilityLabel="Fetch heads or tails"
/>
</View>
The component calls the fetch data function when it is pressed. However, this function does not exist yet. Add the function to the component above the return statement.
const fetchData = () => {
console.log('flipped')
};Image
At the top of the <ScrollView> components, add the image component:
<Image
source={{ uri: 'https://cdn.pixabay.com/photo/2018/05/17/00/24/quarter-3407493_960_720.png' }}
style={styles.welcomeImage}
/>
Images can be added from the project filesystem, from a URI, or by data (base64). The dimensions of the image need to be specified if using a URI or data encoded. We are specifying image dimensions in the style object with a welcome image style. The image isn’t centered yet because we are not done with it.
Animation
Animations are very different compared to animations with a web application. Animations are achieved with the Animated component and there are a series of methods that can be called to handle events. A deeper dive into animations is beyond this application, but let’s implement one anyway.
At the top of the component, above fetchData, initialize our animation parameter with the line below.
const rotateAnim = React.useRef(newAnimated.Value(0)).current;Next, add two functions underneath the above line that control the value change for the animation parameter.
const startFlip = () => {
Animated.timing(rotateAnim, {
toValue: 100,
easing: Easing.inOut(Easing.exp),
}).start();
};
const resetFlip = () => {
Animated.timing(rotateAnim, {
toValue: 0,
}).reset();
};
Since we cannot animate the image directly, we are going to wrap it in an animated component.
Replace the Image component with the Animated. View the component below.
<Animated.View
style={{
...styles.coinImageContainer,
transform: [
{ scale: 1.1 },
{ rotateX: rotateAnim },
{ perspective: 1000 },
],
}}
>
<Image
source={{
uri:
"https://cdn.pixabay.com/photo/2018/05/17/00/24/quarter-3407493_960_720.png",
}}
style={styles.welcomeImage}
/>
</Animated.View>;
We still have the image tag as a child of the animation component, but this is the necessary set up for animated components.
Tell the startFlip function to fire when we run fetchData by adding a function call to the top the fetchData function.
const fetchData = () => {
startFlip(); // added
console.log("flipped");
};Now, the coin image is centered and flips the first time we hit the Flip Coin button. However, it only works once because we haven’t added the resetFlip function call to fetchData yet. That will be done when we implement the API call.
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative component React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run a new code while retaining your application state. Give it a try - it's a magical experience.ents.
With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.
React Native was just a solution for the only iOS. But now React Native is available for various operating systems such as Android, VR, React Native Web, and many more. Thus make use of it and build apps for your company.
