DEV Community: Sebastian Duta

How To Use Supabase Database in React Native - Complete Guide

Sebastian Duta — Sat, 04 Mar 2023 20:45:48 +0000

React Native is a popular platform for creating mobile applications that are compatible with both iOS and Android. It is a great choice for developing cross-platform applications. In this tutorial, we will learn how to use Supabase, an open-source database, in our React Native app. We will be creating a basic todo app and will include code examples with functional components.

Setting up the React Native app

To get started, we need to create a new React Native project. We can do this by running the command react-native init TodoApp. This will create a new folder called TodoApp with the React Native code inside.

Adding all Supabase dependencies

Next, we need to install the Supabase dependencies. This can be done by running the command npm install @supabase/supabase-js followed by npm install @supabase/supabase-react-native. This will install all the necessary packages for us to use Supabase in our React Native app.

Setting up Supabase read and write access rules

Before we can write to and read from Supabase, we need to set up some access rules. This is done by going to the Supabase dashboard and creating a new project. Once we have created the project, we need to go to the access rules section and set up read and write rules that will allow our app to access our database.

Writing to Supabase from React Native

Now that we have set up the access rules, we can start writing to Supabase from our React Native app. To do this, we need to first create a new component to handle the writing. This component will contain a form that will allow us to enter the todo item and a button that will submit the data to Supabase.

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

export default class AddTodo extends React.Component {
  state = {
    todoText: ''
  };

  handleSubmit = () => {
    // code to submit to Supabase
  };

  render() {
    return (
      <View>
        <TextInput
          value={this.state.todoText}
          onChangeText={text => this.setState({ todoText: text })}
        />
        <Button title="Submit" onPress={this.handleSubmit} />
      </View>
    );
  }
}

In the handleSubmit function, we can use the supabase package to write the data to our database. We can do this by using the insert() method and passing in the table name, the data, and an optional parameter to return the inserted data.

import { insert } from '@supabase/supabase-js';

handleSubmit = () => {
  const data = {
    text: this.state.todoText
  };

  insert('todos', data, { returning: true })
    .then(result => {
      const todo = result.returning[0];
      // code to add the todo to the list
    })
    .catch(err => {
      console.log(err);
    });
};

Reading single objects from Supabase

Once we have written the data to Supabase, we need to be able to read it back out. To do this, we can use the select() method. This method takes in a table name, a query, and an optional parameter to return the selected data.

import { select } from '@supabase/supabase-js';

readTodo = (id) => {
  select('todos', {
    where: {
      id
    },
    returning: true
  })
    .then(result => {
      const todo = result.returning[0];
      // code to update the UI
    })
    .catch(err => {
      console.log(err);
    });
};

Reading & displaying lists of objects

In addition to reading single objects, we may want to read a list of objects from our database. To do this, we can use the select() method with a limit parameter. This parameter allows us to specify the number of objects that we want to retrieve. We can also use the offset parameter to paginate our results.

import { select } from '@supabase/supabase-js';

readTodos = (offset) => {
  select('todos', {
    limit: 10,
    offset,
    returning: true
  })
    .then(result => {
      const todos = result.returning;
      // code to update the UI
    })
    .catch(err => {
      console.log(err);
    });
};

Listening to real-time updates

In addition to reading and writing data, Supabase also supports real-time updates. We can listen for updates by using the listen() method. This method takes in a table name, a query, and a callback function that will be called when there is an update.

import { listen } from '@supabase/supabase-js';

listenTodos = () => {
  listen('todos', {}, (err, data) => {
    if (err) {
      console.log(err);
    } else {
      // code to update the UI
    }
  });
};

Batch updates to improve performance

If we need to update multiple objects at once, we can use the update() method. This method takes in a table name, a query, and an object containing the values we want to update. This is an efficient way to update multiple objects at once and can improve performance.

import { update } from '@supabase/supabase-js';

updateTodos = (ids, completed) => {
  update('todos', {
    where: {
      id: ids
    },
    set: {
      completed
    },
    returning: true
  })
    .then(result => {
      const todos = result.returning;
      // code to update the UI
    })
    .catch(err => {
      console.log(err);
    });
};

How to Paginate Lists from Supabase DB

Finally, we may want to paginate our lists from Supabase. To do this, we can use the offset parameter in the select() method. This parameter allows us to specify the number of objects to skip before returning the results. We can use this to paginate our results and display them in pages.

import { select } from '@supabase/supabase-js';

readTodos = (pageNumber) => {
  const offset = pageNumber * 10;

  select('todos', {
    limit: 10,
    offset,
    returning: true
  })
    .then(result => {
      const todos = result.returning;
      // code to update the UI
    })
    .catch(err => {
      console.log(err);
    });
};

Conclusion

In this tutorial, we learned how to use Supabase in our React Native app template. We went through the process of setting up the React Native app, adding all the necessary dependencies, setting up the access rules, writing to Supabase, reading single objects, reading and displaying lists of objects, listening to real-time updates, batch updates to improve performance, and paginating lists from Supabase. We also included code examples with functional components for each step of the process. We hope this tutorial has been helpful in your journey to creating a React Native app with Supabase, that works for both Android and iOS.

Complete Guide to useState Hook in React

Sebastian Duta — Mon, 27 Feb 2023 18:11:45 +0000

In this article, we are going to look at how you can leverage the useState hooks in React apps, as it's one of the most basic concepts you need to be familiar with.

The useState hook is also available in React Native, so in general, pretty much all the concepts can be translated into the mobile world.

What are Hooks in React?

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

What is useState in React?

The useState hook allows you to add state to React function components. It returns a stateful value, and a function to update it.

The useState hook is a way to add state to function components in React. It accepts a single argument, which is the initial state, and returns an array with two values: the current state, and a function that updates it.

Creating the React App

To get started, you will need to create a React app. If you already have a React app, you can skip this step.

First, install the create-react-app package:

npm install -g create-react-app

Then, create a new React app:

create-react-app my-app

Basic useState Code Example

Now that we have a React app set up, let’s look at a basic example of how to use the useState hook.

In this example, we’ll create a component that displays a count. It will have a button that will increment the count when clicked.

First, let’s create a new component called Counter:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;

This code creates a component called Counter that renders a <p> element with the current count, and a button that increments the count when clicked.

The useState hook is used to add state to the component. It accepts a single argument, which is the initial state, and returns an array with two values: the current state, and a function that updates it.

In this example, we use the array destructuring syntax to assign the current state to the count variable, and the function that updates the state to the setCount variable.

The count variable holds the current state, which is initialized to 0. The setCount function is used to update the state. It accepts a single argument, which is the new value for the state. In this example, we pass in count + 1 to increment the count by 1.

Advanced Use Cases of useState

The useState hook can be used to store more complex state in React components. For example, you can use it to store an array or an object.

Let’s look at an example of how to use the useState hook to store an array. In this example, we’ll create a component that renders a list of items. It will have a button that will add a new item to the list when clicked.

First, let’s create a new component called List:

import React, { useState } from 'react';

const List = () => {
  const [items, setItems] = useState([]);

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => setItems([...items, 'new item'])}>
        Add item
      </button>
    </div>
  );
};

export default List;

This code creates a component called List that renders a list of items. It uses the useState hook to store an array in the items variable. The setItems function is used to update the state.

In this example, we use the spread operator to add a new item to the array. The spread operator creates a new array with the existing items, plus the new item.

Caveats of useState

The useState hook has a few caveats that you should be aware of.

First, the state is only updated when the setState function is called. If you call setState with the same value, the state will not be updated.

Second, the state is not automatically updated when the props or context change. You will need to use the useEffect hook to update the state in response to changes in props or context.

Finally, the state is not automatically passed down to child components. You will need to use the useContext hook to pass the state down to child components.

Conclusion

In this tutorial, we looked at how to use the useState hook in React. We covered the basics of the useState hook, as well as some advanced use cases. We also looked at some of the caveats of the useState hook.

Using the useState hook is a great way to add state to React function components. It’s simple to use and allows you to add state without writing a class.

10 Reasons to Use React Native Instead of Swift

Sebastian Duta — Sat, 11 Feb 2023 23:55:13 +0000

React Native is an open-source framework for building mobile applications using JavaScript and React. It allows developers to create cross-platform apps that run on both iOS and Android devices. In contrast, Swift is a powerful and intuitive programming language developed by Apple specifically for building iOS apps.

While Swift has been the go-to language for iOS development for years, more and more developers are turning to React Native as an alternative. In this article, we will explore 10 benefits of using React Native instead of Swift for mobile app development.

1. Cross-platform Development

One of the biggest benefits of React Native is its ability to build cross-platform applications. This means that a single codebase can be used to create apps for both iOS and Android platforms, reducing the time and effort required to build separate apps for each platform.

2. Faster Development Time

React Native has a faster development time compared to Swift as it allows developers to see the changes they make in real-time. This can greatly reduce the iteration time during development and speed up the entire process.

3. Cost-Effective

Building separate apps for iOS and Android using Swift can be costly, as two separate teams of developers would be needed. However, with React Native, a single team of developers can build an app that runs on both platforms, making it a more cost-effective option.

4. Community Support

React Native has a large and active community of developers who are constantly working to improve the framework. This means that developers can benefit from the collective knowledge and expertise of the community, and easily find solutions to any challenges they may face.

5. Reusable Components

React Native allows developers to create reusable components, which can be used across different parts of the app. This makes it easier to maintain the app and reduces the amount of code that needs to be written, saving time and effort.

6. Better Performance

React Native apps have a better performance compared to hybrid apps built using other frameworks. This is because React Native apps use native components, rather than web components, which results in a more seamless and responsive user experience.

7. Easy to Learn

React Native is easy to learn for developers who already have experience with JavaScript and React. This means that developers can quickly get up to speed and start building apps using the framework.

8. Access to Native Features

React Native gives developers access to native features such as the camera, accelerometer, and more, without having to write native code. This allows developers to create apps with native-like functionality, while still using a single codebase.

9. Hot Reloading

React Native's hot reloading feature allows developers to see the changes they make in real-time, without having to restart the app. This speeds up the development process and makes it easier to iterate on designs and features.

10. Larger Talent Pool

As JavaScript is one of the most widely used programming languages, there is a large pool of talented developers who are familiar with the language and able to build apps using React Native. This makes it easier for companies to find the talent they need to build their app.

In conclusion, React Native provides a range of benefits over Swift, including cross-platform development, faster development time, cost-effectiveness, and a larger talent pool. These benefits make React Native a popular choice for companies looking to build mobile apps for both iOS and Android platforms. Check out these amazing React Native templates, if you want to speed up your app development.