Watermelondb with TypeScript

  javascript, react-native, typescript, watermelondb

I am building a React App and I wish to use Watermelondb for Offline Storage, but I don`t know how to use it with TypeScript. I have created the database and my Course and Lesson model files from Watermelondb library. In my App.tsx I have used the Database provider as follows:

import 'react-native-gesture-handler';
import React from 'react';
import { View, StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import DatabaseProvider from '@nozbe/watermelondb/DatabaseProvider';

import database from './database/index.js';

import AppProvider from './hooks';

import Routes from './routes';

const App: React.FC = () => (
  <NavigationContainer>
    <StatusBar barStyle="light-content" backgroundColor="#6548A3" translucent />
    <DatabaseProvider database={database}>
      <AppProvider>
      <View style={{ flex: 1, backgroundColor: '#6548A3' }}>
        <Routes />
      </View>
    </AppProvider>
    </DatabaseProvider>
  </NavigationContainer>
);

export default App;

Then I get a Typescript error in my functional component:

import React from 'react';
import { View } from 'react-native';
const Dashboard: React.FC = ({courses, lessons}) => {
return (
    <View>
    </View>
  );
}

In courses and lessons I get the following error:

Property does not exist on type ‘{ children?: ReactNode; }’

How can I use TypeScript to solve these errors?

Source: Ask Javascript Questions

LEAVE A COMMENT