@indiex/silo v0.0.13

Silo - The local datastore for React Native and Expo

Here is how to use but... don't use this right now

If you use it anyway and would like to leave some feedback then leave feedback here or DM me on X

import { FlatList, StyleSheet, Text, View } from 'react-native'
import { Type } from '@sinclair/typebox'
import {
  defineCollection,
  defineHierarchy,
  defineSchema,
  createStore,
} from '@indiex/silo'

const notes = defineCollection(
  Type.Object({
    content: Type.String(),
  })
)

const tasks = defineCollection(
  Type.Object({
    details: Type.String(),
  })
)

const schema = defineSchema({ notes, tasks })
const hierarchy = defineHierarchy(schema, {
  notes: {
    tasks: '*',
  },
})
const store = createStore(hierarchy)

export default function App() {
  const { docs: notes, queryKey } = store.useQuery(['notes'])

  // const { doc: note1 } = store.useDoc(['notes', 'note1'])

  // const addDoc = store.useAddDoc([queryKey])
  // const { id: noteId } = await addDoc(['notes'], {
  // content: 'This is a note',
  // })
  // const updateDoc = store.useUpdateDoc([queryKey])
  // await updateDoc(['notes', 'note1'], { content: 'task1' })

  // const removeDoc = store.useRemoveDoc([queryKey])
  // await removeDoc(['notes', 'note1'])

  // const setDoc = store.useSetDoc([queryKey])
  // await setDoc(['notes', 'note1'], {
  // content: 'This is a note',
  // })

  return (
    <View style={styles.container}>
      <FlatList
        keyExtractor={(_, index) => index.toString()}
        data={notes}
        renderItem={({ item }) => <Text>{item.content}</Text>}
      />
    </View>
  )
}

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

Inspiration was taken from Firebase and Deno KV