PiashCSE

Mehedi Hassan Piash | Senior Software Engineer | Android | iOS | KMP | Ktor | Jetpack Compose | React-Native.

October 31, 2024

Room Database in Jetpack Compose: A Step-by-Step Guide for Android Development

October 31, 2024 Posted by Piash , , , , , No comments

 Room Database is part of Android’s Architecture Components and serves as an abstraction layer over SQLite. It simplifies data management by offering a type-safe way to interact with the database and enables compile-time checks of SQL statements.

Key Components of Room Database

1. Entity: Represents a table in your database.

2. DAO (Data Access Object): Contains methods for accessing the database.

3. Database Class: Acts as the main access point to the underlying SQLite database.

Step 1: Add Dependencies

To get started, include the Room dependencies in your libs.versions.toml file:

Include the Room dependencies in your app build.gradle. file:

Include the Room dependencies in your project build.gradle. file:

Step 2: Define an Entity

An Entity represents a table within the database. Define your entity as a data class, with each property corresponding to a column.

In this above code:

• @Entity marks this class as a Room entity.

  • @PrimaryKey denotes the primary key for this entity. Here, autoGenerate automatically assigns a unique ID for each User.

Step 3: Create a DAO

The DAO (Data Access Object) interface contains methods for accessing the database. Use SQL queries to define how data should be inserted, updated, retrieved, or deleted.

Each method is annotated with a specific Room operation (@Insert, @Update, @Delete, @Query) to specify the desired action.

Step 4: Create the Database Class

The Database class should be an abstract class extending RoomDatabase. Use the @Database annotation to specify the entities and database version.

if you have a nested data class inside Entity you have to add TypeConverter

Step 5: Build the Database

To build the database, use Room’s databaseBuilder method. This is typically done in your Application class or a dependency injection setup like Hilt.

Or, with Hilt:

Step 6: Perform Database in ViewModel

Step 7: Perform Database in Jetpack UI

Step 8: Here is the final result

Github: https://github.com/piashcse/Hilt-MVVM-Compose-Movie
Medium: https://piashcse.medium.com/room-database-in-jetpack-compose-a-step-by-step-guide-for-android-development-6c7ae419105a

October 20, 2024

ESLint and Prettier configuration for React-Native and Expo

October 20, 2024 Posted by Piash , , , , No comments

 Setting up ESLint and Prettier in your React Native or Expo project is essential for maintaining consistent code quality and style. ESLint helps identify and fix problematic code patterns, while Prettier ensures your code is formatted consistently across the entire team. In this guide, we’ll walk through configuring ESLint and Prettier for a React Native/Expo project step-by-step.

Step 1: Create a New React Native or Expo Project

npx react-native init expo-museum 
npx create-expo-app expo-museum

Navigate to your project directory:

cd expo-museum

Step 2: Install ESLint and Prettier
Remove the previous ESLint configuration:

npm uninstall @react-native-community/eslint-config eslint

Add ESLint and Prettier as development dependencies:

npm install eslint prettier --save-dev

Additionally, you’ll need some ESLint plugins for React Native and Prettier integration:

npm install eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-native - save-dev

Step 3: Initialize ESLint
Run the following command to initialize ESLint and generate a configuration file:

npx eslint - init

Follow the prompts as outlined below:

Step 4: Add ESLint configuration
Add the given configuration to the newly created eslint.config.js

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import prettierConfig from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';

export default [
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  prettierConfig, // Disables conflicting ESLint rules with Prettier
  {
    ignores: ['node_modules/', 'android/', 'ios/', 'build/'],
    plugins: { prettier: prettierPlugin }, // Register the Prettier plugin
    rules: {
      'react/react-in-jsx-scope': 'off',
      'no-unused-vars': 'warn',
      'react-native/no-inline-styles': 'off',
      'prettier/prettier': 'error', // Enforce Prettier rules
    },
    settings: {
      react: {
        version: 'detect', // Automatically detect React version
      },
    },
  },
];

Step 5: Create Prettier Configuration
Create a .prettierrc file in the root of your project:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "useTabs": false
}

Create a .prettierignore file in the root of your project:

node_modules/
android/
ios/
build/

Step 6: Add Scripts for ESLint and Prettier
Update your package.json with scripts to run ESLint and Prettier:

"lint": "npx eslint .",
"lintFixAll": "npx eslint '**/*.{js,jsx,ts,tsx}' --fix",
"prettierFixAll": "npx prettier --write '**/*.{js,jsx,ts,tsx,json,md}'",
"fix:lintPrettier": "npm run prettierFixAll && npm run lintFixAll"

Step 7: Test your configuration by running the script in your terminal

npm run lint 
npm run lintFixAll
npm run prettierFixAll
npm run fix:lintPrettier

Here is the result you will get and change your configuration according to your needs 🙂 Happy coding.

GitHub Link: https://github.com/piashcse/expo-museum
Medium: https://piashcse.medium.com/eslint-and-prettier-configuration-for-react-native-and-expo-cbe333bd3421