We wrapped up summer with Expo’s first Launch Party. Here are all the feature previews and proofs of concept announced during the event.

Feature preview: Rollouts

With EAS Update, you can now ship critical bug fixes and improvements to your end users on a percentage-based rollout when you publish an update without publishing it to 100% of end users. This makes it less risky and getting changes to your end users quickly.

Rollouts for EAS Update - Expo Changelog

Feature preview: Updates JS API for expo-updates

The expo-updates library allows your app to download and manage remote updates to your application code. We’ve introduced a new React hook: useUpdates(), into state and lifecycle updates, powered by a new state machine implemented within native code.

useUpdates() API for expo-updates - Expo Changelog

Feature preview: Single Sign-On (SSO)

EAS Enterprise customers who use Okta as their workforce Identity Provider can now take advantage of SSO for employee sign-in on EAS. Support for additional Identity Providers is coming soon.

Single Sign-On (SSO) - Expo Changelog

Expo Orbit

To make development workflow even faster, we introduced a new way of launching builds and running Snack projects into your devices and simulators, called Expo Orbit. It’s a macOS menu bar app that allows you to:

• Install & launch builds from EAS with one click
• Launch Snack projects in simulators via links
• List & launch simulators (even Android without audio!)
• Install & launch apps from local files

Expo Orbit: Download and launch builds - Expo Changelog

Feature preview: Customizable builds on EAS Build

Builds just got a lot better. In the same build job, you can customize steps in your build process and run a test suite, install dependencies from Rush or Nx monorepos, send a Slack notification, and do more.

Preview: fully customizable builds on EAS Build - Expo Changelog

Proof of concept: expo-sqlite integration with CR-SQLite

We released an alpha version of the expo-sqlite library that includes a proof-of-concept integration with CR-SQLite, an SQLite extension that “allows merging different SQLite databases together that have taken independent writes”. Your users can now write to their local SQLite databases offline and merge them online without conflict.

Proof of concept: expo-sqlite integration with CR-SQLite - Expo Changelog

Proof of concept: Expo CLI Dev Tools Plugins

In Expo SDK 49, we released support for debugging network requests from the JS debugger and added integration with React Dev Tools so you can launch it directly from Expo CLI. This made possible for many developers to migrate away from Flipper.

With this migration, we recognized the need for dev tools plugin support and released a proof of concept that aims to show that it is possible to implement a similar solution on top of existing Expo infrastructure.

Proof of concept: Expo CLI Dev Tools Plugins - Expo Changelog

Community Highlights

We also hosted our first-ever AMA in our Discord community. Shoutout to our 80+ community members who joined the AMA during the event!

Join the Expo Developers Discord Server!

Expo Launch Party Recap was originally published in Exposition on Medium, where people are continuing the conversation by highlighting and responding to this story.

It’s extremely satisfying when you eas build on a new project and it Just Works — at Expo, we know what we need to do to build Android and iOS React Native apps, and we handle all of that automatically for you. In many cases, this is all a project ever needs; but, not always.

We’ve come across a number of cases where developers have asked to replace single steps in their build process with their own implementations (such as for installing dependencies for Rush or Nx monorepos) or even replace the majority of the build process in order to build for another platform (such as Electron app or one of the many TV platforms). We’ve also heard from developers that want to use EAS Build to run their test suite so that they can consolidate their CI into a single service.

To enable all of these use cases and more, today we are releasing a preview of our new fully customizable build process. You can use it by creating a yml file in .eas/build and pointing to that file from the config field on your build profile.

Learn more about this release in the full article on the Expo Changelog.

Preview: fully customizable builds on EAS Build was originally published in Exposition on Medium, where people are continuing the conversation by highlighting and responding to this story.

We're releasing an alpha version of the expo-sqlite library that includes a proof-of-concept iOS integration with CR-SQLite, an SQLite extension that "allows merging different SQLite databases together that have taken independent writes" that makes up part of the Vulcan toolchain.

We're also releasing an example project that uses CR-SQLite with TinyBase, a reactive datastore for local first apps. It demonstrates what is known as local-first architecture.

Learn more about this release in the full article on the Expo Changelog.

Proof of concept: expo-sqlite integration with CR-SQLite was originally published in Exposition on Medium, where people are continuing the conversation by highlighting and responding to this story.

To make development workflow even faster, we are introducing a new way of launching builds and running Snack projects into your devices and simulators. It’s called Expo Orbit. It’s a macOS menu bar app that allows you to:

• install and launch builds from EAS with just one click
• launch Snack projects in your simulators by opening a link
• list and launch simulators, including the ability to run Android emulators without audio
• install and launch apps from local files

Get started with Expo Orbit

Download Orbit and enable the Orbit experiment by going to settings and turning on the “Expo Orbit” experiment under the Experiments section.

Note: Orbit relies on the Android SDK and xcrun for device management, which requires having both Android Studio and Xcode set up.

We can’t wait for you to try Orbit, explore its capabilities, and hear your feedback. Your input will shape the future of this tool and guide us on where to take it next.

Launching Expo Orbit was originally published in Exposition on Medium, where people are continuing the conversation by highlighting and responding to this story.

The expo-updates library allows your app to download and manage remote updates to your application code.

We now provide a React hook: useUpdates(), for hooking into state and lifecycle updates from the module. The new hook uses a new state machine implemented within the native code.

Features:

• Wraps information on the currently running app bundle and any available or downloaded new updates
• Reads from and receives change events from the native state machine so it always reflects the current state of the system
• Can be used from any component in the application
• Tracks the last time the device checked the update server for an available update
• Existing async methods (checkForUpdatesAsync() and fetchUpdateAsync()) can be called without waiting for results — the hook will automatically refresh when the methods complete
• Surfaces errors that occur during initialization, checking for updates, or downloading an update

Example usage

import { StatusBar } from 'expo-status-bar';
import * as Updates from 'expo-updates';
import React from 'react';
import { Pressable, Text, View } from 'react-native';

export default function UpdatesDemo() {
  const { currentlyRunning, availableUpdate, isUpdateAvailable, isUpdatePending } = Updates.useUpdates();

  // If true, we show the button to download and run the update
  const showDownloadButton = isUpdateAvailable;

  React.useEffect(() => {
    if (isUpdatePending) {
      // Update has been successfully downloaded, so reload with the new update bundle
      Updates.reloadAsync();
    }
  }, [isUpdatePending]);

  // Show whether or not we are running embedded code or an update
  const runTypeMessage = currentlyRunning.isEmbeddedLaunch
    ? 'This app is running from built-in code'
    : 'This app is running an update';

  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>Updates Demo</Text>
      <Text>{runTypeMessage}</Text>
      <Button pressHandler={() => Updates.checkForUpdateAsync()} text="Check manually for updates" />
      {showDownloadButton ? (
        <Button pressHandler={() => Updates.fetchUpdateAsync()} text="Download and run update" />
      ) : null}
      <StatusBar style="auto" />
    </View>
  );
}

Learn more

To learn more, check out the example repository on GitHub.

Note: The hook is currently in alpha and will be stable in SDK 50.

Feature Preview: Updates JS API for expo-updates was originally published in Exposition on Medium, where people are continuing the conversation by highlighting and responding to this story.

EAS Update lets you ship critical bug fixes and improvements to your end-users between app store releases. By default, published updates go to 100% of users running a compatible build. While this can get changes to your end users quickly, it also can be risky.

For developers who want more control, we’re releasing percentage-based rollouts with EAS Update in Developer Preview.

You can get started by publishing an update to a new EAS Update branch you’d like to roll out. You can do this with eas update -branch [branch-name].

Then, you can start a rollout with npx eas-cli@latest channel:rollout. Once your rollout has begun, you can rerun this command to increase, decrease, or end the rollout.

Learn more in our EAS Update documentation.

Usage

npx eas-cli@latest channel:rollout

Since this feature is currently in Developer Preview, it is advised to wait to use it in production workflows. We’d love to hear your feedback on it, so email rollouts@expo.dev if you have any thoughts or questions.

Feature Preview: Rollouts for EAS Update was originally published in Exposition on Medium, where people are continuing the conversation by highlighting and responding to this story.

When building a React application, there are many options to choose from when it comes to a state management library. Redux has been the go-to choice for many development teams over the years. However, React’s ever evolving ecosystem and unopinionated nature provide various solutions where Redux might not be the best choice.

In this article, let’s look at these lightweight alternatives to Redux that you can use in your React applications to manage the application state.

React Hooks

Depending on the React application, it might not be a state management library. Hooks available in React brought the state to functional components. It’s a powerful feature that allows a function component to manage its own local state. Not all applications would require having everything in a central state. It might be over-engineered for such cases.

You can create a local state management system for the functional component using React hooks such as useState, useEffect, ' useReducer'. These hooks are available in React out of the box. You can create custom hooks and separate them from the presentational components to make the code more readable.

React Context and useReducer hook

There are two types of states to deal with in React apps. The first type is the local state that is used only within a React component. The second type is the global state that can be shared among multiple components within a React application.

Another API that React ships out of the box is Context. It falls under the second type of shared state category. Using it with the useReducer hook, you can implement a custom global lightweight state management system. The useReducer hook is a great way to manage complex state objects and state transitions. It is different from useState. It updates the state by accepting a reducer function and an initial state. Then, it returns the actual state and a dispatch function. This dispatch function is used to make changes to the state.

If you have used Redux in the past, that may sound familiar. Conceptually, Redux uses the same concept of dispatching a function to make changes.

With an example, let’s see you can use them together. Start by importing the required hooks from React library.

import { useReducer, createContext } from 'react';

Next, create an empty context and an initial state object. If there is no initial state, you can leave this object empty. For example, in the code snippet below, we’ve defined an initial state with a todos array with a single item.

export const TodosContext = createContext();

const initialState = {
  todos: [
    {
      id: 0,
      item: 'Buy a notebook'
    }
  ]
};

The next step is to define a function called reducer. It is going to take two arguments, the current state, and action. This function is used to update the state object whenever there is an action dispatched. The action dispatches when the app user performs an activity with it. One example of an action is a user adding more items to the todos array.

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        todos: [...state.todos, action.payload]
      };
    default:
      return {
        state
      };
  }
};

Next, define a TodoContextProvider that will be the central store.

export const TodosContextProvider = props => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <TodosContext.Provider value={[state, dispatch]}>
      {props.children}
    </TodosContext.Provider>
  );
};

The useReducer hook creates a reducer using the reducer function defined in the previous code snippet. This reducer is the first argument to the hook. The initialState is passed as the second argument.

After that, you will have to wrap the set of components or the initial App component of the React application with the TodosContextProvider. This way, the Context API makes the state and dispatch function available anywhere without passing anything down the component tree.

export const App = () => {
  return (
    <TodosContextProvider>
      <MainApp />
    </TodosContextProvider>
  );
};

Using the useContext hook from React within the MainApp function component, you can access values from the TodosContext. In the same component, you can dispatch the action to add more todos.

import { useContext, useState } from 'react';

export const MainApp = () => {
  const [state, dispatch] = useContext(TodosContext);

  // the below is a local state variable to get the item name
  const [item, setItem] = useState('');

  const addTodos = event => {
    if (name !== '') {
      dispatch({
        type: 'ADD_EXPENSE',
        payload: { id: uuid(), item }
      });

      // clean input fields
      setItem('');
    }
  };

  // ... rest of the component code
};

Zustand

Zustand is an open-source state management library that uses the same flux principles but in a simplified manner. It is one of the lightest management libraries available with bundle size at 2kB according to bundlephobia when minified.

It tackles a few of the common pitfalls like:

• Zombie children
• React Concurrency
• Context loss

It is straightforward to get started with Zustand when it comes to creating a store using the hook create method provided by the library. It accepts a callback function as its first argument. The store created is a React hook.

import create from 'zustand';

const useStore = create(set => ({
  todos: [
    {
      id: 1,
      item: 'Buy a notebook'
    },
    {
      id: 2,
      item: 'Buy coffee beans'
    }
  ],
  addTodo: todo =>
    set(state => ({
      todos: [{ item: pokemon.item, id: uuid() }, ...state.todos]
    }))
}));

The callback function accepts a set function as its argument that is used when manipulating the state.

The create method returns the useStore as a hook such that you can use it in any of the React components.

const App = () => {
  const todos = useStore(state => state.todos);

  // ...
};

Zustand also recommends a practice of memoizing selectors with a useCallback hook from React. This prevents unnecessary computations on each render. This way, the React application is optimized for performance in concurrent mode.

Due to its unopinionated nature, Zustand is a great lightweight solution for state management in a React application. It has less boilerplate code and doesn’t wrap the React app in context providers. You can create multiple stores to handle different states and actions. It is also compatible with well-known tools like Redux Devtools and offers built-in middleware such as persist to persist the state of the application.

Open Source Session Replay

Debugging a web application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder. OpenReplay is the only open-source alternative currently available.

Happy debugging, for modern frontend teams — Start monitoring your web app for free.

Jotai

Jotai is another open-source state management library developed and maintained by the same team behind Zustand. While the latter is based on flux principles, the former is based on the atomic approach. The state in an application, when split into atoms, is much smaller and lighter when compared to a redux store.

According to bundlephobia, the bundle size at 8.1kB when minified.

For all purposes, the Jotai has a simple API that revolves around Provider, atom, and useAtom hook. An atom is stored inside the React state tree. It uses React Context, so you will have to take care of optimizing the re-rendering of components.

Here is an example of creating a primitive atom with initial values:

import { atom } from 'jotai';

const countAtom = atom(0);
const countryAtom = atom('Japan');
const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka']);

Using the atom in a React component is equivalent to using React.useState.

import { useAtom } from 'jotai';

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
    </h1>
  );
}

Jotai offers a hook called useAtomDevTools that can be used to manage Redux DevTools integration for a particular atom.

Valtio

Valtio is a lightweight proxy based state management system for React applications. Proxy is a design pattern for observing an object and modifying it, with each object can have its own custom behavior.

Creating a state with Valtio means you have to wrap the state object in the React app with proxy. Any updates to the state object are handled by the library.

import { proxy } from 'valtio';

const state = proxy({
  count: 0
});

Since the library handles tracking of the updates to the state object, you can mutate it directly in a React component, just like a normal JavaScript object.

setInterval(() => {
  ++state.count;
}, 1000);

Valtio has a built-in hook called useProxy that reads a value from snapshots. Using it, the React component will only re-render when the part of the state in the component changes.

const Counter = () => {
  const snapshot = useProxy(state);
  return (
    <div>
      {snapshot.count}
      <button onClick={() => ++state.count}>Add</button>
    </div>
  );
};

According to bundlephobia, the bundle size at 6.7kB when minified.

Conclusion

Picking up a state management library that fulfills the need of having a centralized store in your React application comes with a variety of options. We went through some of those options in this post. Some of these options are powerful, and while the vanilla React hooks way of dedicating a component’s state and not creating a centralized store for everything is a tried and tested approach.

Originally published at https://blog.openreplay.com on January 27, 2022.

Lightweight Alternatives to Redux was originally published in StackAnatomy on Medium, where people are continuing the conversation by highlighting and responding to this story.

React is an un-opinionated framework in the front-end ecosystem. Its versatile nature does not provide a way to organize and structure a web application. The way an application is organized and structured is how a developer or a team of developers interact with it. A project with no logical structure means that everyone can do whatever they want inside it. A well-structured project requires developers to think deeper about their implementation and at the same time keep things organized. It also makes the codebase easy to navigate, modify and scale to add new features.

The architecture of a project is essential. An organized codebase is how a team of developers gets productive within the given structure in the long run. In this article, let’s look at some of the ways to keep the lifecycle of a React application healthy and well organized and what patterns you can follow.

Navigating a Directory Structure

Always have a starting point in your React application. This starting point comprises various folders such as assets, components, services, utils (reusable utility functions), pages, etc. Each of these folders contains various files required to fulfill the directory’s purpose.

For example, a bare minimum React project created using the create-react-app command-line utility to create a new React app comes with a /src directory. The starting point of this default React app (index.js file) is situated in this directory. A common practice is to use the /src directory as a familiar convention. That means all the different folders for components, pages, etc., are created inside this directory.

Using this convention, the top-level directory structure where your React app’s codebase lives can be viewed as:

└── /src
    ├── /assets
    ├── /components
    ├── /context
    ├── /hooks
    ├── /pages
    ├── /services
    ├── /utils
    └── App.js
    ├── index.js

The important part here is not to make the directory name a hard and fast rule but to follow a neat organization that anyone in the codebase can understand. That means, depending on the directory names you like to follow, the /services directory can be called /api.

Common Modules

One advantage of React being un-opinionated is it doesn’t care how you divide your modules. When developing a page in a React app, consider dividing it into modular pieces. This will help you reduce the complexity and create structures that are open for reusable or shared across the application.

Shareable code in React app should be divided under its own domain. A common module can be reusable custom components, custom hooks, business logic, constants, and utility functions. These reusable pieces are shared across the application to be used on more than one page component. Having a folder for them in your application’s directory structure is a good starting point.

Add Custom Components in their own folders

Examples of reusable components can be buttons, input fields, and content containers like cards. All of these components live within the /components directory. Each component will live inside its own sub-directory. For example, if you are creating reusable Buttons, here is an example of a directory structure you can consider:

└── /src
    ├── /components
    |   ├── /Button
    |   |   ├── Button.js
    |   |   ├── Button.styles.js
    |   |   ├── Button.test.js
    |   |   ├── Button.stories.js
    |   ├──index.js

Here is a brief explanation of what each file inside the Button directory contains:

• Button.js file that contains the actual React component
• Button.styles.js file, let’s assume you are using styled components, contains corresponding styles
• Button.test.js file that contains tests
• Button.stories.js the Storybook file

In the above structure, also notice that there is an index.js file located in the /components directory. In this scenario, this file acts as an index of all components that are part of the namesake directory. This file will look like the following:

// /src/components/index.js

import { Button } from './Button/Button';
import { InputField } from './InputField/InputField';
import { Card } from './Card/Card';

export { Button, Card, InputField };

Create Custom Hooks

A reusable React Hook is like a reusable working part. Just like you create custom components, creating a custom hook can help reduce code complexity.

Consider an example. In your React app, you have two different pages representing a login and a signup form. Each of these pages contains text input fields where users can enter their credentials and submit the form using a button. One of the input fields used in both forms is for users to enter their password. The password field contains an icon that allows the app user to toggle between the field’s visibility. Suppose you write the same code to implement this behavior in both login and signup forms. In that case, you will be duplicating the code.

A solution to this problem is to create a custom hook to toggle the icon and the field’s visibility based on the icon. Here is an example of a custom hook:

// /src/hooks/useTogglePasswordVisibility/index.js

export const useTogglePasswordVisibility = () => {
  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');

const handlePasswordVisibility = () => {
    if (rightIcon === 'eye') {
      setRightIcon('eye-off');
      setPasswordVisibility(!passwordVisibility);
    } else if (rightIcon === 'eye-off') {
      setRightIcon('eye');
      setPasswordVisibility(!passwordVisibility);
    }
  };

return {
    passwordVisibility,
    rightIcon,
    handlePasswordVisibility
  };
};

The custom hook above starts with a use naming convention. Even though React isn’t strict about naming conventions, it is important to follow them in this scenario. This hook also handles its own state and method and can be re-used on a password field, whether inside the login or a signup form.

The /hooks directory structure can be similar to components where a reusable hook lives inside their subdirectories:

└── /src
    ├── /hooks
    |   ├── /useTogglePasswordVisibility
    |   |   ├── index.js
    |   |   ├── useTogglePasswordVisibility.test.js
    |   ├──index.js

Use Absolute Imports

By default, a React app that uses the before mentioned directory structure might lead you to use import paths in the following manner:

// some file

import { Button } from '../../components';

You can configure your React application by adding support for importing modules using absolute paths. In a plain React app, this can be done by creating and configuring a jsconfig.json file at the root of your project.

Here is an example of a simple configuration inside the jsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

It makes it a lot easier to import components within the project and also, at the same time moving files without the need to change the import statements. If you want to import a module located at /src/components, you can import it as follows:

import { Button } from 'components';

If you have a custom Webpack configuration inside a file called webpack.config.js. In that case, you can customize this further to use a prefix like @components or ~components.

module.exports = {
  resolve: {
    extensions: ['js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components')
      '@hooks': path.resolve(__dirname, 'src/hooks'),
    }
  }
};

This will allow you to import using a prefix. For example, a module located at /src/components/Button can be imported as:

import { Button } from '@components';

Note: If you’re using TypeScript, you will have a file called tsconfig.json. You can configure this file. For more information, check out Create React App documentation here.

Open Source Session Replay

Debugging a web application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder. OpenReplay is the only open-source alternative currently available.

Happy debugging, for modern frontend teams — Start monitoring your web app for free.

Separate business logic from UI

The /pages directory will contain the UI for most of the application and the structure of each page in the form of React components. These components are naturally coupled with the business logic they represent. It is a common behavior that you will find in any React application. However, avoid unnecessary complexity in a UI component, you can separate the business logic from it.

One way to separate the UI and the logic is to create a custom hook, for example, for making an API request. Here is an example of making an API request to get items from an endpoint:

import { useQuery } from 'react-query';

export const moviesApi = {
  nowPlaying: () =>
    fetch(`${BASE_URL}/movie/now_playing?api_key=${API_KEY}&page=1`).then(res =>
      res.json()
    )
};

export const useNowPlayingMovies = () => {
  const { isLoading: nowPlayingLoading, data: nowPlayingData } = useQuery(
    ['movies', 'nowPlaying'],
    moviesApi.nowPlaying
  );

return {
    nowPlayingLoading,
    nowPlayingData
  };
};

In the above snippet, take note that the API request to fetch data from the endpoint /movie/now_playing happens in two parts. The first part is the API request itself using JavaScript’s fetch method that gets the data in JSON format. The second part is where the useQuery hook from React Query library is configured and wrapped inside a custom hook.

You can store or create this custom hook file inside the dedicated /hooks directory or create another directory for API-related hooks such as /api or /services.

The Utils directory

Having a utils directory is completely optional. If your application tends to have some global utility functions, it could be a good idea to separate them from the UI components. A /utils directory may contain app-wide constants and helper methods. For example, more than one UI component in your application may require some validation logic. Separating this validation business logic in its own file under the /utils directory will help you create separate flows.

Avoiding creating a single Context for everything

Usually, when you pass props from a parent to a child component, it can be as simple as passing them from one to another. However, the complexity arises when there are many components in between. This creates an inconvenient way to pass props.

React Context provides a way to pass data through the component tree without prop drilling. It is an alternative approach that lets a parent component provide props to the entire tree below it. This way, sharing data becomes easy, and one can avoid passing unnecessary props.

In your React application, you should have separate Contexts for different things. For example, your React app uses themes for UI components, but some of these components use internationalization or i18n.

The i18n context doesn’t care if the theme exposes a certain dark or light mode value. In this scenario, you will have two different context providers. This helps you separate data logically.

const App = () => {
    return (    
    <ThemeProvider>
        <QueryClientProvider>
            <Routes />
        </QueryClientProvider>
    </ThemeProvider>
    )
}

Also, if a Context is used in one of the components, you do not need to wrap the application’s root with that Context’s provider. If a section of the application doesn’t require specific data, you don’t have to share it.

Conclusion

Patterns or practices described in this article are based on one’s experience. They may not work for every large-scale application of every kind. Take the parts that resonate with you or you think will help you get things more organized in your React project and leave out the rest. The important part when it comes to organizing a React app is to structure it in a manner that makes sense to you, and if you happen to work in a team with other people, it should make sense to them too.

Originally published at https://blog.openreplay.com on December 22, 2021.

React Architecture Patterns for Your Projects was originally published in StackAnatomy on Medium, where people are continuing the conversation by highlighting and responding to this story.

Building login and signup forms in a React Native app comprise input fields and buttons. One field that you will often find yourself adding to these forms is the password field. This password field is composed of using React Native’s TextInput component.

The common behavior of this field is to hide a user’s password behind obscure characters.

Take a look at an example of the TextInput component that is used to create a password field.

import React, { useState } from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

export default function App() {
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.inputField}
          name='password'
          placeholder='Enter password'
          autoCapitalize='none'
          autoCorrect={false}
          textContentType='newPassword'
          secureTextEntry
          value={password}
          enablesReturnKeyAutomatically
          onChangeText={text => setPassword(text)}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5EEDC',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 12
  },
  inputContainer: {
    backgroundColor: 'white',
    width: '100%',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: '#d7d7d7'
  },
  inputField: {
     padding: 14,
    fontSize: 22,
    width: '90%'
  }
  }
});

It uses the secureTextEntry prop such that when a text value is entered in the input field, it is unclear what is being entered in that field.

Here is the output of the above snippet on a device:

However, giving an option to a user to let them see the current value they enter could lead to a good experience and might be necessary in some cases.

Show or Hide Password Visibility Hook

To add the ability to show or hide the password field’s visibility, let’s create a custom hook in a new file called useTogglePasswordVisibility.js.js.

Start by importing the useState hook from React library. You will need to create two different state variables to toggle between the field's visibility and change the icon.

Then define a function called useTogglePasswordVisibility. Inside this function, create two new state variables. The first one is called passwordVisibility. Its initial value is set to boolean true. The reason is that this variable will be the value of the prop secureTextEntry on the TextInput component. You would want to hide the password field initially when the user enters the password in the input field.

The second state variable defined is called rightIcon. It has a default value of eye. This value depends on the Icon Library you're using in your React Native app. For this example, I'm using MaterialCommunityIcons from Expo Vector Icons.

export const useTogglePasswordVisibility = () => {
  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');

  // ...
};

Next, add a method called handlePasswordVisibility that will allow the app user to toggle the password field's visibility between shown and hidden state.

Lastly, do not forget to return all the variables and the handler method.

export const useTogglePasswordVisibility = () => {
  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');

  const handlePasswordVisibility = () => {
    if (rightIcon === 'eye') {
      setRightIcon('eye-off');
      setPasswordVisibility(!passwordVisibility);
    } else if (rightIcon === 'eye-off') {
      setRightIcon('eye');
      setPasswordVisibility(!passwordVisibility);
    }
  };

  return {
    passwordVisibility,
    rightIcon,
    handlePasswordVisibility
  };
};

Use the Password Visibility Hook

Start by updating import statements in the App.js file:

import React, { useState } from 'react';
import { StyleSheet, Pressable, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { useTogglePasswordVisibility } from './hooks/useTogglePasswordVisibility';

Next, access the required variables and method from the useTogglePasswordVisibility hook. Add the following line at the top of the App component:

export default function App() {
  const { passwordVisibility, rightIcon, handlePasswordVisibility } =
    useTogglePasswordVisibility();
  const [password, setPassword] = useState('');

  // ...
}

Modify the TextInput component's prop. Make sure to addthe passwordVisibility as the value to the secureTextEntry prop.

<TextInput
  secureTextEntry={passwordVisibility}
  // ... rest of the props remain unchanged
/>

Inside the View component that wraps the TextInput, add a button using the Pressable component. This button will allow the user to toggle between the hidden and shown state of the password field.

This button wraps the icon component.

<View style={styles.inputContainer}>
  {/* After TextInput component */}
  <Pressable onPress={handlePasswordVisibility}>
    <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" />
  </Pressable>
</View>

That’s all! Here is the output after this step:

Here is the complete code for the App.js file:

import React, { useState } from 'react';
import { StyleSheet, Pressable, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { useTogglePasswordVisibility } from './hooks/useTogglePasswordVisibility';

export default function App() {
  const { passwordVisibility, rightIcon, handlePasswordVisibility } =
    useTogglePasswordVisibility();
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.inputField}
          name="password"
          placeholder="Enter password"
          autoCapitalize="none"
          autoCorrect={false}
          textContentType="newPassword"
          secureTextEntry={passwordVisibility}
          value={password}
          enablesReturnKeyAutomatically
          onChangeText={text => setPassword(text)}
        />
        <Pressable onPress={handlePasswordVisibility}>
          <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" />
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5EEDC',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 12
  },
  inputContainer: {
    backgroundColor: 'white',
    width: '100%',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: '#d7d7d7'
  },
  inputField: {
    padding: 14,
    fontSize: 22,
    width: '90%'
  }
});

• Source code at this GitHub repo 🐙
• Check out other blog posts I wrote on React Native and Expo 📄
• Say hi on Twitter 👋

More content at plainenglish.io. Sign up for our free weekly newsletter here.

Create a Custom Hook to Show/Hide Password Visibility in React Native was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

No-code and Low-code development platforms let people worldwide build their businesses and applications to serve them without writing code. According to Forrester, the no-code/low-code category will grow to $21.2 billion by 2021.

Before these platforms, building an application for a business would require hiring experienced software developers. But that’s not the case anymore. Today, many no-code/low-code platforms make it possible for independent creators, artists, and entrepreneurs alike to build applications on their own.

Even though there seems to be a paradigm shift from writing code to using visual development tools, the fundamental concepts of having a back-end and front-end remain the same. To build an application for your business, you will require a way to connect your back-end and front-end. A communication channel called Application Programming Interface (API) is used to request information from one computer system to another. When developing an application, you typically call APIs back and forth between a back-end and a front-end.

Draftbit is a visual development platform to build native mobile applications. It is back-end agnostic. Mobile apps built with Draftbit can be connected to virtually any back-end-as-a-service (BaaS) platform via REST API. Our vast user base uses different back-end services to connect their applications with a database.

This allowed us to look at the most popular back-ends being integrated inside Draftbit. For example, Xano, Supabase, Firestore, Airtable, and more that aim to provide a better user experience overall. We are also app development experts and can guide you towards the right back-end and what to look for.

This article aims to highlight some of the best no-code/low-code back-end platforms for you to use in 2021. We highlight their unique features, if the tool offers scalability, and if it is flexible enough or not. Lastly, for each tool, there is a sneak peek into their pricing plans. Many of the back-end tools listed below provide an API gateway to connect the front-end from a hosted back-end offered by the platform.

Airtable

Best for Beginners who want a visual, flexible back-end and are just getting started with understanding APIs.

Airtable is an enhanced version of Google Sheets or a typical spreadsheet. However, it offers more than that. Simple to get started, it has rich API support. It allows creating a spreadsheet-based database without the hassle of writing code. In addition, it is a fast and flexible way to organize data tables (known as Bases).

It contains features such as computed fields. They are special field types where Airtable handles the computation of values. Automating repetitive tasks saves a ton of time and reduces the margin of error. Building automated workflows in an Airtable base is done by using a custom action to trigger an event. Eventually, the action integrates inside an Airtable Base.

Airtable also generates a REST API for each base. A front-end development tool can consume the API directly. Various operations are performed using different endpoints generated by Airtable. Operations such as reading, writing, updating, sorting and filtering data, and more, are all available.

While Airtable might not be a traditional back-end, it gives both teams and individuals the freedom to organize tasks. In addition, it offers 50+ built-in applications to easily integrate with a wide array of other apps like G Suite, Outlook, Sendgrid, Slack, Jira, and more.

Pricing:

• Free: unlimited bases with each base limited to 1200 records and 2 GB of attachments per base.
• Plus: costs $12 per month with 5000 records per base, snapshot history, and 5 GB of attachments per base.
• Pro: costs $24 per month with unlimited apps, 50000 records per base, and 20 GB of attachments per base.

Supabase

Best for Experts who are building production-grade applications, are familiar with SQL queries, value open-source, and want a scalable solution from the start.

Supabase is an open-source Firebase alternative back-end. It provides a dedicated database based on Postgres. It supports importing existing databases as well. Besides, there is built-in support for making authenticated API requests with integrated JWT authentication. This allows you to control what your app users can access. It exposes a WebSocket endpoint that enables any front-end apps to communicate in real-time. The advantage of using a relational database is that it helps you be consistent all the time.

Relational or SQL databases are table-based databases. They have pre-defined schema and use Structured Query Language (SQL) for defining and manipulating data. Non-relational or NoSQL databases have dynamic schema. They store data in the form of a collection or multiple collections of documents.

When using Supabase, you will spend most of the time inside its Graphical User Interface (GUI). It also provides an SQL editor, which you can use to write custom SQL queries to manipulate data inside a table.

One of the most likable features is that it provides a ready-to-use REST API as soon as a database is created. It is front-end agnostic and can be used with any front-end tool building application. It gives you the choice of either self-hosting a Supabase or using their cloud service to host one.

Pricing:

• Free: $0 per month with unlimited API requests, real-time functionality, and database space up to 500 MB.
• Pro: $25 per month unlimited API requests, real-time functionality, database space up to 8 GB, supports automatic backup and log retention for up to 7 days.
• Pay as you go: Starts at $25 per month plus the usage of services like database space, storage, and transfer limits.

Firebase Firestore

Best for Intermediates who are looking to build fast, want to delegate security and user management to the backend service, and can cope with some learning curve.

Firebase Firestore is a database service from Google. It has a colossal community even though Firestore came out of beta only two years back. It is a managed database designed to embrace serverless application development. With an Opinionated set of features, it provides and is based on NoSQL.

The NoSQL paradigm lets you store data in the form of collections and documents. Each document contains fields. Every field has its unique data type. The advantage of such a database type is that it helps you move fast when building applications.

Firestore has its own built-in security system. It helps you to define rules to allow app users to access data based on their authenticated state. It supports traditional sign providers using email/password. Social providers such as Google, Facebook, Apple, Twitter, and more.

Integrating Firebase with a front-end development platform is a bit opinionated. It usually means that a no-code or a low-code platform has to provide an out-of-the-box integration for Firebase to use within their platform.

Pricing:

• Spark Plan(free): 1 GiB total stored data in Firestore
• Blaze plan (pay as you go): 1 GiB total plus $0.108 per more GiB stored data in Firestore

Xano

Best for Low-Coders who want to move fast, and need a scalable database with a built-in API gateway.

Xano is a scalable back-end that is front-end agnostic. It provides a hosted and flexible database based on Postgres. It supports the REST API paradigm to consume data to a front-end tool. It automatically generates ready-to-use REST API endpoints for each data table based on the schema created. Each endpoint generated by Xano can be customized using its No code API Builder.

Getting started with Xano is easy. There aren’t many configurations required once you log in. It abstracts the back-end away to a large extent. However, the abstraction doesn’t cost the performance and the power of a database. Another feature included with Xano is that it supports authenticated API requests. It also provides the ability to create custom functions to query databases without writing a line of code. The flexibility and scalability of such a platform make it one of the most simple back-end to get started.

Pricing:

• Free: limited to one workspace with 1000 total records and a rate-limited API.
• Launch: costs $67 per month, includes five workspaces with 100,000 total records per workspace, and no rate limitation on the API.
• Scale: costs $225 per month, includes 10 workspaces, storage with 1,000,000 total records.

Bubble CMS

Best for No-Coders who already have their web application built and database hosted with Bubble.

Bubble is a hosted web application “all in one” builder that gives complete design freedom to its users with no-code. It allows you to create web application layouts without having any knowledge of CSS or HTML. Traditional web apps require you to manage the code and set up a deployment process to a web server. The platform manages the deployment process and web hosting for you.

Despite Bubble being an all-in-one tool, their powerful Bubble CMS is also easy to connect to any other front-end development tool. Thus, you can consume the same data tables created inside the Bubble CMS to connect it with any other front-end tool, for example, to develop native applications.

Pricing:

• Free: no access to API
• Personal: costs $29 per month with access to API
• Professional: costs $129 per month
• Production: costs $529 per month

Backendless

Best for Low-coders looking for a solution to host their database in the cloud and looking for integrated services such as file storage.

Backendless is a cloud back-end platform to create apps without writing any server-side code. It provides programmable services that supply standard server functions. In addition, it supports authenticated user management, authenticated API requests, relational data, push notifications, publish/subscribe messaging, geolocation, video/audio recording, live streaming on the server, file service, and more.

Backendless makes these services available through the implementation of REST API. It provides access to a REST API that can be used with any front-end tool. Apart from its REST API support, it also supports native SDKs for iOS, Android, JavaScript applications, and more.

Pricing:

• Springboard: costs $0 per month with unlimited API calls per month
• Cloud9: costs $35 per month with 10,000,000 API calls per month
• Cloud99: costs $149 per month with 40,000,00 API calls per month

Contentful

Best for Intermediates who are looking for a Content Management platform that provides an API gateway to create media-intensive applications.

Contentful is an API-first content management platform to create, manage and publish content to any digital channel. It is a modern Content Management System (CMS) where a content model is created independently from any presentation layer. It organizes content into spaces that allow you to group all the related resources for a project together, including content entries, media assets, and settings for localizing content into different languages.

Pricing:

• Community: costs $0 with full-featured headless CMS
• Team: costs US$489 per month, ideal for a team working on or more digital products

Hasura

Best for Experts who are looking for a fast GraphQL based solution and want backward compatibility with REST.

Hasura is an instant real-time GraphQL APIs engine. It makes your data instantly accessible through a GraphQL API or a REST API. This helps you to focus on the build and ship applications much faster.

Hasura connects to a database using a Postgres connection. It can scale horizontally and hold state for caching queries. Authentication based on JSON Web Tokens (JWT) is available to add permission or a role-based system.

Pricing:

• Free: costs $0 and includes 1 GB data pass-through
• Standard: costs $99 per month and includes 20 GB data pass-through

Fauna

Best for Experts who can deal with a little bit of learning curve and are looking for a transactional, serverless database.

Fauna is a database as a service that works well with serverless applications. It is not a traditional database. It has its own query language called FQL. It provides flexible data modeling and supports ACID transactions that eliminate data anomalies.

While Fauna is more of a complete database solution, usually to generate an API, you will have to use a tool like NoCodeApi.com.

Pricing:

• Individual: costs $25 per month
• Team: $150 per month

Directual

Best for Low-coders who are looking for a scalable NoSQL database that supports advanced API configurations such as authentication.

Directual provides a cloud-hosted scalable NoSQL database. It provides tools to configure a database with the support of data structures and object fields. It also supports the vast majority of data types such as string, number, file, and more.

It has an in-built web page builder interface and is free to connect to any other low-code or no-code tool. In addition, you can create web or mobile interfaces using its RESTful API feature using any front-end platform.

It offers an API builder that supports configuring advanced API settings to make authenticated API requests, user management, and event processing without setting up the infrastructure. It also includes filtering, validation, sorting, and custom query params processing.

Pricing:

• Free: includes one developer seat with 3k operations.
• Startup: costs $39 per month with three developer seats and 30k operations.
• Pro: costs $129 per month with five developer seats and 500k operations.
• Business: costs $439 per month with 10 develop seats and 2M operations.

Back4App

Best for Experts who want an advanced solution that supports authentication, file storage, supports REST, and GraphQL, and who value open-source.

Back4App is an open-source low-code platform to develop modern applications. It supports creating a spreadsheet-like database. It includes data storage, RESTful and GraphQL APIs, file storage, authentication, and push notifications.

It offers a solution to integrate GDPR compliance into your application. It also offers two hosting options. You can either choose shared if you are looking for a cost-effective solution or dedicated to scaling and large applications.

Pricing:

Back4app has the most vibrant and vast pricing options than any other back-end platform on this list.

• Free: up to 10k requests per month
• Solo: starts at $5 for 50k requests per month
• Basic: starts at $25 for 500k requests per month
• Standard: starts at $50 for 2M requests per month
• Silver: starts at $200 with unlimited requests per month

Conclusion

Given the demand for no-code and low-code applications in recent times, it is not a surprise that there are various options for creating the back-end for your application.

Depending on your requirements, any one of these tools will help you kickstart low-code app development. However, each back-end platform described in this list has its advantages and limitations. Therefore, it is crucial to consider which suits your needs the best.

Next Steps

If you are interested in learning more about No-code/Low-code development or building native mobile apps visually, check out the following resources:

• Draftbit on Twitter — @draftbit
• Guides on using above mentioned back-ends with Draftbit
• Aman on Twitter — @amanhimself

And if you need help or have questions, visit the Draftbit Community forums.

11 Best No-Code and Low-Code Back-Ends for 2021 was originally published in Geek Culture on Medium, where people are continuing the conversation by highlighting and responding to this story.