WatermelonDB | 🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️ | Frontend Framework library

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}
        
    );
}

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

"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"
  }

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);
    }
}

[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.

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);
      }
    });
  }

export const createNavigation = props =>

const Stack = createStackNavigator({database});