WatermelonDB | 🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️ | Frontend Framework library
kandi X-RAY | WatermelonDB Summary
Support
Quality
Security
License
Reuse
- Makes an html word
- global event handler
- set the theme
- Run code block
- Create a raw record from a raw table .
- Wrap write function
- Search for new URL
- Function to update a play button
- Set raw values for a raw column
- Do the search term
WatermelonDB Key Features
WatermelonDB Examples and Code Snippets
Trending Discussions on WatermelonDB
Trending Discussions on WatermelonDB
QUESTION
So I installed WatermelonDB for React Native and wanted to use it. I did everything exactly like in the installation guide but it seems like it didn't work.
This is the error I get:
This are my dependecies:
"dependencies": {
"@gorhom/bottom-sheet": "^4.1.5",
"@nozbe/watermelondb": "^0.24.0",
"@react-native-async-storage/async-storage": "^1.15.15",
"@react-native-clipboard/clipboard": "^1.8.5",
"@react-native-community/blur": "^3.6.0",
"@react-native-community/netinfo": "^7.1.7",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",
"audit": "^0.0.6",
"fix": "^0.0.6",
"react": "17.0.2",
"react-native": "0.66.4",
"react-native-background-timer": "^2.4.1",
"react-native-device-info": "^8.4.8",
"react-native-geolocation-service": "^5.3.0-beta.4",
"react-native-gesture-handler": "^2.2.0",
"react-native-hyperlink": "^0.0.19",
"react-native-image-crop-picker": "^0.37.2",
"react-native-localize": "^2.1.7",
"react-native-maps": "^0.30.1",
"react-native-mmkv": "^2.0.0",
"react-native-pinchable": "^0.2.1",
"react-native-reanimated": "^2.3.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.2",
"react-native-svg": "^12.1.1",
"react-native-typing-animation": "^0.1.7",
"rn-fetch-blob": "^0.12.0"
},
It does not matter if I try it with or without JSI. Does not work all the time. I also use kotlinVersion = '1.4.21'
ANSWER
Answered 2022-Jan-26 at 17:29The docs are actually wrong. For everybody having the same problem:
index.js
...
myScheme,
...
has to become
scheme: myScheme,
QUESTION
I'm trying to debounce()
an Observable
with pipe()
and chaining .subscribe()
but for some reason the function in the subscribe is still being called over a dozen times in one go.
What I'm trying to do is pipe the withChangesForTables
and debounce the sync call because I want it to be called only when a whole batch of changes have been made. So I created a provider for the sync and wrapped it around my RootNavigator
const SyncContext = createContext();
function useSync() {
return useContext(SyncContext);
}
function SyncProvider({children}) {
const [isSyncing, setIsSyncing] = useState(false);
const [hasUnsynced, setHasUnsynced] = useState(false);
async function checkUnsyncedChanges() {
const hasChanges = await hasUnsyncedChanges({
database
});
setHasUnsynced(hasChanges);
}
async function sync() {
await checkUnsyncedChanges();
if (!isSyncing && hasUnsynced) {
setIsSyncing(true);
await synchronizeWithServer();
setIsSyncing(false);
}
}
database.withChangesForTables([
'table_name',
'table_name2'
]).pipe(
skip(1),
// ignore records simply becoming `synced`
filter(changes => !changes.every(change => change.record.syncStatus === 'synced')),
// debounce to avoid syncing in the middle of related actions - I put 100000 to test only
debounceTime(100000),
).subscribe({
//calls API endpoint to sync local DB with server
next: () => sync(),
error: e => console.log(e)
});
const value = {
isSyncing,
hasUnsynced,
checkUnsyncedChanges,
sync
};
return (
{children}
);
}
ANSWER
Answered 2022-Jan-04 at 21:34I had to move withChangesForTables
into a useEffect
and retrun it in order to unsubcribe which seems to have resolved the issue. The code now looks something like this:
useEffect(() => {
return database.withChangesForTables([
'table_name',
'table_name2'
]).pipe(
skip(1),
filter(changes => !changes.every(change => change.record.syncStatus === 'synced')),
debounceTime(500),
).subscribe({
next: () => sync(),
error: e => console.log(e)
});
}, [])
QUESTION
I encounter this error message when I start my react native app: Invariant Violation: "backdropFilter" is not a valid style property.
I checked that I don't have any backdropFilter
used in my source code. But I still got this error.
full error message:
Invariant Violation: "backdropFilter" is not a valid style property.
StyleSheet generated: {
"flexDirection": "column",
"height": 68,
"justifyContent": "center",
"backgroundColor": "rgba(248, 248, 248, 0.82)",
"backdropFilter": "blur(10px)",
"paddingHorizontal": 24
}
Valid style props: [
"alignContent",
"alignItems",
"alignSelf",
"aspectRatio",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomEndRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomStartRadius",
"borderBottomWidth",
"borderColor",
"borderEndColor",
"borderEndWidth",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStartColor",
"borderStartWidth",
"borderStyle",
"borderTopColor",
"borderTopEndRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopStartRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"decomposedMatrix",
"direction",
"display",
"elevation",
"end",
"flex",
"flexBasis",
"flexDirection",
"flexGrow",
"flexShrink",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontVariant",
"fontWeight",
"height",
"includeFontPadding",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginEnd",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginStart",
"marginTop",
"marginVertical",
"maxHeight",
"maxWidth",
"minHeight",
"minWidth",
"opacity",
"overflow",
"overlayColor",
"padding",
"paddingBottom",
"paddingEnd",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingStart",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"start",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"textTransform",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection",
"zIndex"
]
invariant
browser.js:38:14
styleError
StyleSheetValidation.js:77:11
validateStyleProp
StyleSheetValidation.js:35:16
validateStyle
StyleSheetValidation.js:55:6
module.exports.create
StyleSheet.js:356:8
css
emotion-primitives-core.browser.cjs.js:131:26
styles.ts:58:16
loadModuleImplementation
require.js:321:11
index.tsx:12
loadModuleImplementation
require.js:321:11
index.tsx:12
loadModuleImplementation
require.js:321:11
index.js:9
loadModuleImplementation
require.js:321:11
guardedLoadModule
require.js:201:44
global code
index.bundle?platform=ios&dev=true&minify=false:226443:3
Here is my package.json dependencies:
"dependencies": {
"@emotion/core": "^11.0.0-next.10",
"@emotion/native": "^11.0.0-next.12",
"@emotion/react": "^11.0.0-next.10",
"@nozbe/watermelondb": "0.20.0",
"@nozbe/with-observables": "^1.0.5",
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/netinfo": "^5.9.7",
"@react-native-community/push-notification-ios": "^1.7.1",
"@react-native-firebase/app": "^8.4.5",
"@react-native-firebase/messaging": "^7.8.11",
"@react-navigation/bottom-tabs": "^5.4.7",
"@react-navigation/native": "^5.4.2",
"@react-navigation/stack": "^5.3.9",
"@reduxjs/toolkit": "^1.6.2",
"@types/crypto-js": "^4.0.1",
"@types/jwt-decode": "^2.2.1",
"@types/lodash": "^4.14.160",
"@types/node-forge": "^0.9.5",
"@welldone-software/why-did-you-render": "^4.2.1",
"axios": "^0.19.2",
"crypto-js": "^3.3.0",
"jwt-decode": "^3.0.0",
"lodash": "^4.17.20",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"node-forge": "^0.10.0",
"observable-hooks": "^2.3.5",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-crypto": "^2.2.0",
"react-native-elements": "^2.0.2",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "^1.6.1",
"react-native-msal": "^3.1.2",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^1.0.2",
"react-native-screens": "^2.7.0",
"react-native-vector-icons": "6.6.0",
"react-native-view-pdf": "^0.11.0",
"react-redux": "^7.2.5",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"rxjs": "^6.5.5"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^1.0.0",
"@types/jest": "^24.0.24",
"@types/react-native": "^0.62.0",
"@types/react-test-renderer": "16.9.2",
"@typescript-eslint/parser": "^2.27.0",
"babel-jest": "^24.9.0",
"eslint": "^7.0.0",
"eslint-config-airbnb-typescript-prettier": "^2.1.1",
"eslint-plugin-jest": "^23.13.1",
"eslint-plugin-react-hooks": "^4.0.2",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"prettier": "^2.0.4",
"react-test-renderer": "16.11.0",
"typescript": "^3.9.3"
}
ANSWER
Answered 2021-Nov-02 at 07:31It is because backdropFilter is not one of the style props supported by react-native. You can remove it in you style sheet and the program should be able to work.
QUESTION
I have a React Native project managed by expo and I am trying to work on an offline database so ended up going with the expo-sqlite package since everything else that is better (watermelondb, pouchdb, realm etc.) doesn't work with expo managed workflow. So very basic table creation is working fine, but whenever I am trying to add a foreign key it just says that the parent table can't be resolved. So in the following chunk of code, the error is Unable to resolve table 'Profile'
.
Below is a good picture to illustrate what I am seeing on IntelliJ. So far I haven't found any way of selecting a Datasource since if you are developing with expo the very basic way (not specifically for android or iOS) then there's no way to choose the Datasource.
I know that you would also have to turn on PRAGMA Foreign Keys and I have done so as well first with tx.executeSql
and finally what you see below (that's how it currently is).
I have also gone to Project Structure and tried out SQLite, GeneralSQL, and MySQL for SQL Dialects under Langauge and Framework.
I am launching the expo app on an iOS device if that makes any difference at all.
ANSWER
Answered 2021-Jan-31 at 21:29The problem wasn't anything to do with this specific table but another one similar to this one later down the file. Also disregard the red on table_name and column_id, since that is something not solvable with how IntelliJ IDEA is setup (at least with what I have come to figure out!)
So initially I had the code like the following. Notice how the foreign key is declared on line 4
After a whole lot of commenting and uncommenting chunks of code, I found out that this was the one that was causing the problem. So I found out in this github issue that you can write transaction in the following way:
tx.executeSql("...", [], null, null)
//or
tx.executeSql("...", [], null, (tx, error) => {
return true //rollback
})
And changing my code similary led me to the realization that, the
FOREIN KEY (column) REFRENCES PARENT_TABLE ( PARENT_TABLE_COLUMN )
has to be at the very last line otherwise, you will get errors such as syntax error at created_at
(that was the error for me since created_at was right after the foreign key line)
Finally, I changed it to:
Bottom line is, instead of tx.executeSql("...")
if you write out all the arguments and even pass a console log in the error_callback
your life will become much better debugging what went wrong!
QUESTION
I want to run multiple functions with async/await including a for loop as well. The loop also needed to be run one another is done. Currently I'm using this function and seems like it is not working correctly.
For the for loop query I need the id created in first query to perform it.
const createStudent = async (studentObj) => {
try {
await database.action(async () => {
const newStudent = await studentCollection.create(student => {
student.name = studentObj.name
student.age = studentObj.age
})
for (let contactObj of studentObj.contacts) {
try {
await contactCollections.create(contact => {
contact.student_id = newStudent.id
contact.type = contactObj.type
contact.contact = contactObj.contact
})
} catch (error) {
console.log(error);
}
}
})
} catch (error) {
console.log(error);
}
}
currently I'm getting an error
[WatermelonDB] The action you're trying to perform (unnamed) can't be performed yet, because there are 2 actions in the queue.
Current action: unnamed. Ignore this message if everything is working fine.
But if your actions are not running, it's because the current action is stuck.
Remember that if you're calling an action from an action, you must use subAction(). See docs for more details.
ANSWER
Answered 2020-Nov-08 at 17:08Yes you are right!. It will not work properly with multiple database create record requests together.
Whenever you make more than one change (create, delete or update records) in an action, you should batch them.
See: https://nozbe.github.io/WatermelonDB/Actions.html
You can do like that:
const batchActions = [];
for (let contactObj of studentObj.contacts) {
batchActions.push(
contactCollections.prepareCreate(contact => {
contact.student_id = newStudent.id
contact.type = contactObj.type
contact.contact = contactObj.contact
})
)
}
database.batch(batchActions)
Hope this will solve your problem
QUESTION
I have a single table created on WatermelonDB, in my React Native Android app. When I use batch to insert new records to the table, from a component, I get the error TypeError: Cannot read property 'id' of undefined
thrown inside batch.
This is where batch is called with a list of Promise
objects:
await database.action(async () => {
const allRecords = this.prepareInsertion(smsTransaction, records);
await database.batch(...allRecords);
console.log(allRecords.length);
});
prepareInsertion(smsTransaction, messages) {
return messages.map(async message => {
try {
return smsTransaction.prepareCreate(transaction => {
const parsedFields = parseFields(message);
transaction.type = parsedFields.type;
transaction.read_at = parsedFields.read_at;
});
} catch (e) {
console.log(e);
}
});
}
ANSWER
Answered 2020-Mar-12 at 12:11Issue was with the async keyword.
return messages.map(message => {
Models to be passed to database.batch, not Promises.
QUESTION
I have upgraded to React Navigation v5
in my app. I am using watermelondb in my app. While using ReactNavigationv4
, I used to pass the database props as follows
export const createNavigation = props =>
But in v5 do something as
const Stack = createStackNavigator({database});
ANSWER
Answered 2020-Feb-13 at 19:32You should use React context API to pass your database
to all screens: https://reactjs.org/docs/context.html
{/* ... */}
And then in your screens where you need the database, use:
const database = React.useContext(DatabaseContext);
Or for class components: https://reactjs.org/docs/context.html#classcontexttype
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
Install WatermelonDB
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page