DEV Community: krisss

How to integrate AWS Amplify Authentication to React Native

krisss — Sat, 29 Aug 2020 18:28:23 +0000

AWS Amplify is a framework that lets you develop a web or mobile application quickly, by accessing the backend cloud services offered by AWS. In this article, we are going to learn how to use AWS Amplify in React Native by building a fully functional login and registration flow.

This tutorial is going to take a look at one of the most important features of a mobile application – the authentication. You know the scenario. You need to store some amount of user information (credentials) for them to get back and re-use the application rather than creating a new account.

Please make sure to have an AWS account before you begin this tutorial. If you don’t, please sign up for one.

What is AWS Amplify?

Amazon Web Service is a technology that provides cloud services. Since its launch in 2017, Amplify has come a long way in terms of providing a set of services in the form of the toolchain. It is also open source.

To build authentication into a React Native and Expo application with Amplify you first need to install the AWS Amplify CLI. Open a terminal window and execute the command below to install the CLI. We are going to install it as a global module.

npm install -g @aws-amplify/cli

Using Amplify’s CLI tool you are going to find several really helpful CLI plugins and services that you can enable with one click when integrating with a framework like React Native. Services such as GraphQL and REST APIs, authentication UI as well as backend support, storage, hosting, and many more are made available by Amplify’s CLI.

Getting Started with React Native and AWS Amplify

Start by creating a new application project. We are going to Expo CLI to generate the project. Open a terminal window and create a new React Native app.

npx expo-cli init expo-amplify-example

This command creates a new directory called expo-amplify-example. You can name it whatever you want. Inside this directory, you are going to find a complete React Native + Expo SDK project generated. Please note that, on running the above command, you’ll be asked by the CLI which template to use. This tutorial uses a blank template from the managed workflow. If you are familiar with any other template, feel free to choose that.

Expo CLI is a command-line utility to create React Native apps with no build configuration. The reason we’re relying on it is that, first, it’s an awesome tool for such use cases.

Create a New AWS IAM User

Once signed in the AWS account, run the below command from a terminal window. This command asks you to sign in to the AWS Console.

amplify configure

This opens up the AWS console dashboard. Go back to the terminal and press the enter key to continue. This leads you through a bunch of questions in order to configure a user account to use Amplify with the React Native application.

Choose a region : us-east-2
Specify the username of the new IAM user : expo-amplify

On entering the username, press enter and the AWS console opens again in a browser window for you to add a user.

In the above screen, make sure that Programmatic access is checked. It allows the new user to have access to create resources in the form of different APIs and tools, providing you with an access key and secret key. Then click on the button Next: Permissions. In the screen below, notice that a policy has been selected by default. Let the default settings as applied. This provides you full access to AWS services by enabling the AWS user (the current user you are creating) to be an administrator.

Then, click on Next: Tags. No modifications are required for the current use case.

Then, click on Next: Review. Again, no modifications are required. Click on the Create user button and you are directed to a new page where you find the Access Key and Secret Key. Go to your terminal window, press the enter key and when prompted enter the Access Key and the Secret Key sequentially. It is going to ask for a profile name. You can enter the project name or the username here.

Pressing enter for the last time creates a new AWS user.

Integrating AWS Amplify in React Native

To initialize AWS Amplify with the React Native app, run the following command that in return prompts you for some more questions. Go back to the terminal window and run the initialization command as below:

amplify init

After running this command, you are prompted with configuration questions. For the current demo, we are choosing all the default options. For your reference, you can find the options listed next to the question as shown below:

After the Amplify SDK initialization process is complete, notice there are some new file changes inside the project directory. A new directory called amplify/ that stores any local or cloud changes, is added to the root directory of the React Native project. A new file called aws-exports.js appears at the root that you do not have commit at a public Github repository. The amplify init command takes care of this. It is going to update the .gitignore file in the React Native project.

To integrate Amplify SDK with the Expo or React Native app, install the following dependencies. Go back to the terminal window and execute the command:

yarn add aws-amplify aws-amplify-react-native

The package aws-amplify allows you to make requests to the auth and API services provided by AWS. The other package aws-amplify-react-native is framework-specific and contains ready-to-use UI components.

After these dependencies are installed, open the App.js file and add the following import statements.

// after other import statementsimport Amplify from 'aws-amplify';import config from './aws-exports';Amplify.configure(config);

That’s it to integrate Amplify with the Expo app.

Adding Amplify Authentication Resource

Amplify uses Amazon Cognito for authentication. Amazon Cognito is a fully-featured user directory that handles user registration, login, and account recovery. Amplify interfaces with Cognito User Pools to store user information, including social providers like Facebook, Google, and so on.

To add a user authentication with Amplify, start by running the command from a terminal window.

amplify add auth

After running the command, you are prompted with the following set of questions:

Do you want to use the default authentication and security configuration? Default configurationHow do you want users to be able to sign in? EmailDo you want to configure advanced settings? No, I am done.

The first option is to choose the default authentication and security configuration. Let’s leave to default. The second option is to use an auth provider. In our case, let’s selected Email. You can also add a social provider like Facebook or Google Sign-in.

Now run the following command to publish all the local changes to AWS in order to create a user pool.

amplify push

You get the following screen after you execute the above command. shows the details of the current working environment which is dev and displays the status of the resource currently using which is Auth.

Execution of command may take some time to push the changes to enable and create the user pool. Initializing the user authentication setup using Amazon Cognito is complete.

Building the Registration and Login UI

Amplify comes with a High Order Component called withAuthenticator that is used to wrap the root component of the React Native app. Import it in the App.js file and then use it to wrap the App function component.

// ... after other import statementsimport { withAuthenticator } from 'aws-amplify-react-native';// ... contents of App componentfunction App() { return ( <View style={styles.container}> <Text> ![💙](https://s.w.org/images/core/emoji/11/72x72/1f499.png) + ![💛](https://s.w.org/images/core/emoji/11/72x72/1f49b.png) = React Native + Amplify </Text> <StatusBar style="auto" /> </View> );}// wrap the App component as shown belowexport default withAuthenticator(App);

The withAuthenticator component renders the App component after a successful user sign-in, and it prevents non-sign-in users to interact with your app. It automatically detects the authentication state and updates the UI.

Now, go back to the terminal window and start the Expo development server using the yarn start command.

Once the app is loaded, you are going to get the following initial screen with some UI components already provided by the HOC used to wrap the App component.

Since there are no users, if you try to sign in, you won’t get access.

AWS Amplify is so awesome in this manner that they even provide basic and useful details like when you attempt to sign in with a wrong user name, or a user name that does not exist, an error message is displayed.

Click on the Sign-Up button below the Sign In button to go the registration screen and register a new user.

Make sure to enter a valid email in the fields Username and Email. It sends a verification code for the user to create a new account.

Once the new user account is created, you are going to be re-directed back to the Sign In screen. To sign in, enter the same credentials you registered a new user with.

On successful sign-in, you are going to see the main application.

Adding a Logout Functionality with AWS Amplify in React Native

To use the default UI component for signing out the user from the React Native app, you have to pass a second argument to the withAuthenticator High Order component when it wraps the App component.

Modify the App.js file:

export default withAuthenticator(App, true);

This displays a sign-out button as shown below.

The aws-amplify package also comes with a component called Auth that can be used to create custom sign out buttons and use the same functionality as provided by the High Order Component.

Start by importing the Auth object in the App.js file. Then, inside the App function, create a new asynchronous handler method called signOut which uses the Auth.signOut() method.

The custom method then is used as the value of the onPress prop on a Button component from react-native.

// other import statementsimport { withAuthenticator } from 'aws-amplify-react-native';function App() { async function signOut() { try { await Auth.signOut(); } catch (error) { console.log('Error signing out: ', error); } } return ( <View style={styles.container}> <Text> ![💙](https://s.w.org/images/core/emoji/11/72x72/1f499.png) + ![💛](https://s.w.org/images/core/emoji/11/72x72/1f49b.png) = React Native + Amplify </Text> <Button title="Sign Out" color="tomato" onPress={signOut} /> <StatusBar style="auto" /> </View> );}// make sure to remove the second argumentexport default withAuthenticator(App);

Here is the output you are going to get after this step:

On pressing the sign out button you are directed back to the login screen.

Creating a Custom Authentication Flow with React Navigation Library

This section onwards let’s learn how to create a custom authentication flow using React Navigation and create custom screens to sign-in, sign-up, confirm verification code, and sign out a user.

Start by adding the react-navigation library in the React Native app. Go back to the terminal window and install the following dependencies.

expo install @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Once the dependencies are installed, create the following directory structure. The screens/ directory contains all the different screen components. The components/ contains two re-usable components that are going to be used to build form screens.

├──src/│ └──screens/│ └── SignIn.js│ └── SignUp.js│ └── ConfirmSignUp.js│ └── Home.js| └──components/│ └── AppButton.js│ └── AppTextInput.js

Let’s start by building the re-usable components first. Add the following code snippet in AppButton.js file:

import React from 'react';import { StyleSheet, Text, TouchableOpacity } from 'react-native';export default function AppButton({ title, onPress }) { return ( <TouchableOpacity style={styles.button} onPress={onPress}> <Text style={styles.buttonText}>{title}</Text> </TouchableOpacity> );}const styles = StyleSheet.create({ button: { marginVertical: 10, borderRadius: 25, justifyContent: 'center', alignItems: 'center', padding: 15, width: '80%', backgroundColor: 'tomato' }, buttonText: { color: 'white', fontSize: 18, fontWeight: '600', textTransform: 'uppercase' }});

The button component consists of a TouchableOpacity and a Text component that receives the label of the button and onPress handler method as props from the screen component it is going to be used in. Similarly, in the file AppTextInput.js add the code snippet that is going to display a TextInput field along with an icon on the left of the input field. To display the icon, let’s use the package @expo-vector-icons.

import React from 'react';import { View, StyleSheet, TextInput } from 'react-native';import { MaterialCommunityIcons } from '@expo/vector-icons';export default function AppTextInput({ leftIcon, ...otherProps }) { return ( <View style={styles.container}> {leftIcon && ( <MaterialCommunityIcons name={leftIcon} size={20} color="#6e6869" style={styles.icon} /> )} <TextInput style={styles.input} placeholderTextColor="#6e6869" {...otherProps} /> </View> );}const styles = StyleSheet.create({ container: { backgroundColor: '#f9f9f9', borderRadius: 25, flexDirection: 'row', padding: 15, marginVertical: 10 }, icon: { marginRight: 10 }, input: { width: '80%', fontSize: 18, color: '#101010' }});

In the next section, let’s build the first screen to allow a user to sign-in.

Creating a Custom Sign In Screen

TheSignIn.jsfile is going to contain two input fields and two buttons to let the user enter their credentials to log into the app. The screen is going to be similar in terms of working as you might have seen in an earlier default Sign-In screen that comes with Amplify’s High Order ComponentwithAuthenticator.

TheAuthmodule fromaws-amplifycontains all the methods to use with custom navigation flow. For example, in the code snippet below you are going to findAuth.signIn(username, password);to allow a user log into the app. The two arguments are going to be the user’s credentials coming from the sign-in form. To keep track of the values forusernameandpasswordfields, let’s use React HookuseState.

Ignore theupdateAuthStateprop for now. It becomes more clear on is it being used and for what when the configuration of the navigation flow is complete.

import React, { useState } from 'react';import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';import { Auth } from 'aws-amplify';import { SafeAreaView } from 'react-native-safe-area-context';import AppTextInput from '../components/AppTextInput';import AppButton from '../components/AppButton';export default function SignIn({ navigation, updateAuthState }) { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); async function signIn() { try { await Auth.signIn(username, password); console.log(' ![✅](https://s.w.org/images/core/emoji/11/72x72/2705.png) Success'); updateAuthState('loggedIn'); } catch (error) { console.log(' ![❌](https://s.w.org/images/core/emoji/11/72x72/274c.png) Error signing in...', error); } } return ( <SafeAreaView style={styles.safeAreaContainer}> <View style={styles.container}> <Text style={styles.title}>Sign in to your account</Text> <AppTextInput value={username} onChangeText={text => setUsername(text)} leftIcon="account" placeholder="Enter username" autoCapitalize="none" keyboardType="email-address" textContentType="emailAddress" /> <AppTextInput value={password} onChangeText={text => setPassword(text)} leftIcon="lock" placeholder="Enter password" autoCapitalize="none" autoCorrect={false} secureTextEntry textContentType="password" /> <AppButton title="Login" onPress={signIn} /> <View style={styles.footerButtonContainer}> <TouchableOpacity onPress={() => navigation.navigate('SignUp')}> <Text style={styles.forgotPasswordButtonText}> Don't have an account? Sign Up </Text> </TouchableOpacity> </View> </View> </SafeAreaView> );}

The second button is going to navigate the user to the Sign-Up screen using thenavigation.navigate()function fromreact-navigationlibrary.

Add the followingstylesobject:

const styles = StyleSheet.create({ safeAreaContainer: { flex: 1, backgroundColor: 'white' }, container: { flex: 1, alignItems: 'center' }, title: { fontSize: 20, color: '#202020', fontWeight: '500', marginVertical: 15 }, footerButtonContainer: { marginVertical: 15, justifyContent: 'center', alignItems: 'center' }, forgotPasswordButtonText: { color: 'tomato', fontSize: 18, fontWeight: '600' }});

Making a Custom Sign Up Screen

Creating a custom sign-up screen, you can control what user data or credentials you require for them to create a new account with your app. The custom sign-up screen code snippet is going to have three fields:username,password, andemail.

TheAuth.signUp({ username, password, attributes: { email } });is the method that successfully allows the user to create a new account. Theattributesobject can have other fields such asphone_numberor other custom fields. The values passed through this object are always optional. With React HookuseStateyou can keep track of as many attributes as your app require.

Do note that the Amazon Cognito does not dynamically create custom attributes. In order to use a custom attribute, it has to be created in the user pool. More information on how to do this process with Amplify CLI is in theAmplify’s documentation here.

Open the fileSignUp.jsand add the following code snippet:

import React, { useState } from 'react';import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';import { Auth } from 'aws-amplify';import { SafeAreaView } from 'react-native-safe-area-context';import AppTextInput from '../components/AppTextInput';import AppButton from '../components/AppButton';export default function SignUp({ navigation }) { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [email, setEmail] = useState(''); async function signUp() { try { await Auth.signUp({ username, password, attributes: { email } }); console.log(' ![✅](https://s.w.org/images/core/emoji/11/72x72/2705.png) Sign-up Confirmed'); navigation.navigate('ConfirmSignUp'); } catch (error) { console.log(' ![❌](https://s.w.org/images/core/emoji/11/72x72/274c.png) Error signing up...', error); } } return ( <SafeAreaView style={styles.safeAreaContainer}> <View style={styles.container}> <Text style={styles.title}>Create a new account</Text> <AppTextInput value={username} onChangeText={text => setUsername(text)} leftIcon="account" placeholder="Enter username" autoCapitalize="none" keyboardType="email-address" textContentType="emailAddress" /> <AppTextInput value={password} onChangeText={text => setPassword(text)} leftIcon="lock" placeholder="Enter password" autoCapitalize="none" autoCorrect={false} secureTextEntry textContentType="password" /> <AppTextInput value={email} onChangeText={text => setEmail(text)} leftIcon="email" placeholder="Enter email" autoCapitalize="none" keyboardType="email-address" textContentType="emailAddress" /> <AppButton title="Sign Up" onPress={signUp} /> <View style={styles.footerButtonContainer}> <TouchableOpacity onPress={() => navigation.navigate('SignIn')}> <Text style={styles.forgotPasswordButtonText}> Already have an account? Sign In </Text> </TouchableOpacity> </View> </View> </SafeAreaView> );}

The above component is going to have following styles:

const styles = StyleSheet.create({ safeAreaContainer: { flex: 1, backgroundColor: 'white' }, container: { flex: 1, alignItems: 'center' }, title: { fontSize: 20, color: '#202020', fontWeight: '500', marginVertical: 15 }, footerButtonContainer: { marginVertical: 15, justifyContent: 'center', alignItems: 'center' }, forgotPasswordButtonText: { color: 'tomato', fontSize: 18, fontWeight: '600' }});

Building a Custom Verification Code Screen

Once the user creates a new account, they are directed to the Confirm Sign Up screen which is going to ask for the verification code. TheAuth.confirmSignUp()method is used in this case. It takes two arguments:usernameandauthCode. TheauthCodeis what gets sent to the user’s email as the verification code.

Add the following code snippet to the fileConfirmSignUp.js.

import React, { useState } from 'react';import { View, Text, StyleSheet } from 'react-native';import { Auth } from 'aws-amplify';import { SafeAreaView } from 'react-native-safe-area-context';import AppTextInput from '../components/AppTextInput';import AppButton from '../components/AppButton';export default function ConfirmSignUp({ navigation }) { const [username, setUsername] = useState(''); const [authCode, setAuthCode] = useState(''); async function confirmSignUp() { try { await Auth.confirmSignUp(username, authCode); console.log(' ![✅](https://s.w.org/images/core/emoji/11/72x72/2705.png) Code confirmed'); navigation.navigate('SignIn'); } catch (error) { console.log( ' ![❌](https://s.w.org/images/core/emoji/11/72x72/274c.png) Verification code does not match. Please enter a valid verification code.', error.code ); } } return ( <SafeAreaView style={styles.safeAreaContainer}> <View style={styles.container}> <Text style={styles.title}>Confirm Sign Up</Text> <AppTextInput value={username} onChangeText={text => setUsername(text)} leftIcon="account" placeholder="Enter username" autoCapitalize="none" keyboardType="email-address" textContentType="emailAddress" /> <AppTextInput value={authCode} onChangeText={text => setAuthCode(text)} leftIcon="numeric" placeholder="Enter verification code" keyboardType="numeric" /> <AppButton title="Confirm Sign Up" onPress={confirmSignUp} /> </View> </SafeAreaView> );}

In this screen, you can add more business logic to handle scenarios such as when the verification code entered by the user does not match the code sent to the user’s email. Once the verification code matches, the user is re-directed to the sign-in screen. The component is going to have the following styles:

const styles = StyleSheet.create({ safeAreaContainer: { flex: 1, backgroundColor: 'white' }, container: { flex: 1, alignItems: 'center' }, title: { fontSize: 20, color: '#202020', fontWeight: '500', marginVertical: 15 }});

Adding a Home Screen with Sign Out Button

The last screen in the current navigation flow is going to be a home screen with some text and a sign out button. The handler method behind the sign out button is the same as you have seen in the earlier sections of this tutorial. Add the following code snippet to Home.js file:

import React from 'react';import { View, Text, StyleSheet, Button } from 'react-native';import { Auth } from 'aws-amplify';export default function Home({ updateAuthState }) { async function signOut() { try { await Auth.signOut(); updateAuthState('loggedOut'); } catch (error) { console.log('Error signing out: ', error); } } return ( <View style={styles.container}> <Text> ![💙](https://s.w.org/images/core/emoji/11/72x72/1f499.png) + ![💛](https://s.w.org/images/core/emoji/11/72x72/1f49b.png)</Text> <Button title="Sign Out" color="tomato" onPress={signOut} /> </View> );}const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', marginTop: 20 }});

Checking User’s Logged In State

The App.js file is going to contain all the custom navigation flow as well default Amplify configuration. Open the file and start by adding the following import statements:

import React, { useState, useEffect } from 'react';import { ActivityIndicator, View } from 'react-native';import Amplify, { Auth } from 'aws-amplify';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import config from './aws-exports';import SignIn from './src/screens/SignIn';import SignUp from './src/screens/SignUp';import ConfirmSignUp from './src/screens/ConfirmSignUp';import Home from './src/screens/Home';Amplify.configure(config);

The navigation flow is going to be divided into two stacks. The first stack is called AuthenticationNavigator and has all screens related when the user is not logged in.

The second stack navigator is called AppNavigator that has only one screen: the Home screen. This screen is only available if a user successfully logs in.

const AuthenticationStack = createStackNavigator();const AppStack = createStackNavigator();const AuthenticationNavigator = props => { return ( <AuthenticationStack.Navigator headerMode="none"> <AuthenticationStack.Screen name="SignIn"> {screenProps => ( <SignIn {...screenProps} updateAuthState={props.updateAuthState} /> )} </AuthenticationStack.Screen> <AuthenticationStack.Screen name="SignUp" component={SignUp} /> <AuthenticationStack.Screen name="ConfirmSignUp" component={ConfirmSignUp} /> </AuthenticationStack.Navigator> );};const AppNavigator = props => { return ( <AppStack.Navigator> <AppStack.Screen name="Home"> {screenProps => ( <Home {...screenProps} updateAuthState={props.updateAuthState} /> )} </AppStack.Screen> </AppStack.Navigator> );};

Let’s create a function component called Initializing which is going to be responsible to display a loading indicator when checking the state whether the user is logged in or not.

const Initializing = () => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <ActivityIndicator size="large" color="tomato" /> </View> );};

To check the state whether the user is logged in or not, in the App component defines a state variable called isUserLoggedIn. It has a default value of initializing which means that when the state of user’s auth is being checked, the loading indicator is shown.

function App() { const [isUserLoggedIn, setUserLoggedIn] = useState('initializing'); // ...}

Amplify’s Auth object provides a method called currentAuthenticatedUser() to check whether the user is logged or not in real-time. Add an asynchronous handler method called checkAuthState which is going to process this task. Based on the result from the method, set the user’s logged-in state by updating the value of the state variable using setUserLoggedIn(). On success, update the value to loggedIn. If there is an error or the user is not logged in, update the value to loggedOut.

The useEffect Hook is going to take care of executing the asynchronous handler method on the initial render.

Add another handler method called updateAuthState that is going to be passed as props to two screens: Home and SignIn. Passing the prop is helpful since the state of auth changes at these two particular screens. Once the user signs in, update the value of setUserLoggedIn to loggedIn using the prop and vice versa when the user signs out.

function App() { // ... useEffect(() => { checkAuthState(); }, []); async function checkAuthState() { try { await Auth.currentAuthenticatedUser(); console.log(' ![✅](https://s.w.org/images/core/emoji/11/72x72/2705.png) User is signed in'); setUserLoggedIn('loggedIn'); } catch (err) { console.log(' ![❌](https://s.w.org/images/core/emoji/11/72x72/274c.png) User is not signed in'); setUserLoggedIn('loggedOut'); } } function updateAuthState(isUserLoggedIn) { setUserLoggedIn(isUserLoggedIn); } // ...}

Then, return and wrap all the different conditions based on the value of isUserLoggedIn state variable inside NavigationContainer from the react-navigation library.

function App() { { // ... return ( <NavigationContainer> {isUserLoggedIn === 'initializing' && <Initializing />} {isUserLoggedIn === 'loggedIn' && ( <AppNavigator updateAuthState={updateAuthState} /> )} {isUserLoggedIn === 'loggedOut' && ( <AuthenticationNavigator updateAuthState={updateAuthState} /> )} </NavigationContainer> ); }}export default App;

Running the AWS Amplify React Native Mobile App

To start the Expo development server, execute the command yarn start. Go back to the simulator device or any other device you are using, and you are going to be welcome by the following SignIn screen.

To create a new user, go to the SignUp screen. On successful sign-up, it is going to ask to verify the auth code.

Once the code is verified, you are re-directed to the SignIn screen. On a successful log-in, you are going to see the Home screen.

Summary

It has been a long post but we wanted to cover all the aspects to get started with setting up and configuring user authentication with AWS Amplify, Expo, and React Native apps.

As you can see the AWS Amplify framework, which bridges access to the AWS cloud services is an extremely powerful library, allowing us to implement critically secure features such as login, registration and logout with only a few lines of code, and in no time.

At Instamobile, we are building ready to use React Native apps, backed by various backends, such as AWS Amplify or Firebase, in order to help developers make their own mobile apps much more quickly.

The post Building a React Native App with AWS Amplify | Authentication appeared first on instamobile.

A Quick Guide For React Native Debugger

krisss — Thu, 30 Jul 2020 18:24:30 +0000

React Native Debugger is a powerful tool that helps developers debug React Native applications more quickly. It provides a suite of impressive features, such as UI inspector, redux inspector, breakpoints and networking inspector. In this article, we are going to learn how to install and use the React Native Debugger, which will boost your development productivity by an order of magnitude.

In layman’s terms, a Debugger is a tool used for debugging. If you are a developer of any programming background, you must have already come across a debugger in your life. React Native Debugger is a standalone debugger tool built using the Electron framework. You can easily integrate this debugger tool along with the Chrome Dev tool. This debugger tool is based on the remote debugger which is included in React Native out of the box. However, the React Native debugger packs a lot more features than the remote one.

Installing React Native Debugger

The installation process is quite easy. We can simply download the latest installation file from the release page. For macOS, we can use Homebrew Cask to install. We can run the following command in the terminal:

$ brew update && brew cask install react-native-debugger

After installation, simply open the React Native Debugger.app file in your Applications folder (or use Spotlight search to locate it).

Using The React Native Debugger

After a successful installation, we can simply open the React Native Debugger launch file. Hence, we will see the re-connection status on the title bar of the debugger app window. The debugging process will be executed on port 8081 as shown in the screenshot below:

Now when we run the React Native App on debug mode, we no longer need to open the browser. To have your React Native app enter debug mode, simply shake your device and choose “Debug” in the menu that pops up. If you are on a simulator, simply press Command + Shift + Z to open the menu.

Once the app is in the debug mode, with the React Native Debugger already opened, you will notice that the app connects to the React Native Debugger instead of the Chrome Dev Tools. All the console logs and debugging options will appear in the debugger app as shown in the screenshot below:

Now, as we have learned about the installation and use cases, we are ready to use this Debugger app.

Chrome Dev Tools, React Dev Tools, Redux Dev tools

As you can notice, all these above important debugging extensions are under a single window. One benefit is that the app window size does not need to be full screen. Hence, we can use the debugger adjacently with the emulator as shown in the screenshot below:

The Network Inspector

When developing an app that needs to connect to a server, in general, we may not know what is going on behind the scenes. For example, when we are sending a request to the server, it may be difficult to track an error if it occurs. Developers usually debug this by printing or alerting error messages, but this is extremely time-consuming (despite the fact that most people do that), since it takes a lot of iterations to understand the entire state properly.

So, with the help of the React Native Debugger, we can easily monitor every inbound and outbound traffic request between app and server.

We can monitor React components, Redux store, also network activity all under a single window.
We can modify CORS on the fly.
We can modify the request header configurations such as names, origin, and user-agent. It enables us to control everything in a network request.

AsyncStorage Management

We can also debug AsyncStorage configurations using the React Native Debugger. We can simply log it to the console using the line in the code snippet below:

console.log(showAsyncStorageContentInDev())

Once you add that line to your project, you will get the following result in the React Native Debugger console window:

Debugging Redux State & Actions

As mentioned in the official React Native Debugger documentation, the tool already has an amazingly powerful built-in Redux Dev Tool. However, redux devtools will not work properly until we explicitly activate redux devtools in our app. In order to use redux devtools in the react-native-debugger, we need to activate redux in our app by adding some configuration lines to our App.js file or to our redux main function as highlighted in the code snippet below:

const composeEnhancers = window.\_\_REDUX\_DEVTOOLS\_EXTENSION\_COMPOSE\_\_ || compose;const store = createStore(reducers, /\* preloadedState, \*/ composeEnhancers(middlewares));

Now if we reload our RN Debugger tool and run some actions, we will get the following result in our debugger console:

As you can see, the React Native Debugger exposes the whole Redux state, so there’s no need for you to add breakpoints or console logs to understand how the data flows within the redux ecosystem. One amazing feature is that you can actually go back in time directly from the debugger, to reverse the Redux actions and re-run them again. Another huge feature is that you can visualize the precise diff between two state transitions, which is extremely helpful for apps with complex Redux states.

UI Inspector in React Native Debugger

The React Native Debugger tool also offers a powerful UI Inspector. We can use it to inspect app UI layouts that will help us tremendously in understanding the app’s UI structure. We can fix the UI elements style just by inspecting the layout.

This is by far the most efficient way to inspect the UI hierarchy in React Native apps and to debug layout issues.

Breakpoints in React Native Debugger

React Native Debugger also enables us to stop the execution task on a certain point. This will enable developers to understand app behavior or view some data states at any point in the app’s lifecycle. You can learn more details on adding and using breakpoints in our Debugging React Native app with Breakpoints article.

Debugging Expo Apps

If you opted to use Expo CLI instead of React Native CLI for your app development, the good news is that the React Native Debugger works great with Expo too.

Usually, the Expo Debugger runs on port 19001. To switch to React Native Debugger for support, you need to run the following command:

open "rndebugger://set-debugger-loc?host=localhost&port=19001"

Conclusion

In this article post, we discovered the React Native Debugger tool, its installation process, how it works, use-cases, and core features. Surely, it will make the life of any React Native developer easier, more productive, and more efficient. Your apps will also be more performant and will contain fewer bugs.

We highly recommend using the React Native Debugger instead of the Chrome Dev Tools, since it contains a set of core features that will boost your development speed tremendously.

Next Steps

Now that you have learned about the React Native Debugger tool, here are some other topics you can look into next:

Firebase — Push notifications | Firebase storage
How To in React Native — Getting stared | WebView | Gradient| Camera| Adding GIF| Google Maps | Redux | Debugging | Hooks| Dark mode | Deep-link | GraphQL | AsyncStorage | Offline | Chart | Walkthrough | Geolocation | Tinder swipe | App icon | REST API
Payments — Apple Pay | Stripe
Authentication — Google Login | Facebook login | Phone Auth |
Best Resource – App idea | Podcasts | Newsletters | App templates|Tools

If you need a base to start your next React Native app, you can save months of development by leveraging one of our React Native themes. Cheers!

The post Getting Started With React Native Debugger appeared first on instamobile.

How to use Redux in React Native

krisss — Tue, 07 Jul 2020 08:40:18 +0000

Redux is a popular React and React Native state management library, meant to be used in complex React and React Native apps where sharing state between multi-level components can get extremely difficult to manage. In this article we are going to learn how to use Redux with React Hooks by building a real React Native app.

This is how the final app will look like

React Hooks provide us the ability to use functional components in React or React Native apps. Their ability to provide support to manage a component’s state and handle side-effects offers an alternative to class components.

In this tutorial, let us take a look at some of the hooks provided by the react-redux library that provides a way to avoid writing boilerplate code when using the connect() High Order Component (if you’re not familiar with connect(), don’t worry, that doesn’t matter that much anymore).

1. Create a New React Native App

To shorten the amount of time spent on configuring a new React Native app, I am going to use expo-cli with a blank template to generate a new app. You can also follow this complete tutorial using react-native-cli to generate a new app.

expo init projectname

After the project has been generated, please navigate inside the directory and install the following dependencies.

yarn add redux react-redux @react-navigation/native @react-navigation/stack

I am going to use Stack Navigator from the react-navigation library for two different screens in this demo app.

If you are using expo-cli, run the following command to install required dependencies for the navigator to work.

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

If you are using a project generated with react-native-cli it is recommended to follow the instructions from here to install the required dependencies and any other configuration with native OS platforms.

2. Create Two Mock Screens

In this section, let us create two screens that the app is going to use to display a list of items and allow the user to add to each item. Create a new directory called src/screens and then create two new files:

ListScreen.js
ModalScreen.js

Each of these screen files is going to have some random data to display until the stack navigator is set up.

Here is the code snippet for ListScreen.js:

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

function ListScreen() {
  return (
    <View style={styles.container}>
      <Text>List Screen</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default ListScreen

Here is the code snippet for ModalScreen.js:

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

function ModalScreen() {
  return (
    <View style={styles.container}>
      <Text>Modal Screen</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default ModalScreen

3. Set Up a Stack Navigator

A Stack navigator allows the app to transit between different or multiple screens and manages the navigation history. Create a new file called AppNavigator.js inside the src/navigation directory. This file is going to contain all the configurations required to set up a Stack Navigator.

With the recent release of react-navigation version 5, the way to configure a stack navigator has changed. The major highlight of these new changes is the component-based configuration. Some of the other highlights, which the team of maintainers enumerated in a blog post, are that the navigation patterns are now more component-based, common use cases can now be handled with pre-defined Hooks, the new architecture allowing you to configure and update a screen from within the component itself. There were a few other changes as well.

import * as React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import ListScreen from '../screens/ListScreen'
import ModalScreen from '../screens/ModalScreen'

The NavigationContainer is a component provided by the react-navigation library that manages the navigation tree. It contains the navigation state and wraps all the navigator’s structure.

The createStackNavigator is a function that implements a stack navigation pattern. This function returns two React components: Screen and Navigator, that is going to allow to configure each component screen.

const Stack = createStackNavigator()

function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='List' component={ListScreen} />
        <Stack.Screen name='Modal' component={ModalScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default MainStackNavigator

Open App.js file, import the MainStackNavigator in the root of the app as shown below:

import React from 'react'
import MainStackNavigator from './src/navigation/AppNavigator'

export default function App() {
  return <MainStackNavigator />
}

Now, go the terminal window and execute the command expo start. In the simulator or the real device you are running the Expo client, you are going to notice similar results as shown below:

The first screen in the Stack Navigator is ListScreen which is shown as above.

4. Create an Overlay Modal with Transparent Background

The modal can be easily configured with a stack navigator with an overlay of transparent background on the screen it is displayed. In the current app, since the ListScreen is going to be the first screen as well as going to display a list of items, the ModalScreen is going to be a dialog that appears by clicking a button from the ListScreen. This dialog, when opened, adds a transparent layer on the screen behind it. The previous screen will be visible underneath this dialog.

This can be done by configuring screenOptions on a Stack Navigator. The react-navigation library provides a way to enable the overlay with a property called cardOverlayEnabled.

Modify AppNavigator.js file as following:

function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        mode='modal'
        headerMode='none'
        screenOptions={{
          cardStyle: { backgroundColor: 'transparent' },
          cardOverlayEnabled: true,
          cardStyleInterpolator: ({ current: { progress } }) => ({
            cardStyle: {
              opacity: progress.interpolate({
                inputRange: [0, 0.5, 0.9, 1],
                outputRange: [0, 0.25, 0.7, 1]
              })
            },
            overlayStyle: {
              opacity: progress.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 0.5],
                extrapolate: 'clamp'
              })
            }
          })
        }}>
        <Stack.Screen name='List' component={ListScreen} />
        <Stack.Screen name='Modal' component={ModalScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

Nothing will happen as of now. You still have to configure the styles of both the screens and add a way for the modal dialog to open from the ListScreen.

5. Navigate to the Modal Screen

To navigate to the modal screen, let’s add a floating action button with an icon to the ListScreen.js screen component.

This button is going to be touchable and on a single touch is going to navigate to the ModalScreen. The navigation is going to be handled by the navigation prop that can be passed as an argument to the functional component ListScreen. This is only possible because the ListScreen is part of the Stack navigator.

Any screen in a React Native app that utilizes a react-navigation library is a route or a part of a navigation pattern that has access to navigation prop.

Modify the ListScreen.js file as below:

import React from 'react'
import {
  StyleSheet,
  StatusBar,
  Text,
  View,
  TouchableOpacity
} from 'react-native'
import { Ionicons } from '@expo/vector-icons'

function ListScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <View style={styles.fabContainer}>
        <TouchableOpacity
          onPress={() => navigation.navigate('Modal')}
          style={styles.fabButton}>
          <Ionicons name='ios-add' color='#fff' size={70} />
        </TouchableOpacity>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue'
  },
  fabContainer: {
    justifyContent: 'flex-end',
    flexDirection: 'row',
    position: 'absolute',
    right: 10,
    bottom: 20
  },
  fabButton: {
    backgroundColor: 'blue',
    borderRadius: 35,
    width: 70,
    height: 70,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default ListScreen

Go back to the simulator device and you are going to notice the changes. The first thing to notice is the action button floating at the bottom right corner.

On pressing this button is going to open a full modal screen.

6. Add a Custom Modal with Transparent Background

In this section, let’s change the behavior of how the modal appears on the ListScreen right now and how we want it to be. As an overlay, we also want it to take the only 1/3rd of the current screen.

This modal is going to have an input field in the future to let the user add items to the list. However, for now, it is going to display a text and a close button.

The close button is going to dismiss the modal when the user wants to go back to the List screen without taking any other action. The close button is going to be placed using position: absolute property and is going to use navigation.goBack() pre-defined method to go back to the List screen.

Here is the complete code for the modal screen at this point. Open ModalScreen.js and modify it.

import React from 'react'
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native'
import { Ionicons } from '@expo/vector-icons'

function ModalScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <View style={styles.innerContainer}>
        <View style={styles.closeButtonContainer}>
          <TouchableOpacity
            style={styles.closeButton}
            onPress={() => navigation.goBack()}>
            <Ionicons name='ios-close' color='#101010' size={40} />
          </TouchableOpacity>
        </View>
        <View style={styles.modalContainer}>
          <Text style={{ color: '#444', fontSize: 20 }}>
            What do you want to do?
          </Text>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  innerContainer: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    justifyContent: 'flex-end',
    flexDirection: 'row',
    height: '30%',
    width: '100%',
    position: 'absolute',
    bottom: 0,
    right: 0,
    backgroundColor: '#fff'
  },
  closeButtonContainer: {
    position: 'absolute',
    alignItems: 'flex-end',
    right: 10
  },
  closeButton: {
    backgroundColor: '#d3d3d3',
    borderRadius: 20,
    width: 40,
    height: 40,
    top: 10,
    alignItems: 'center',
    justifyContent: 'center'
  },
  modalContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    margin: 60,
    top: 10,
    left: 50
  }
})

export default ModalScreen

Here is the output you are going to get in the device after this step:

7. Adding a Text Input in Custom Modal Screen

In this section, let’s add a text input component from the react-native core. This is going to allow the user to enter the name of the item they want to add to the list. For now, since we haven’t configured the Redux to manage the app state, let us use the hook useState to manage the component state locally.

Open ModalScreen.js and import TextInput from react-native core.

import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
  TextInput
} from 'react-native'

Next, inside the View that has the style of modalContainer add the following TextInput component as well as a touchable submit button. This touchable button is going to navigate back to the list screen when the user has entered a value in the input field.

<View style={styles.modalContainer}>
  <Text style={{ color: '#444', fontSize: 20 }}>What do you want to do?</Text>
  <TextInput
    style={{
      height: 50,
      width: 200,
      padding: 5,
      borderColor: 'gray',
      borderBottomWidth: 1
    }}
    numberOfLines={1}
    onChangeText={value => setValue(value)}
    value={value}
    clearButtonMode='while-editing'
  />
  <TouchableOpacity
    style={{
      marginTop: 10,
      backgroundColor: 'blue',
      width: 50,
      height: 50,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 5
    }}
    onPress={() => navigation.navigate('List')}>
    <Ionicons name='ios-arrow-dropright-circle' size={40} color='#fff' />
  </TouchableOpacity>
</View

8. Add a Custom Header to the List Screen

Create a new file called Header.js inside the directory src/components. This functional component is going to display the header title in the List screen.

Add the following code snippet to the file you have just created:

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

function Header(props) {
  const { title } = props
  return (
    <View style={styles.container}>
      <Text style={styles.text}>{title}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'blue',
    height: 125,
    paddingTop: 20
  },
  text: {
    color: '#fff',
    fontSize: 28,
    fontWeight: '500'
  }
})

export default Header

Next, go to the ListScreen.js and import this functional component below the other statements.

// after other import statements
import Header from '../components/Header'

Then, add the component to render before the floating button.

function ListScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Header title={'List'} />
      {/* rest of the code remains same */}
    </View>
  )
}

In the simulator, you are going to get a header displayed as follows:

The Status bar doesn’t look good with the header’s background, right?

9. Change the StatusBar Appearance

To change the StatusBar appearance, let us import it from the react-native core API.

import {
  StyleSheet,
  StatusBar,
  Text,
  View,
  TouchableOpacity
} from 'react-native'

Next, using React Fragment short hand with angle brackets, modify the return statement of ListScreen component as below:

function ListScreen({ navigation }) {
  return (
    <>
      <StatusBar barStyle='light-content' />
      <View style={styles.container}>
        <Header title={'List'} />
        <View style={styles.fabContainer}>
          <TouchableOpacity
            onPress={() => navigation.navigate('Modal')}
            style={styles.fabButton}>
            <Ionicons name='ios-add' color='#fff' size={70} />
          </TouchableOpacity>
        </View>
      </View>
    </>
  )
}

You will now notice that the Status bar has a white appearance.

10. Add a List view

In this section, let’s implement the main view that is going to display a list of items. In ListScreen.js, add the following functional component called ListView.

function ListView() {
  return (
    <View
      style={{
        backgroundColor: 'white',
        flex: 1,
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        paddingHorizontal: 20,
        paddingVertical: 20
      }}>
      <Text>Here goes list items</Text>
    </View>
  )
}

Then, modify the ListScreen to display it below the Header.

<View style={styles.container}>
  <Header title={'List'} />
  <ListView />
  {/* rest of the code remains same */}
</View>

Go to the device you are running the app, and you are going to notice a major difference in its appearance.

11. Creating a Root Reducer

Create a new directory called src/redux/ and inside it, a new file called reducer.js. This file is going to have the definition of action types, action creators and the only reducer we are going to create in this app. This reducer is going to be called rootReducer.

When using Redux to manage the state of the whole application, the state itself is represented by one JavaScript object. Think of this object as read-only (immutable), since you cannot make changes to this state or the object (which is represented in the form of a tree) directly. It requires an action to do so.

Actions are similar to events in Redux. They can be triggered in the button press, timers or network requests.

Start by defining an action type as below.

export const ADD_ITEM = 'ADD_ITEM'

Then define the action creator called addItem that is going to take an item from the user’s input and add it to the list. This is the action creator function that we are going to trigger later.

export const addItem = item => ({
  type: ADD_ITEM,
  payload: item
})

Define an initial state which is going to have an empty array called itemList. Whenever an action is triggered, the state of the application changes. The handling of the application’s state is done by the reducers.

This initial state is going to be passed as a parameter to the rootReducer. Calling the create action is going to invoke the logic defined for the same action type in the reducer.

Using a reducer, you either want to initiate the current app state or update it, without modifying the whole state on each action trigger. The spread operator returned in the action type ADD_ITEM indicates that.

To update the state, in our case, to add an item object to the itemList array, let us use the contact() that is going to return a new array whenever an item is added to the list. This also satisfies the redux philosophy of not mutating the state directly.

const initialState = {
  itemList: []
}

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return {
        ...state,
        itemList: state.itemList.concat({
          id: Math.random(),
          name: action.payload
        })
      }

    default:
      return state
  }
}

export default rootReducer

12. Configuring a Store

Create a new file src/redux/store.js. A store is an object that brings the actions and reducers together. This file is going to implement that.

The store provides and holds the state at the application level instead of individual components. Add the following code snippet to it:

import { createStore } from 'redux'
import rootReducer from './reducer'

const store = createStore(rootReducer)

export default store

Now, to connect this store to the app, open App.js file and import the store from this file as well as the High Order Component Provider from react-redux npm package. This HOC helps you to pass the store down to the rest of the components of the current app.

import React from 'react'
import { Provider as StateProvider } from 'react-redux'
import store from './src/redux/store'
import MainStackNavigator from './src/navigation/AppNavigator'

export default function App() {
  return (
    <StateProvider store={store}>
      <MainStackNavigator />
    </StateProvider>
  )
}

13. The useSelector Hook

To access state when managing it with Redux, the useSelector hook is provided in the library. It is similar to mapStateToProps argument that is passed inside the connect(). It allows you to extract data from the Redux store state using a selector function.

The major difference between the hook and the argument (the older way) is that the hook may return any value as a result, not just an object.

Inside ListScreen.js add the following import statement.

import { useSelector } from 'react-redux'

Then, fetch the listItems array using the hook useSelector inside the ListView component. Also, modify its return statement by displaying a message if the list is empty or not.

function ListView() {
  const listItems = useSelector(state => state.itemList)

  return (
    <View
      style={{
        backgroundColor: 'white',
        flex: 1,
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        paddingHorizontal: 20,
        paddingVertical: 20
      }}>
      {listItems.length !== 0 ? (
        <Text>Contains List items</Text>
      ) : (
        <Text style={{ fontSize: 30 }}>You list is empty :'(</Text>
      )}
    </View>
  )
}

Here is the output you are going to get:

14. Adding Items to the List by Dispatching an Action Creator

The useDispatch() hook completely refers to the dispatch function from the Redux store. This hook is used only when there is a need to dispatch an action. In the ModalScreen.js to add an item based on the value of TextInput, the state has to be updated. This can be done by triggering the action creator method called addItem defined when creating actions inside redux/reducer.js file.

Start by importing the following statements:

import { useDispatch } from 'react-redux'
import { addItem } from '../redux/reducer'

Next, inside the ModalScreen component, create a helper method called onSaveNote which when triggered on submission of the text input, is going to trigger the action creator as well as take the user back to the List screen.

const [value, setValue] = useState('')

const dispatch = useDispatch()

const onSaveNote = value => {
  dispatch(addItem(value))
  navigation.navigate('List')
}

Lastly, add this helper method as the value of onPress on the submission button.

<TouchableOpacity
  style={{
    marginTop: 10,
    backgroundColor: 'blue',
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 5
  }}
  onPress={() => onSaveNote(value)}>
  <Ionicons name='ios-arrow-dropright-circle' size={40} color='#fff' />
</TouchableOpacity>

15. Adding FlatList to Display the Items in the List

To display a list of items on List screen, open the file ListScreen.js and import the FlatList from react-native.

import {
  StyleSheet,
  StatusBar,
  Text,
  View,
  TouchableOpacity,
  FlatList
} from 'react-native'

Then, modify the ListView render function as below:

{
  listItems.length !== 0 ? (
    <FlatList
      data={listItems}
      keyExtractor={item => item.id.toString()}
      renderItem={({ item }) => (
        <View style={styles.listItemContainer}>
          <View style={styles.listItemMetaContainer}>
            <Text style={styles.itemTitle} numberOfLines={1}>
              {item.name}
            </Text>
          </View>
        </View>
      )}
    />
  ) : (
    <Text style={{ fontSize: 30 }}>You list is empty :'(</Text>
  )
}

16. Updating the Header

In this section, using the current app’s state, let us display the number of items in the list to be shown in the header as well. This can be done by using useSelector hook from react-redux.

Modify the file components/Header.js as the following:

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { useSelector } from 'react-redux'

function Header(props) {
  const { title } = props
  const listItems = useSelector(state => state.itemList)

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subTitle}>Left: {listItems.length}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'blue',
    height: 125,
    paddingTop: 20
  },
  title: {
    color: '#fff',
    fontSize: 28,
    fontWeight: '500'
  },
  subTitle: {
    paddingTop: 5,
    fontSize: 18,
    color: '#fff'
  }
})

export default Header

Here is the updated header bar when there is one item on the list.

17. Removing an Item

Since we have gone through the process of understanding how redux hooks work with React Native apps, try adding a remove item button that is going to delete an item from the list as shown below.

If you need any help, you can come back to the source code below.

Here is the updated redux/reducer file that has action type REMOVE_ITEM.

export const ADD_ITEM = 'ADD_ITEM'
export const REMOVE_ITEM = 'REMOVE_ITEM'

export const addItem = item => ({
  type: ADD_ITEM,
  payload: item
})

export const removeItem = id => ({
  type: REMOVE_ITEM,
  payload: id
})

const initialState = {
  itemList: []
}

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return {
        ...state,
        itemList: state.itemList.concat({
          id: Math.random(),
          name: action.payload
        })
      }
    case REMOVE_ITEM:
      return {
        ...state,
        itemList: state.itemList.filter(item => item.id !== action.payload)
      }

    default:
      return state
  }
}

export default rootReducer

Also, here is the updated ListScreen.js where you add the button to remove items with corresponding styles.

To trigger an action, you will have to make use of useDispatch() hook.

import React from 'react'
import {
  StyleSheet,
  StatusBar,
  Text,
  View,
  TouchableOpacity,
  FlatList
} from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import { useSelector, useDispatch } from 'react-redux'
import { removeItem } from '../redux/reducer'

import Header from '../components/Header'

function ListView() {
  const listItems = useSelector(state => state.itemList)
  console.log({ listItems })

  const dispatch = useDispatch()

  return (
    <View
      style={{
        backgroundColor: 'white',
        flex: 1,
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        paddingHorizontal: 20,
        paddingVertical: 20
      }}>
      {listItems.length !== 0 ? (
        <FlatList
          data={listItems}
          keyExtractor={item => item.id.toString()}
          renderItem={({ item }) => (
            <View style={styles.listItemContainer}>
              <Text style={styles.itemTitle} numberOfLines={1}>
                {item.name}
              </Text>
              <TouchableOpacity
                onPress={() => dispatch(removeItem(item.id))}
                style={styles.button}>
                <Ionicons name='ios-trash' color='#fff' size={20} />
              </TouchableOpacity>
            </View>
          )}
        />
      ) : (
        <Text style={{ fontSize: 30 }}>You list is empty :'(</Text>
      )}
    </View>
  )
}

function ListScreen({ navigation }) {
  return (
    <>
      <StatusBar barStyle='light-content' />
      <View style={styles.container}>
        <Header title={'List'} />
        <ListView />
        <View style={styles.fabContainer}>
          <TouchableOpacity
            onPress={() => navigation.navigate('Modal')}
            style={styles.fabButton}>
            <Ionicons name='ios-add' color='#fff' size={70} />
          </TouchableOpacity>
        </View>
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue'
  },
  fabContainer: {
    justifyContent: 'flex-end',
    flexDirection: 'row',
    position: 'absolute',
    right: 10,
    bottom: 20
  },
  fabButton: {
    backgroundColor: 'blue',
    borderRadius: 35,
    width: 70,
    height: 70,

    alignItems: 'center',
    justifyContent: 'center'
  },
  listItemContainer: {
    flex: 1,
    flexDirection: 'row',
    paddingTop: 10,
    paddingBottom: 5,
    paddingRight: 5,
    justifyContent: 'space-between',
    width: '100%',
    borderBottomWidth: 0.25
  },
  itemTitle: {
    fontSize: 22,
    fontWeight: '400'
  },
  button: {
    borderRadius: 8,
    backgroundColor: '#ff333390',
    padding: 5
  }
})

export default ListScreen

Here is the final output of the demo app:

Conclusion

The addition to hooks in react-redux such as useSelector and useDispatch reduces the need to write plentiful boilerplate code and also provides the advantage to use functional components.

For advanced usage of Hooks with Redux, you can check out the official documentation here.

Hopefully you now have a grasp of how to work with Redux in React Native apps using Hooks, as well as a better understanding of the basics of react navigation. If you enjoyed this React Native tutorial, please share it with your friends. Happy Coding!

Next Steps

Now that you have learned about using Redux in React Native, here are some other topics you can look into

Firebase — Push notifications | Firebase storage
How To in React Native — WebView | Gradient| Camera| Adding GIF| Google Maps | Redux | Debugging | Hooks| Dark mode | Deep-link | GraphQL | AsyncStorage | Offline |Chart | Walkthrough | Geolocation | Tinder swipe | App icon | REST API
Payments — Apple Pay | Stripe
Authentication — Google Login| Facebook login | Phone Auth |
Best Resource – App idea | Podcast | Newsletter| App template

If you need a base to start your next React Native app, you can make your next awesome app using many React Native template.

‌

How to Add Google Maps to React Native

krisss — Tue, 07 Jul 2020 02:17:08 +0000

You might have seen Google Maps in almost all the apps these days. Some mobile apps are displaying their outlet locations, track users (like Uber), showing nearby places, etc. So, it shows the importance of maps support in mobile apps. Today, we are going to integrate Google Maps in a React Native app step by step, using the popular React Native Maps package.

At Instamobile, we are using this exact implementation in many of our React Native templates, such as the Store Locator app templates.

As a developer or a company, it is very important to manage their app’s codebase. So, these days in mobile app development there are platforms like React Native you can apps for both iOS and Android. I’m not going to dig in deep in about react and react native stuff in the article, instead, we will focus more google maps integration on both platform apps, iOS and Android.

There are two ways to integrate Google Maps into a React Native mobile app:

1. c** reate-react-native-app cli**

2. r** eact-native-cli**

There are a few differences between these two that I would like to clear.

react-native-cli is developer friendly and gives the flexibility to use native components. But with this, you have to configure every small bit in the application. Apart from this, if you want to test your application then you have to use the real device or you have to use simulators for both iOS and Android. You might generate a lot of bugs while installing various rpm packages and configuring them.

create-react-native-app, you can expo SDK built-in modules. This is a hassle-free environment for developing apps faster. You don’t need any device (not even simulators) to run and test the apps. You only need to develop the code and test using the expo app built for Android and iOS. You just need the QR Code generated by your application when you run using npm start.

It is very easy to integrate such modules in native code bases like Java or swift. I would say one thing after reading the whole tutorial you can easily integrate google maps with React Native as well. You’ll also learn how to build a brand new React Native app from scratch. So, without further ado let’s get started.

We’re assuming that you have at least basic or intermediate knowledge of JavaScript, React & React Native. Let’s begin with _ create-react-native-app _.

What are the things you need to integrate React Native Maps?

1. Text Editor or IDE (We are using Visual Studio Code)

2. Node JS (As always needed to install packages & other stuff)

3. create-react-native-app, (A CLI command line tool to install React Native on to your system.)

4. Expo, (More About Expo)

How to install React Native on to your local system? Let’s install the React Native on to our system. Open up your command line in VS Code using Ctrl + ~ in Windows or go to the terminal on the menu and click on _ Add a new terminal _.

Run the command:

> npm install -g create-react-native-app

npm: (Node Package Manager, which manage all your package from installing to deleting).
install: Install is used to give a command to NPM to install a package. You can also use -I instead of this.
-g: It denotes or says NPM to install create-react-native-app globally in the system. This means it will available after this command to all of your systems and you can create a react native app in any directory.
create-react-native-app: A tool which is made by react native developers to make starting a new mobile app in React Native hassle-free. It generates all the bolierplate code needed to get started right away with your app development process.

So, let’s move on to the next step.

It’s now time to dive into the meat of the project. We are going to build an app which integrates google maps. What would be the name of our app? Let’s name it as “location-finder”.

Run this command in your Terminal:

create-react-native-app locationfinder

You will see a lot of dependencies installation and it will take some time to install on your system as shown in the picture.

When you hit enter in the command line. It will ask you what do you want: a blank template or tabbed template. Hit enter again to choose app blank template. After that, it will ask you for the app name and also showing slug to you. Don’t worry type the name you want.

You can go and have a cup of coffee until the install finishes. It usually takes a few minutes.

So now finally, your app is created. If you want to run and test the installation then, in command line type:

> cd locationfinder (to get inside the app folder)

> npm start

You can test using with the E** xpo app by scanning the QR Code generated by the command. Otherwise, you can use the simulator for iOS and the emulator for Android. To use them press “i” for iOS else press “a” **for Android. You can use any third-party emulator like Gennymotion.

This is a Map implementation project. The dependencies for this project while we are making this project are:

1. “expo”: “³².0.0”,

2. “react”: “16.5.0”,

3. “react-native”: “³².0.0”

4. “react-native-maps”: “0.22.0”

By default, Expo uses react-native-maps by Airbnb. Currently, Expo SDK is using version 0.22.0. Because this is built-in with create-react-native-app and expo.

You can see a similar folder structure in the VS Code as shown below:

As I said earlier, we are going to use Expo SDK and react-native-maps is one of the built-in features to integrate Google Maps in Expo SDK. You do not need to install and configure react-native-maps for Android and iOS separately that you need to do in react-native-cli.

Now that you’ve installed all the required dependencies, you can import MapView in your React Native app. You need to make the following changes into the _ app.js _ file:

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
export default
class App extends React.Component {
  render() {
    return (
      <MapView
         style={{ flex: 1 }}
         provider={PROVIDER_GOOGLE}
         showsUserLocation
         initialRegion={{
         latitude: 37.78825,
         longitude: -122.4324,
         latitudeDelta: 0.0922,
         longitudeDelta: 0.0421}}
      />
    );
  }
}

Great milestone! Now Google Maps is integrated into your mobile application. There are several methods that you can use to make it more intuitive. Features that you can add in your map like you can ask the user for giving access to their current location. You can track user location as well. You can also add markers and labels on places as you see in Google Maps. You can also customize that map as much as you want.

Latitude and longitude are used to tell the position of the object. l_atitudeDelta_ and longitudeDelta are used to provide the zoom options in the map.

I have tried it on Android and it works fine. You can try on an iPhone device and let me know in the comments section. Feel free to post a screenshot of your app to show off.

Step 1: Installing react-native-cli and creating App

Let’s start making the same app from scratch using react-native-cli. You need to follow the same way to install react-native-cli. In the terminal, run:

> npm install -g react-native-cli

It takes a little bit of time. After that, run another command to create the app:

> react-native init locationfinder

This will also take some time while installing. After installation, get into the folder using > cd locationfinder. You can run this app only on Android or iOS simulator using these commands for iOS, react-native run-ios and for android _ react-native run-android _.

Step 2: Install react-native-maps package

react-native-maps created by Airbnb. It is open source and anybody can use it for accessing Google Maps. To install it in the app:

> locationfinder/npm install –save react-native-maps

After the installation is complete. You need to link this package with your current app so that you can use methods of the package in your application.

So, let’s configure map files for Android and iOS both.

We are describing the steps in details, but I would suggest you check the official documentation as well. You just need to make little changes in some the files, but the rest of them are handled by react-native-cli automatically.

You have to get inside the android folder . There, you have to change in AndroidManifest.xml file. In this file, you have to configure the Google Maps API key. You can find this file inside android/app/src/main/AndroidManifest.xml.

<application>
  <meta-data
     android:name=”com.google.android.geo.API_KEY”
     android:value=”Your Google maps API Key Here”/>
</application>

Ensure that the meta-data of the app is under the application tag. Replace the android:value with the API key value.

To find the Google API keys, y ou have to go to Google’s map SDK for Android as shown in the picture. You can also see the instructions there. After that, go to Google’s cloud platform as shown in the picture:

Click on Maps SDK for Android then get into it. You will see the next screen where you can find credentials. Click on that and generate the API key which is similar to this one as shown below.

Change in MainApplication.java which you can also find in _ android _ folder. Folder tree is shown in the picture. There you have to import _ react-native-maps _ package:

_ import com.airbnb.android.react.maps.MapsPackage; _

One more thing you need to change in this file. Add new MapsPackage() in function as shown below

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
     new MapsPackage()
   );
}

Finally, everything is done for Android. Now you have to rebuild the app. To do this use the command react-native run-android.

We need to add a _ Podfile _ in iOS to implement Cocoapods. To setup the PodFile , you need to go inside the _ iOS _ folder, create a file named Podfile and paste the code provided below. There are a few things that you need to change in this _ PodFile _.

First of all, uncomment # platform: ios, ‘9.0’ by removing it. Next, you need to change target ‘_YOUR_PROJECT_TARGET_’ do to your app name like — _ target ‘locationfinder’ do _. Then after that, uncomment all the _ react-native-maps _ dependencies.

Once all of these changes are done, save the file. Then, go to command line and get inside the _ ios _ folder using _ cd ios _. In this folder, you have to run one more command pod install. This will install all the necessary files needed.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target '_YOUR_PROJECT_TARGET_' do
rn_path = '../node_modules/react-native'
rn_maps_path = '../node_modules/react-native-maps'
# See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies

pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
pod 'React', path: rn_path, subspecs: [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
]
# React Native third party dependencies podspecs
pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
# If you are using React Native <0.54, you will get the following error:
# "The name of the given podspec `GLog` doesn't match the expected one `glog`"
# Use the following line instead:
#pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"
pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
# react-native-maps dependencies
pod 'react-native-maps', path: rn_maps_path
# pod 'react-native-google-maps', path: rn_maps_path # Uncomment this line if you want to support GoogleMaps on iOS
# pod 'GoogleMaps' # Uncomment this line if you want to support GoogleMaps on iOS
# pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS
end
post_install do |installer|
    installer.pods_project.targets.each do |target|
       if target.name == 'react-native-google-maps'
           target.build_configurations.each do |config|
           config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
        end
    end
        if target.name == "React"
          target.remove_from_project
        end
     end
end

Now, we have to enable the Google Maps for iOS. To do it we have to integrate our API key inside AppDelegate.m file.

Now we are ready to implement the maps in iOS. So, let’s do it. Just paste the code below and rebuild your app.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
export default class App extends React.Component {
render() {
  return (
    <MapView
      style={{ flex: 1 }}
      provider={PROVIDER_GOOGLE}
      showsUserLocation
      initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
      }}
    />
  );
 }
}

In this react native tutorial, we learned how to add React Native Maps to a mobile app. I have tried to explain almost all the details on how to implement Google Maps in react native apps. Hope you like the article and it helps with your app development. If you get stuck somewhere please comment below and don’t hesitate to share this article. It might help someone else.

5+ Best Resources to Learn React Native Development

krisss — Thu, 02 Jul 2020 05:01:52 +0000

‌

React Native is a framework for building cross-platform mobile apps for iOS and Android. There are lots of materials with which to learn React Native and in this article I will show the best 10 resources to learn React Native development. For each learning material I will talk about the entry behavior, time to complete, content and difficulty level.

1. The official documentation

You can find the official documentation here.

Entry level: Knowledge of Javascript

Difficulty: Difficult(for a noob), Moderate(for an intermediate)

Content: The official documentation is the base of all other learning materials and is a great place to get started and read about react native in general.

2. React Native Tutorial for Beginners – Build a React Native App [2020]

‌

Mosh is a great tutor who has a special way of instilling knowledge to his listeners/viewers. I think his voice does the magic

Entry barrier: You should have knowledge of React and Javascript

Difficulty: Easy

Content: This crash course takes you from setting up react-native on your machine to running the app on an emulator. The tutorial deep dives into the major components in react native and how the flexbox works in react native.

Tutorial Duration: 2 hours 6 minutes

3. Multiplatform Mobile App Development with React Native

You can find this course on Coursera.

Difficulty: Medium

Content: This course assumes that you have a knowledge of React. The course introduces you to React Native, basic UI elements, state management and persistence. The course also goes on to explore how to use Expo and React Native. You also get to learn how to use SDK APIs.

At the end of the course you can confidently build a complete mobile app.

Duration: 43 hours of material to complete.

4. How to publish Android apps on Google play – Step by Step guide

‌

Difficulty: Medium

Content: Deployment is very vital yet one of the least discussed aspects in React Native. This is a very short and simple video resource to help developers to upload their applications on Google Play Store. The video also offers some advice on how to get your apps ready. This is high up there in the list recommended React Native learning resources.

Duration: 18:30

5. Configuring iOS App | Publishing a React Native App to the App Store

‌

AqkVuWceCJ0

‌

Difficulty: Medium

Content: In the appended Youtube video, the tutor takes you through configuring your apps for the iOS App Store and uploading them. The video is short, sharp and straight to the point.

Duration: 4:22 minutes

6. Getting Started with Redux in React Native

‌

Difficulty: Medium

Content: In my humble opinion, state management is the most important thing in React Native and requires extreme mastery. The video goes over state management using the most popular state management library in the React Native world

Duration: 32:19 mins

7. React Native in Action: Developing iOS and Android apps with JavaScript by NADER DABIT

Difficulty: Medium

Entry behavior: For an optimal understanding of this book you must have prior knowledge of at Javascript. Familiarity with the use of command line and npm will come in handy. If you know your way around Xcode and Android Studio is also helpful but not required.

Content: This book explores the building blocks of react native. This book is one of the best to learn React Native within that it touches everything you need to know about React Native.

The book explores the nature of React Native highlighting its strong points and weak spots respectively and then introduces the reader to React ad the way lifecycles work in React.

Styling, Animation, and Navigation are discussed in detail in this amazing React Native literature.

The book wraps up by guiding the reader to build a real-world app

React Native Crash Course 2020

‌

As most of you know, Traversy Media is one of the best tutorial channels and you bet his tutorial on React Native released 4 months ago as of the time of this writing is going to be one of the best materials out there to learn React Native.

Entry Behaviour: Prior knowledge of Javascript is required.

Content: The crash course assumes you have no experience dealing with React Native. Traversy Media introduces you to React Native and guides you to build a basic mobile application.

Duration: 54 minutes.

Conclusion

React Native is an easy mobile development framework to learn and master in a pretty short time and the prior listed tutorials are the very best to set yourself up to be and expert React Native developer in no time. If you know other amazing resources to learn React Native development, please let us know in the comments.

The post 6+ Best Resources to Learn React Native Development appeared first on instamobile.

Next Steps

Now that you have learned about many resources for learning basic React Native, here are some other topics you can look into

Firebase — Push notifications | Firebase storage
How To in React Native — WebView | Gradient| Camera| Adding GIF| Google Maps | Redux | Debugging | Hooks| Dark mode | Deep-link | GraphQL | AsyncStorage | Offline |Chart | Walkthrough | Geolocation | Tinder swipe | App icon | REST API
Payments — Apple Pay | Stripe
Authentication — Google Login| Facebook login | Phone Auth |
Best Resource - App idea | Podcast | Newsletter| App template

Or If you need a base to start your next React Native app quickly, you can make your next awesome app using many React Native template.

Most Cool 25 Flutter App Templates, Examples | 2020

krisss — Wed, 24 Jun 2020 19:17:25 +0000

Flutter has been booming in its usage worldwide from the past few years. With many popular mobile app development technologies out there, Flutter has not disappointed in leaving its mark in the mobile application development world. In this article, we’ve curated the best Flutter app templates available on the market as of 2020.

Flutter can be the framework model for every app out there. This app development framework has taken the world by storm with its simplicity, widgets, and pixel-by-pixel based mobile UI development. There is no doubt of the popularity this mobile development framework received over the last few years. Simply, the apps developed using Flutter are beautiful and feature-rich.

Why Flutter …?

Flutter makes the app development simpler by applying a Widgets mechanism. Basically, we can create the application interface by simply stacking the Widget tree with different Widgets. The flow of Widgets across the code determines the flow of UI elements on the mobile screen. It makes use of the Dart programming language at its core.

Moreover, the learning curve of Flutter and Dart programming language is not that steep. It easy in comparison with other application development techs. It delivers a cross-platform application development functionality. This means the same coding implementation can be applied to create both Android and iOS-based applications. It offers many libraries out of the box. Not to mention that a plethora of libraries are out there which a Flutter developer can use to easily implement wonderful mobile app features.

Many companies opting for Flutter development nowadays, there are no fewer Flutter templates out there which you can easily use to develop your own Flutter app or initiate a startup. The templates can act as a learning material for any Flutter developer especially the beginners. With this in mind, we present you the 25 best open-source as well as premium Flutter app templates out there for you to explore.

1. Best Flutter App UI Templates

Here is a GitHub repository offering the fully functional Flutter templates. The templates are open-source. Hence, everyone can use it freely. The templates include the design implementation for hotel booking, Fitness, design course, and custom drawer. These templates can help any Flutter developer especially the beginners to learn and get started with their own custom app. You can choose between the hotel booking UI or Fitness app UI. The features like card list view with beautiful UI and designs are intuitive and easy to use. One looking for booking apps, fitness apps or course app in Flutter environment should definitely try these templates out.

Main features : Drawer, Calendar view, Booking UI, Gauge chart, etc.
Platforms : iOS and Android
Price: Open Source
Download link : Best Flutter UI Templates

2. Flutter UI Challenges

The Flutter UI Challenges repo available in Github aims to deliver the Flutter UI design challenges. It offers the list of various app UIs designed using Flutter. It provides 20+ UI designs of various Flutter apps which can be highly beneficial for any Flutter developer. Not only the UI templates but it also offers the speed coding video tutorials on Youtube for each UI design. Hence, this will surely prove helpful for those who are willing to learn Flutter.

Moreover, there is an effort to replicate some of the popular e-commerce, listing, game, payment gateway applications as well. You can choose a number of different coding practices that may suit your application needs. The dependencies used are pretty minimal so the UI design templates will be easier to set up as well.

Main features : Animation Examples UI, Ecommerce UIs, Login/signup UIs, Settings UIs, Dashboard UIs, Motorbike App UIs, Profile UIs, Invitation App UIs, etc.
Demo : Google Play Store and App store
Price: Open Source
Platforms : iOS and Android

3. Flutter Catalog

Flutter Catalog aims to create a learning environment of different UI Widgets which are important while building apps using Flutter. This app template displays the Flutter Widgets or component with the side-by-side tab view of the coding implementation that has been used to build that particular Widget/component.

It one tab view you can get the design of the component whereas in the other you can check the code that has been used to implement it. So, this app seems to be very fruitful for learning the UI Widgets and components of Flutter. In addition, it can also give you examples of various custom UI implementation as well.

Main features : Card system, Widget List, Code View, UI preview, etc.
Demo : Google Play Store and App store
Price: Open Source
Platforms : iOS and Android

4. Flutter WordPress App Template

This app template is completely written in Flutter and Dart, providing native experience and great performance. It offers optimized collection views, cross-platform support, and modular code. The UI of this template exhibits beautiful newsreader designs. The mobile template is compatible with the integration of any WordPress website. This is one of the best Flutter app templates available on the market.

Users can specify the WordPress URL and the app will automatically fetch the article. Moreover, the UI implementations include an automatic slide menu with WordPress categories, articles pagination / batching, for great performance, news list, and pull to refresh functionality. Thus, this template also houses real-time updates which automatically fetches the latest articles on the list.

Main features : Integration with any WordPress website, ** Automatic slide menu, with **WordPress categories , Articles pagination / batching, for great performance, Real-time updates (newly added articles will automatically show up in the app), Pull to refresh functionality, Efficient news lists, etc.
Demo : App Store
Platforms : iOS and Android
Price: 39$
Download link : Flutter WordPress App

5. Flutter Chat App

This template offers a complete chat app feature written entirely in Flutter and Dart. The app theme is integrated with Firebase backend. It delivers standard chat app features like real-time conversations, push notifications as well as group chat and video message functionality. It provides 30+ screens with beautiful and subtle chat app UI designs.

Our favorite Flutter app theme includes the integration of camera, online status indicator, profile screen options, social media logins, custom loaders, etc. It also houses the modern Android OS functionality such as dark mode.

full feature chat app

Main features : Real-time Chat features, Camera integration, Online status indicator, Dark mode, Friendships, Profile, Onboarding, Walkthrough flow, log in with E-mail & Password, Facebook Login, Registration, Save Password feature, Logout, Drawer menu, Performance optimizations, Empty states, Progress bars & activity indicators, Photo & Videos upload with Firebase Storage, etc.
Demo : –
Platforms : iOS and Android
Price: 99$ or 299$
Download link : Flutter Chat App

6. Flutter Dating App Template

This is one of the best premium Flutter app templates out there which has very closely based on the Tinder app. It offers a fully functional dating app template with Firebase server backend integration. This template is entirely written in Flutter. The UI flow and designs are inspired by the Tinder UI kit. This template supports the match-making algorithm along with notifications and real-time messaging. The design implementation supports both Android and iOS platforms. Moreover, the template templates 50+ screens with intuitive design elements for ease and efficiency. Inspired by the Tinder app, this app also incorporates the swipe mechanism along with date recommendations.

The features like matches, real-time conversations, dating/personal profiles, localizations are a must-have in any dating app. Thus, this template takes an extra effort to provide these features with optimized performance. The new Android feature like dark-mode support is also supported. Not to forget, the server backend support using Firebase.

Main features : Matchmaking, geolocation, Tinder swiping, realtime chat, push notifications, multilanguage and RTL, account management, profile, dark mode, etc.
Back end : Firebase Authentication, Firebase Firestore, Firebase Storage, Firebase cloud messaging, etc.
Demo : Google Play Store
Platforms : iOS and Android
Price: 99$ or 299$
Design : Free Sketch Dating UI Kit
Download link : Flutter Dating App

7. Fwitter – Flutter Based Twitter Clone

This template delivers the e-commerce app template written completely in Flutter and Dart. The UI designs are the replication of E-commerce App design by Imran. The template features 3 beautiful screen. The first one is a home or list screen to display the list of products in the sliding card structure with the availability of search features. The second screen is the product detail screen which displays the product in detail with price and color selection option.

Moreover, there is also the option of adding to the cart. The last screen is the Shopping cart screen in which the product selected to add to the card is displayed with price and sum total as well. This template may be the best option if you are going for your own e-commerce app using Flutter.

Main features : Tweet, Blue Tick, Compose a Tweet, Profile view, Profile view, Filter user in search, Notifications, Display user’s follower’s list, Search user implementation, etc.
Back end : Firebase Authentication, Firebase Firestore, Firebase Storage, Firebase cloud messaging, etc.
Demo : Google Play Store
Platforms : iOS and Android
Price: Open Source
Download link : Fwitter

8. Grocery, Food, Pharmacy, Store Delivery Mobile App with Admin Panel

The template is a premium tier template available in the Codecanyon marketplace for the price of $79. This mobile app template delivers the market directory management system using a Flutter development environment. It offers Google Maps for showing restaurants on the maps with direction to them.

The client-side features include Entities & Models are ready to use, clean & organized Dart Language code. It uses the MVC Pattern for easy styling and theming. It offers branding sites, bright and dark mode, awesome animations are ready to use: parallax animations, sliding & swiping animations, working really well on both iOS and Android with support with 60 frames per second (fps), e-payments, credit cards integration, cash on delivery and payment on pickup methods, support RTL languages (Arabic, Farisi…), push notifications using FCM (Firebase Cloud Messaging), log in, Register, Forgot password, Home, Market Details, Maps Explorer, Products Listing, Product Details, Cart, Checkout, Notifications, User Profile, User Orders, User Favorites Products, App Settings, App Languages, Help & Supports, Account Settings, Product and Market Reviews, and tracking Orders.

Furthermore, the Admin panel offers admin dashboards and statistics, multi Roles and Permission (Admin, Restaurant Manager, Client,…), Stripe Payments Gateway, Multi-language Admin panel (English, French, Portuguese, Spanish, Dutch…), Social media Authentications, and Medias & File Manager Integration.

Demo : APK download
Platforms : iOS and Android
Price: 79$ or 399$
Download link : Grocery, Food, Pharmacy, Store Delivery Mobile App

9. News Buzz

New Buzz repository available freely in GitHub delivers the News App template created in Flutter. It uses News API for fetching real-time data and Firebase as the backend and authenticator. The features includes custom news feed based on selected sources, saving articles, explore news based on categories, search for topics, and sharing articles. Hence, this may be the best solution for creating your very own Flutter news app.

Main features : Custom news feed based on selected sources, Saving articles, Explore news based on categories, search for topics, Sharing articles, etc.
Platforms : iOS and Android
Price: Open source
Download link : NewsBuzz

10. Flutter Music Player

Flutter Music Player is the first open-source Flutter based material design music player with audio plugin to play local music files. The app demo is available in Play Store. As of now, the template features only support the Android platform with options for iOS features in the future. The feature integrated for Android platform include fetch local songs (Inbuilt Permission), beautiful UI with multiple themes, animation, full-fledged example, play (local files), stop, pause, seek, shuffle, album art, incomplete, onDuration / onCurrentPosition functionalities. Moreover, this project also has a plugin to fetch songs and use an audio player that can be used in any of your projects. Thus, this template might be the best solution if you are keen on building your very own music player using Flutter.

This is one of the best open-source free Flutter app templates.

Main features : Fetch local songs (Inbuilt Permission), Beautiful UI with multiple themes(Coming Soon), Animation, Full Fledged Example, play (local files), stop, pause, seek, shuffle, Album Art, incomplete, etc.
Platforms : Android
Price: Free Open source
Download link : Flutter Music Player

11. Fluttergram

As the name seems similar to Instagram, the Fluttergram template is an open-source template that provides the fully-functional Instagram clone written in Flutter using Firebase / Firestore. The features are similar to those of the Instagram app.

The template offers custom photo feed based on who you follow (using firebase cloud functions), post photo posts from camera or gallery, like posts, comment on posts, view all comments on a post, search for users, Profile Pages follow/unfollow users, change image view from a grid layout to feed layout, add your own bio, activity Feed showing recent likes/comments of your posts + new followers. Thus, if you are looking to implement your own social media app like Instagram, then this template may be the way to get it all started.

Main features : Custom photo feed based on who you follow, Post photo posts from camera or gallery, Like posts, comment on posts, View all comments on a post, Search for users, Profile Pages, Follow / Unfollow Users, Change image view from a grid layout to feed layout, Add your own bio, Activity Feed, showing recent likes/comments of your posts + new followers, etc.
Demo: APK
Platforms : Android
Price: Free Open source
Download link : Fluttergram

This is a really cool free Flutter app template, make sure you check it out.

12. BookSearch a Flutter medium series

BookSearch app template is an open-source app template related to book collecting and reading. The implementation is totally based on Flutter and Dart. It offers four views for book listing, collecting, searching, and reading. Moreover, there is the feature of searching as well as bookmarking your favorite books. If you are looking to create your very own books aggregator and reading app then this app template may be the best option for you.

Main features : book listing, collecting, searching, and reading, etc.
Demo: APK
Platforms : Android and iOS
Price: Free Open source
Download link : BookSearch

13. Beer Me Up

This app template is particularly unusual as it has the functionality of logging the beers. However, this app template may be the source of learning the new Flutter UI as well as customize the UI based on your needs. The app template is a personal beer logging that allows you to enter every beer you have. Hence, it makes sure to keep a log of them so that you can remember them forever.

Main features : Check every beer you have into the app, Get points every time you have a new beer, Get a full history with stats about all the beer you had.
Demo: Play Store and App store
Platforms : Android and iOS
Price: Free Open source
Download link : Beer Me Up

14. Food Delivery Flutter + PHP Laravel Admin Panel

Here is another premium tier Flutter app template available in the Codecanyon market place for 79 USD. The app template offers multiple Restaurants or Restaurants directory Management System. There is the feature of Google Maps for showing restaurants on the maps with direction to them.

It delivers entities & Models that are ready to use, clean & organized Dart Language code using MVC Pattern, easy to restyle, and theming by on your branding sites, working fine with bright and dark mode, awesome animations are ready to use: Hero Animations, Parallax Animations, Sliding & Swiping animations, working really well on both iOS and Android with support with 60 frames per second (fps), Stripe, RazorPay, Paypal, Payments gateway, cash on delivery and payment on pickup methods.

Moreover, it also supports RTL languages, push notification using FCM (Firebase Cloud Messaging), log in, Register, Walkthrough, Home, Restaurant Details, Maps Explorer, Menu of Restaurants, Food Details, Cart, Checkout, Notifications, User Profile, User Orders, User Favorites Foods, App Settings, App Languages, Help & Supports, and Account Settings. The Admin panel offers admin dashboards and statistics, multi Roles and Permission (Admin, Restaurant Manager, Client,…), Stripe Payments Gateway, Multi-language Admin panel (English, French, Portuguese, Spanish, Dutch…), Social media Authentications, and Medias & File Manager Integration.

Main features : Cash on delivery and payment on pickup methods, Support RTL languages (Arabic, Farisi…), Push notification using FCM (Firebase Cloud Messaging), log in, Register, Walkthrough, Home, Restaurant Details, Maps Explorer, Menu of Restaurants, Food Details, Cart, Checkout, Notifications, User Profile, User Orders, User Favorites Foods, App Settings, App Languages, Help & Supports, Account Settings, etc.
Demo: APK
Platforms : Android and iOS
Price : 79$ – 399$
Download link : Food Delivery Flutter + PHP Laravel Admin Panel

15. Trace

Trace is an open-source full-featured, modern crypto portfolio & market explorer. The features include Portfolio Overview, Aggregate Market Explorer, Detailed Aggregate/Exchange Specific Market Data for every Coin, Portfolio Timeline, Transaction History, Portfolio Breakdown, Automatic, Light, Dark & Dark OLED Theme Options, and 7.3MB – Fast & Lightweight. Hence, you can even customize it to make your own stock market app or online blockchain crypto coin management app.

Main features : Portfolio Overview, Aggregate Market Explorer, Detailed Aggregate/Exchange Specific Market Data for every Coin, Portfolio Timeline, Transaction History, Portfolio Breakdown, Automatic, Light, Dark & Dark OLED Theme Options, 7.3MB – Fast & Lightweight, etc.
Demo: PlayStore
Platforms : Android and iOS
Price: Free Open source
Download link : Trace

16. Taskist

Taskist is an open-source to-do list-based app written completely in Flutter. The UI is simple, beautiful, and intuitive. It offers the task management system with the ability to add multiple tasks in the list format. The app uses Firebase to store the list. The UI features is based on swiping mechanism where the list can swipe right for more. There is an option of striking out the completed tasks. Moreover, it also features the ability to store and maintain tasks based on different days.

Demo: PlayStore and App Store
Platforms : Android and iOS
Price: Free Open source
Download link : Taskist

17. Fluxstore Pro – Flutter E-commerce Full App

Fluxstore is a premium tier e-commerce app inspired by the Flutter framework available in the Codecanyon marketplace for $79. With the aim to reduce hours of business spent on designing, developing, and testing a mobile app, it comes as a complete solution for optimizing to deliver your app to the market with high productivity and cost-efficiency. Moreover, it offers features that satisfy all of the business requirements including e-commerce functionalities, impressive UX design, and smooth performance on both iOS and Android devices.

Main features : Magento (2.x), and Open-cart (3.x), Full e-commerce features, Great UX design, Flexible Design System, Powerful User Setting, Push notification, Google Analytics, Easy Customisation, and While-labeling, Offline Images Caching, Easy Registration, Instance Synchronisation, Perfect splash animation, Support Smart Chat, 16+ homepage templates, etc.
Demo: PlayStore and AppStore
Platforms : Android and iOS
Price: 79$-399$
Download link : Fluxstore Pro – Flutter E-commerce Full App

18. Trinity Orientation 2018

This app template can be one of the peculiar app template here. It is an app created for Trinity College at the University of Toronto. The app acts as a companion for all first-year students during orientation week. The features include college sitemap, map functionality, chat functionality, events list, gallery, etc. This app may be useful for creating similar apps for other colleges. Nonetheless, it can be used as the learning mechanism for Flutter development.

Main features : Detailed schedule of events, Interactive map,’Trinspace’ – a fun photo sharing solution, Miscellaneous information, and a Q&A system.
Demo: Google Play and the App Store
Platforms : Android and iOS
Price : Opensource
Download link : Trinity Orientation 2018

19. Deer

Here is another TO-DO list based app template which is available freely in GitHub. This template is a minimalist Todo Planner app built around the idea of efficiency and clean aesthetic. It makes use of the BLoC (Business Logic Component) pattern to manage the app state. It showcases 4 screens. The first one is the list entry screen where you enter the to-do task, then the list screen to view the todo task list, the screen for task list detail, and the screen to edit the todo task. Thus, this template can be the right choice to develop your very own to-do list app using Flutter in the BLoC pattern.

Main features : todo screen, list screen, detail screen, edit todo screen, etc.
Demo: Google Play
Platforms : Android and iOS
Price: Open-source
Download link : Deer

20. TailorMade

TailorMade is an open-source daily routine management app template made especially for Fashion designers. It started out as an experiment with Flutter, ReBLoC, and Firebase Cloud Functions but later turned into a valuable tool for managing a Fashion designer’s daily routine. Moreover, the template is simple, clean, and overall has a very smooth intuitive feel. It offers the offline handling of use cases with Firebase Cloud. This template. This template offers 20+ screens which are all fully functional. Hence, it is highly suggested to check this template out as you can have new features to learn in Flutter and also develop your very own routine management app with some tweaks.

Main features : Google login ,Store managment,Client management,Contact management,etc.
Backend : Firebase Auth, Firebase Cloud Firestore, Firebase Cloud Functions, Firebase Storage
Demo: Google Play and the App Store
Platforms : Android and iOS
Price: Opensource
Download link : TailorMade

21. instory

instory is an open-source app available in Github free of cost. This mobile template delivers a Flutter app with beautiful UI features with 3 screens. The major objective of this app template is to download Instagram stories. Moreover, the app offers the search functionality to search for a particular profile story and download them. The dependencies include video player, HTTP plugin, audio plugin, path, and permission handler. Thus, you can take this app as an inspiration to create the downloading apps using Flutter.

Demo: Gif demo
Platforms : Android and iOS
Price: Open Source
Download link : instory

22. StreamApp – Streaming Movies, TV Series and Live TV

Stream app is another premium tier app available in the CodeCanyon store for 29$. It delivers features for streaming movies, tv-series, and live tv. This app template has support for formats on external servers, local or AWS S3 storage. It saves a lot of effort for the administrator with features such as remote configuration, auto-import of information from TheMovieDB, integration with AWS API, Firebase, AdMob, and more. Moreover, the admin panel built using Vue.js and backed by Laravel guarantees you the full power of new technologies.

Main features : Responsive autoplay carousel, Scrollable listview, App bar with transparency and animation, Bottom navigation bar, Customizable colors, Search button with suggestions and results, Collapsing App bar, Reactive view, Multiple server selection, Social sharing button, Banner and interstitial ads configurable, Push notifications, series or channel, Kids section, etc.
Platforms : Android and iOS
Price: 29$ and 290$
Download link : StreamApp

23. Reply Flutter

This Flutter app template delivers a pixel-perfect implementation of the Reply Material Design Case Study in Flutter. Reply Material Design Case Study is an email app that makes use of Material Design components and Material Theming to implement an on-brand communication experience. It mainly focusses on UI elements of Flutter such as animation, layouts, and transitions. This template aims to showcase how powerful Flutter has become as a UI framework. Hence, this template can be used as the learning mechanism for Flutter app development.

Main features : animation (list, bottom navigation), expand transition with the shared avatar, FAB compose transition, animated FAB icon states, Dismissible list elements, etc.
Demo: –
Platforms : Android and iOS
Price: Open Source
Download link : Reply Flutter

24. Enigma

Enigma is an open-source full-fledged one-to-one chat app developed entirely in Flutter. The backend is based on Firebase implementation. This app template delivers real-time one-to-one chatting experience with minimal chatting features. Since this is a Firebase dependent project, it uses Firebase Phone Authentication for authentication, Cloud Firestore, Firebase Storage for storing images, and Firebase In-App Messaging. Moreover, the UI is themed dark and the chat interfaces are passcode protected. This template can be a medium to learn how to develop a Flutter chatting app using firebase features. Hence, you can also develop your very own Flutter chatting app using this template as a started package.

Main features : Authentication, End-To-End Encryption, Hide Chats, Lock Chats, End Conversations, Save messages, No forwarding
Backend: Firebase Phone Authentication (for authentication), Cloud Firestore (not Realtime Database), Firebase Storage (for storing images), Firebase In-App Messaging (for custom messages), etc.
Demo: Google Play
Platforms : Android and iOS
Price: Open Source
Download link : Enigma

25. Flutter Pokedex

How can we forget one of the legendary anime Pokemon? There has been a number of games based on it as well. Those who watch pokemon or play their games simply cannot ignore the vital use of Pokedex. Well, this template offers the functionality of Pokedex and is completely built using Flutter. The app host the Pokemon list along with their data. The sight for our eye is the beautiful UI elements that have been kept in place to display the pokemon list and their details.

Moreover, what makes this template great is the Widget combination, animations, and charts used in it. This can be a great app to learn the use of animations and different UI components in a Flutter. Anyone who is not a fan of pokemon should also check this template out. Hence, the ones who are fan should definitely check it out.

Main features : Add FAB animation, Add grid loading animation, Add more Pokemons, Add load more, About, Base Stats, Evolution, Make tab area expandable, etc.
Platforms : Android and iOS, etc.
Price: Open Source
Design: Pokedex-App
Download link : Pokedex

Conclusion

With this plethora of Flutter App templates available out there, one can surely develop the app they are looking for using Flutter. Most app templates are open-source which means they are free to use as the starter template for creating your very own Flutter application. Some premium tier templates are available which provides powerful features that you can mildly customize based on your needs and deploy to the market.

The best Flutter app templates can be the breeding ground for many application startups and solutions for business companies. Nonetheless, the templates out there can provide valuable knowledge and coding implementations of various features in Flutter for the Flutter developers. Thus, it is highly suggested to check each one of these flutter app templates out for a better understanding of the Flutter app market and its use cases.

Did we miss any Flutter app template that’s really cool? Let us know in the comments!

The post Flutter App Templates, Examples | Best 25 in 2020 appeared first on Instaflutter.