Veloria is a SQLite-based ORM that aims to bring prisma-like experience for React Native.

Foreword

The initial announcement of Prisma for React Native made me very excited to try it out on a new project. I watched a few videos and decided to give it a spin. Unfortunately, I faced quite a few issues (for example, this one) running the project and wasn't able overcome them within reasonable timeframe.

But the idea was great! I use Prisma for my web projects and can't get enough of it, so I thought I can invest some time and efforts to build a similar library that will work for me and hopefully for you. Probably, at some point prisma will invest more resources to develop the react-native-prisma library to the point where my lib won't be needed, but until then, I'm happy to bridge this gap by veloria.

This library is built with the sole purpose of bringing similar to prisma experience to React Native so developers like myself can relate to it and build upon it. I'm happy to develop this library with you for our common needs.

I would like to keep the DX as close as possible to Prisma (so eventually it can superseed this project and developers won't have to rewrite the entire codebase if they decide to migrate). However, there are some delibirate differences that I introduced based on my personal likings. Later on, we can make it customizable by introducing pluggable templates if that's what community would prefer.

Getting Started (Expo)

1. Add prisma.schema to your assets folder. You can also use any other folder, but then you'd have to provide an optional path to the prisma.schema in all your commands
2. Add expo-sqlite to your project: bun expo install expo-sqlite. We rely on expo-sqlite as a solid foundation for managing database layer, so you need to install it first
3. Run bunx veloria migrate. This command will generate the initial migration for your database based on the prisma.schema provided
4. Generate hooks and types by using bunx veloria generate

Now you are all set to use veloria in your project:

1. Add import { DatabaseProvider } from '@veloria/client' in your app/_layout.tsx
2. Wrap your content into <DatabaseProvider />:

1import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
2import { useFonts } from 'expo-font'
3import { Stack } from 'expo-router'
4import * as SplashScreen from 'expo-splash-screen'
5import { useEffect } from 'react'
6import 'react-native-reanimated'
7
8import { useColorScheme } from '@/hooks/useColorScheme'
9import { DatabaseProvider } from '@veloria/client'
10
11// Prevent the splash screen from auto-hiding before asset loading is complete.
12SplashScreen.preventAutoHideAsync()
13
14export default function RootLayout() {
15  const colorScheme = useColorScheme()
16  const [loaded] = useFonts({
17    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
18  })
19
20  useEffect(() => {
21    if (loaded) {
22      SplashScreen.hideAsync()
23    }
24  }, [loaded])
25
26  if (!loaded) {
27    return null
28  }
29
30  return (
31    <DatabaseProvider>
32      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
33        <Stack>
34          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
35          <Stack.Screen name="+not-found" />
36        </Stack>
37      </ThemeProvider>
38    </DatabaseProvider>
39  )
40}

Assuming you have a simple schema like this:

1datasource db {
2  provider = "sqlite"
3  url      = "file:./dev.db"
4}
5
6model Test {
7  id   Int    @id @default(autoincrement())
8  name String
9}

you should be able to use auto-generated hooks for simple CRUD operations:

1import { useTest } from '@veloria/client'
2// ...
3export default function HomeScreen() {
4  const [tests, setTests] = useState<Test[]>([])
5  const test = useTest()
6
7  useEffect(() => {
8    test.list().then(setTests)
9  }, [])
10
11  useEffect(() => {
12    console.log('Current tests look like this: ', tests)
13  }, [tests])
14
15  //...
16
17  return (
18    <View>
19      <TouchableOpacity
20          onPress={async () => {
21            const res = test.create({
22              name: 'test ' + Math.random().toString(36).substring(7),
23            })
24          }}
25        >
26          <ThemedText>Create a test</ThemedText>
27      </TouchableOpacity>
28    </View>
29  )

This code should be sufficient to illustrate a simple workflow with veloria.

WARNING

This library IS NOT READY FOR PRODUCTION:

• Plenty features are missing! Current codebase brings approx 30% of all the features that prisma provides
• Code is not covered with tests! Things might break in the future (and likely will)
• At the moment, I'm the only one who maintains this library. If I won't have time, there is a solid chance no one will step in to answer your issues and merge your PRs

However, if you'd like to contribute to bring more features, help this project to mature and evolve, this is the perfect opportunity to get invoived.

Contributing

• Open an issue and outline your proposal or submit a bug
• If you think it will be better to talk in DMs, hit me up on X or DM me in Telegram