npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@powersync/react-native

v1.16.1

Published

PowerSync - sync Postgres with SQLite in your React Native app for offline-first and real-time data

Downloads

2,767

Readme

PowerSync SDK for React Native

PowerSync is a sync engine for building local-first apps with instantly-responsive UI/UX and simplified state transfer. Syncs between SQLite on the client-side and Postgres, MongoDB or MySQL on the server-side.

This package (packages/react-native) is the PowerSync SDK for React Native clients. It is an extension of packages/common.

See a summary of features here.

Installation

Install Package

npx expo install @powersync/react-native

Install Peer Dependency: SQLite

By default, this SDK requires @journeyapps/react-native-quick-sqlite as a peer dependency. Alternatively, you can install OP-SQLite from the PowerSync OP-SQLite package (currently in alpha).

Install it in your app with:

npx expo install @journeyapps/react-native-quick-sqlite

Install Polyfills

  • Polyfills are required for watched queries using the Async Iterator response format.

Babel Plugins: Watched Queries

Watched queries can be used with either a callback response or Async Iterator response.

Watched queries using the Async Iterator response format require support for Async Iterators.

Expo apps currently require polyfill and Babel plugins in order to use this functionality.

npx expo install @azure/core-asynciterator-polyfill

Make sure to import the polyfill early in your application

// App.js
import '@azure/core-asynciterator-polyfill';

Install the async generator Babel plugin

pnpm add -D @babel/plugin-transform-async-generator-functions

Add the Babel plugin to your babel.config.js file

module.exports = function (api) {
 return {
   presets: [...],
   plugins: [
     // ... Other plugins
     '@babel/plugin-transform-async-generator-functions'
   ]
 };
};

Metro config (optional)

When using a bare React Native app without a framework like Expo, the @powersync/react-native package does not work well with inline requires.

If you see the following error message

Super expression must either be null or a function

then you will need to add this to your metro.config.js:

const config = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                inlineRequires: {
                  blockList: {
                    [require.resolve("@powersync/react-native")]: true,
                  },
                },
              },
        })
    }
};

Native Projects

This package uses native libraries. Create native Android and iOS projects (if not created already) by running:

npx expo run:android
# OR
npx expo run:ios

Getting Started

Our SDK reference contains everything you need to know to get started implementing PowerSync in your project.

Changelog

A changelog for this SDK is available here.

API Reference

The full API reference for this SDK can be found here.

Examples

For example projects built with PowerSync and React Native, see our Demo Apps / Example Projects gallery. Most of these projects can also be found in the demos/ directory.

Found a bug or need help?

  • Join our Discord server where you can browse topics from our community, ask questions, share feedback, or just say hello :)
  • Please open a GitHub issue when you come across a bug.
  • Have feedback or an idea? Submit an idea via our public roadmap or schedule a chat with someone from our product team.