DEV Community: Vinícius Pacheco Vieira

Setup TypeORM with React-Native

Vinícius Pacheco Vieira — Sat, 30 May 2020 22:01:58 +0000

Setup TypeORM with React-Native

Offline first apps in react-native can be intimidating. One of the options available is to use TypeORM with sqlite.
I've faced a great amount of trouble trying to successfully setup TypeORM with React-Native and this is my attempt to help.
This tutorial will be based on a React-Native version higher than 0.60.
In this tutorial, I'll assume you are using a React-Native project using "react-native init" and with a minimal typescript setup.
I'll use the entity models from typeorm example to make things simple.

Install react-native-sqlite-storage

The first step will be to install the package:



yarn add react-native-sqlite-storage && cd ios && pod install && cd ..

Notice I've set the pod installation with the command above so everything should be setup after the command finished.

TypeORM

Setting typeorm can be frustrating because of the latest updates and few threads about last react-native versions.
Let's begin by installing the lib and its dependencies:



yarn add typeorm



yarn add -D @types/node @babel/plugin-proposal-decorators babel-plugin-transform-typescript-metadata

Both babel plugins are required due to the annotations used by typeorm in the entities files to describe column types.

Add both plugins to your babel.config.js:



module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'babel-plugin-transform-typescript-metadata',
    ['@babel/plugin-proposal-decorators', {legacy: true}],
  ],
};

Now add/change the following properties in your tsconfig.json file:



{
    "strict": false,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "skipLibCheck": true
}

Great now the build setup is ready, let's add some code related to typeorm .
First I'll add the three entities as shown in the official typeorm example, which are: Author, Posts, Category.
In case you want to copy here they are:



import {
  Entity,
  Column,
  PrimaryGeneratedColumn,
  OneToMany,
} from 'typeorm/browser';
import {Post} from './post';

@Entity('author')
export class Author {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @Column({nullable: true})
  birthdate: string;

  @OneToMany((type: any) => Post, (post) => post.author)
  posts: Post[];
}



import {Entity, PrimaryGeneratedColumn, Column} from 'typeorm/browser';

@Entity('category')
export class Category {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;
}



import {
  Entity,
  PrimaryGeneratedColumn,
  Column,
  ManyToMany,
  JoinTable,
  ManyToOne,
} from 'typeorm/browser';
import {Category} from './category';
import {Author} from './author';

@Entity('post')
export class Post {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  title: string;

  @Column('text')
  text: string;

  @ManyToMany((type) => Category, {
    cascade: ['insert'],
  })
  @JoinTable()
  categories: Category[];

  @ManyToOne((type) => Author, (author) => author.posts, {
    cascade: ['insert'],
  })
  author: Author;
}

In our main component, I've added two methods to help creating a connection with our sqlite database, and a second one to retrieve all authors from it.



import React, { useCallback, useEffect, ReactNode, useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';

import { createConnection, getRepository, Connection } from 'typeorm/browser';

import { Author } from './entities/author';
import { Category } from './entities/category';
import { Post } from './entities/post';

const AuthorTile = ({
  name,
  birthdate,
}: {
  name: string;
  birthdate: string;
}) => {
  return (
    <View>
      <Text>{name}</Text>
      <Text>{birthdate}</Text>
    </View>
  );
};

const App: () => ReactNode = () => {
  const [defaultConnection, setconnection] = useState<Connection | null>(null);
  const [authors, setAuthors] = useState<Author[]>([]);
  const setupConnection = useCallback(async () => {
    try {
      const connection = await createConnection({
        type: 'react-native',
        database: 'test',
        location: 'default',
        logging: ['error', 'query', 'schema'],
        synchronize: true,
        entities: [Author, Category, Post],
      });
      setconnection(connection);
      getAuthors();
    } catch (error) {
      console.log(error);
    }
  }, []);

  const getAuthors = useCallback(async () => {
    const authorRepository = getRepository(Author);
    let result = await authorRepository.find();
    if (result.length === 0) {
      const newAuthor = new Author();
      newAuthor.birthdate = '10-03-1940';
      newAuthor.name = 'Chuck Norris';
      await authorRepository.save(newAuthor);
      result = await authorRepository.find();
    }    
    setAuthors(result);
  }, []);

  useEffect(() => {
    if (!defaultConnection) {
      setupConnection();
    } else {
      getAuthors();
    }
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My List of Authors</Text>
      {authors.map((author) => (
        <AuthorTile key={author.id.toString()} {...} />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: { fontSize: 16, color: 'black' },
});

export default App;

Notice that the type of connection needs to be "type: 'react-native'".

SetupConnection: creates a valid typeorm connection to a database called 'test'. This can be changed.
Synching is a development property that will drop and create your database every run. My suggestion is to implement your own forceSync method.

The getAuthors callback is where the typeorm repository magic appears. For the sake of the tutorial I've inserted a minimum SQL insert to have something to show:



 const getAuthors = useCallback(async () => {
    const authorRepository = getRepository(Author);
    let result = await authorRepository.find();
    if (result.length === 0) {
      const newAuthor = new Author();
      newAuthor.birthdate = '10-03-1940';
      newAuthor.name = 'Chuck Norris';
      await authorRepository.save(newAuthor);
      result = await authorRepository.find();
    }    
    setAuthors(result);
  }, []);

If everything went well the result should be:

If you had any problems check the github project repository or feel free to send me a message.

How to use svg files in React-Native with Typescript

Vinícius Pacheco Vieira — Sun, 19 Apr 2020 02:22:32 +0000

I've faced some struggle using svg files with React-Native so I decided to give my 2 cents on how to configure it without headaches.
The idea for it is that with typescript I've had some trouble doing the whole setup so I thought it could be a good idea to document my exact steps.

For this tutorial I'll use react-native-svg for svg files and use 0.60+ version of React-Native.

Steps

Setup from Scratch
Svg setup

Setup from Scratch

Let's start with a blank new project and setup all the way until importing and using svg modules into an app.



react-native init myappwithsvg

Now to add typescript to the project:



yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
# or for npm
npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer

Next we need to create a tsconfig.json file and add:



{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

Create a separate jest.config.js file:



module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

And finally change the App.js to App.tsx. From this step forward we are done setting up typescript and we can go to the second step that is to setup the svg modules that allow us to use svg files.

Svg setup

We will install two libraries, react-native-svg and react-native-svg-transformer and configure one after another.
Let's start installing the react-native-svg:



yarn add react-native-svg

Install the pod related to it:



cd ios && pod install

Now we need to install the react-native-svg-transformer to make react-native able to import those files:



yarn add -D react-native-svg-transformer

Replace the metro.config.js code with:



const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

If you try to import files from here you will be able but typescript will give you ts error saying that your svg file could not be found.
Create a declarations.d.ts file in the root of your project if you don't have yet. Paste the following code:



declare module "*.svg" {
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

Now we can import svg files just like normal javascript modules. Create a separate folder named assets in your project root and save the dragon svg. Rename the file to dragon.svg to make it easier to import.

Now you can import your files and use all feature [react-native-svg] provides to svg files. Here is my example from the dragon file:



/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {ReactNode} from 'react';
import {SafeAreaView, StyleSheet, View, StatusBar} from 'react-native';
import DragonSvg from './assets/dragon.svg';

const App: () => ReactNode = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={styles.body}>
          <DragonSvg height={400} width={400} fill="blue" />
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  body: {
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
});

export default App;

Running our app on a simulator should result:

The full code of this tutorial is in my github repository here. Now your app is capable of importing svg files correctly with Typescript!