DEV Community: saasprokit

React Native know issues

saasprokit — Wed, 14 Oct 2026 09:09:49 +0000

TextInput: read-only text that can't scroll on Android

Issue: On Android, a read-only multiline TextInput does not scroll. If the text is taller than the box, the rest is hidden and the user cannot drag to it. The same code scrolls fine on iOS.

<TextInput
  multiline
  readOnly
  scrollEnabled
  value={transcript}
  style={{ maxHeight: 150 }}
/>

Fix: a TextInput wrapper

We wrapped TextInput in one small component. When the field is multiline and read-only, it renders a ScrollView with a Text inside, in the same box. Otherwise it renders a normal TextInput.

import React from 'react'
import { ScrollView, StyleSheet, Text, TextInput } from 'react-native'
import type { TextInputProps, TextStyle } from 'react-native'

// Android disables a read-only TextInput, and a disabled view can't scroll.
// So read-only multiline text renders as a ScrollView + Text instead.
export function TextArea(props: TextInputProps) {
  const { multiline, readOnly, editable = true, value, style, testID } = props

  if (!multiline || (!readOnly && editable)) {
    return <TextInput {...props} />
  }

  const flat: TextStyle = StyleSheet.flatten(style) ?? {}
  const {
    padding, paddingVertical, paddingHorizontal,
    paddingTop, paddingBottom, paddingLeft, paddingRight,
    color, fontSize, fontFamily, fontWeight, lineHeight, textAlign,
    ...boxStyle
  } = flat

  return (
    <ScrollView
      testID={testID}
      style={boxStyle}
      contentContainerStyle={{
        padding, paddingVertical, paddingHorizontal,
        paddingTop, paddingBottom, paddingLeft, paddingRight,
      }}
      nestedScrollEnabled
    >
      <Text selectable style={{ color, fontSize, fontFamily, fontWeight, lineHeight, textAlign }}>
        {value}
      </Text>
    </ScrollView>
  )
}

Javascript/Typescript improve performance for sorting

saasprokit — Mon, 28 Sep 2026 04:46:20 +0000

// 1. Decorate: Compute the heavy operation exactly ONCE per item

const decorated = items.map(item => ({
    item,
    sortKey: heavyParsingOperation(item.dateStr) // e.g., Date.parse()
}));

// 2. Sort: Fast, lightweight numeric comparison

decorated.sort((a, b) => a.sortKey - b.sortKey);

// 3. Undecorate: Extract original items

const sortedItems = decorated.map(entry => entry.item);

[4][DEV NOTE] NextJS server actions and Prisma

saasprokit — Mon, 04 Sep 2023 02:36:52 +0000

Server actions

React Hook Form

Create

Get

Update

Delete

[3][DEV NOTE] Create a form with tiptap and react-textarea-autosize

saasprokit — Mon, 04 Sep 2023 02:04:18 +0000

This is dev note for this project: turbo - nextjs - prisma - postgres blog

Target of this part:

Integrate shadcn-ui
Minor update for postcss and tailwindcss
Create a form with react-textarea-autosize and tiptap

Install

Integrate `shadcn-ui`

shadcn-ui is one of the most famous UI libraries now. So that I decide to integrate with my project.
Just a simple command we can integrate shadcn as follow:

cd app/web
npx shadcn-ui@latest init

After initial shadcn-ui, we can see a lot of changes as this commit: Initial shadcn-ui
.
These are some important changes:

tailwind.config.js and globals.css are overrided
folded @/ is added

Install `react-textarea-autosize` and `tiptap`

In the root folder, we will install: react-textarea-autosize, and tip-tap as follow:

pnpm add react-textarea-autosize --filter web
pnpm add @tiptap/extension-character-count @tiptap/extension-highlight @tiptap/extension-placeholder @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/pm @tiptap/react @tiptap/starter-kit --filter web

I aslo will use remixicon for icons:

pnpm add remixicon --filter web

Update post-css and tailwindcss

PostCss for build-time imports and postcss-nesting for nested declarations:

pnpm add -D postcss-nesting postcss-import

Add Input title with `react-textarea-autosize`

apps/web/@/molecules/InputTitle.tsx

"use client";

import TextareaAutosize from "react-textarea-autosize";

type InputTitleProps = {
  title?: string;
  placeholder?: string;
};

const InputTitle: React.FunctionComponent<InputTitleProps> = ({
  title = "",
  placeholder = "",
}) => {
  return (
    <div className="w-full">
      <TextareaAutosize
        autoFocus
        value={title}
        placeholder={placeholder}
        className="w-full h-16 px-3 py-2 text-4xl font-bold text-gray-700 border-none placeholder-gray-500 border border-gray-300 rounded-md focus:outline-none"
      />
    </div>
  );
};

export default InputTitle;

Add `tiptap` to nextjs

To integrate tip to nextjs we need to have many step, you can refer in apps/web/@/molecules/Editor folder,

apps/web/@/molecules/Editor/index.tsx

"use client";

import React from "react";

import CharacterCount from "@tiptap/extension-character-count";
import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Placeholder from "@tiptap/extension-placeholder";

import "./index.css";
import MenuBar from "./MenuBar";

type EditorProps = {
  content?: string;
  placeholder?: string;
};

export default ({ content = "", placeholder = "" }: EditorProps) => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      CharacterCount.configure({
        limit: 10000,
      }),
      Placeholder.configure({
        placeholder,
      }),
    ],
    content,
  });

  return (
    <div className="w-full editor p-3 h-full">
      {editor && <MenuBar editor={editor} />}
      <EditorContent editor={editor} />
    </div>
  );
};

Create post page

apps/web/app/user/post/create/page.tsx

"use client";

import React from "react";

import CharacterCount from "@tiptap/extension-character-count";
import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Placeholder from "@tiptap/extension-placeholder";

import "./index.css";
import MenuBar from "./MenuBar";

type EditorProps = {
  content?: string;
  placeholder?: string;
};

export default ({ content = "", placeholder = "" }: EditorProps) => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      CharacterCount.configure({
        limit: 10000,
      }),
      Placeholder.configure({
        placeholder,
      }),
    ],
    content,
  });

  return (
    <div className="w-full editor p-3 h-full">
      {editor && <MenuBar editor={editor} />}
      <EditorContent editor={editor} />
    </div>
  );
};

Reference:

[1] Tiptap: I follow this example collaborative-editing
[2] react-textarea-autosize: Quite simple, just follow the example here
[3] Post css preprocessor

You can find the result in this PR: [feat][UI] Create post page

[2][DEV NOTE] Integrate prisma and postgres database

saasprokit — Tue, 22 Aug 2023 14:33:04 +0000

This is dev note for this project: turbo - nextjs - prisma - postgres blog

[1][DEV NOTE] Initial turbo project and add tailwindcss library

Add prisma by add new database package
Docker postgres database
Import and use database package inside web app

1. Environment

In this project, I will use postgres database. I used docker to install postgres database on my local machine as follow:
Create docker-compose.yml in the root folder:

# Use postgres/example user/password credentials
version: "3.1"

services:
  db:
    image: postgres
    restart: always
    environment:
      POSTGRES_PASSWORD: example
    ports:
      - 5432:5432

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080

It's including postgres database and adminer.

In the next sections, I mainly follow this tutorial: Using Prisma with Turborepo

So that you can skip this part :]]]

Create `database` package

Create packages/database/package.json:

{
  "name": "database",
  "version": "0.0.0",
  "dependencies": {
    "@prisma/client": "latest"
  },
  "devDependencies": {
    "prisma": "latest"
  },
  "scripts": {
    "db:generate": "prisma generate",
    "db:push": "prisma db push --skip-generate"
  },
  "main": "./index.ts",
  "types": "./index.ts"
}

Create packages/database/index.ts:

export * from "@prisma/client";

Create packages/database/prisma/schema.prisma:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String   @db.VarChar(255)
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

model Profile {
  id     Int     @id @default(autoincrement())
  bio    String?
  user   User    @relation(fields: [userId], references: [id])
  userId Int     @unique
}

model User {
  id      Int      @id @default(autoincrement())
  email   String   @unique
  name    String?
  posts   Post[]
  profile Profile?
}

Create packages/database/.gitignore:

node_modules
# Keep environment variables out of version control
.env

Important: You need to update the DATABASE_URL variable in your .env file example.

Run prisma init

cd to database package

cd packages/database

After that, it will generate these files:

packages/database/.gitignore
packages/database/prisma/schema.prisma
packages/database/.env

Add database's scripts to turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^db:generate", "^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "lint": {},
    "dev": {
      "dependsOn": ["^db:generate"],
      "cache": false,
      "persistent": true
    },
    "db:generate": {
      "cache": false
    },
    "db:push": {
      "cache": false
    },
    "db:migrate": {
      "cache": false
    }
  }
}

Then we can migrate the database as follow

turbo db:migrate -- --name init

After run this command line, prisma will generate a migration.sql file and create a database in the postgres.

Install `packages/database` into `web` app

Like part 1, we can install packages/database into web app by:

pnpm add --save-dev database@workspace --fitler web

At this time, we installed prisma and configured database packaged successfully.
Now we continue to next part: Read/Write data with prisma

Finally

Now, you can import and use Prisma in the web app:

Example:

import { PrismaClient } from "database";

export default async function Page() {
  const prisma = new PrismaClient();

  const allPosts = await prisma.post.findMany();

  return (
    <div className="h-full flex justify-center items-center">
      <h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-pink-400 to-red-600">
        CODE FOR STARTUP.
      </h1>

      {allPosts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

Next part, I will implement the creating and listing posts with Prisma.

Reference

[1] Mainly on this tutorial: Using Prisma with Turborepo
[2] Prisma getting started

[1][DEV NOTE] Initial turbo project and add tailwindcss library

saasprokit — Tue, 22 Aug 2023 12:58:17 +0000

This is dev note for this project: turbo - nextjs - prisma - postgres blog

Prepare environments

ENV: node v16.20.1
In this project, I use pnpm. So that we need to install pnpm by:

npm install pnpm -g

Init project

Firstly, we need to create project by this command:
pnpm dlx create-turbo@lasted

Enter project name: "codeforstartup"

Start project

turbo dev

Add `tailwindcss`

Add `tailwind-config` package

Under packages folder, create tailwind-config folder.
Under tailwind-config folder create: File packages/tailwind-config/package.json

{
  "name": "tailwind-config",
  "version": "0.0.0",
  "private": true,
  "main": "index.js",
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

File packages/tailwind-config/tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
    content: [
        // app content
        "./app/**/*.{js,ts,jsx,tsx}"
        // include packages if not transpiling
        // "../../packages/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Nice. You added tailwind-config successfully. Now we need to install it by:
pnpm install

Install `tailwindcss` and `tailwind-config` for web app

To config tailwindcss for web app, we need to install following package:
pnpm add tailwindcss postcss autoprefixer --filter web

To install tailwind-config package for web, we can use this command:
pnpm add --save-dev tailwind-config@workspace --filter web

Create apps/web/postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Create apps/web/tailwind.config.js:

const sharedConfig = require("tailwind-config/tailwind.config.js");

module.exports = {
    presets: [sharedConfig],
};

Create apps/web/app/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

In the apps/web/app/layout.tsx, import this line:

import "./global.css";

Now, we install tailwind css successfully for turbo project.

Reference

[1] For more detail, you can referent this Pull request: [feat] Add tailwind css package
[2] Turbo official example
[3] Create new turbo project
[4] Install package for turbo project

DEV Community: saasprokit

React Native know issues

TextInput: read-only text that can't scroll on Android

Javascript/Typescript improve performance for sorting

[4][DEV NOTE] NextJS server actions and Prisma

React Hook Form

Create

Get

Update

Delete

[3][DEV NOTE] Create a form with tiptap and react-textarea-autosize

Install

Integrate shadcn-ui

Install react-textarea-autosize and tiptap

Update post-css and tailwindcss

Add Input title with react-textarea-autosize

Add tiptap to nextjs

Create post page

Reference:

[2][DEV NOTE] Integrate prisma and postgres database

1. Environment

Create database package

Run prisma init

Add database's scripts to turbo.json

Install packages/database into web app

Finally

Reference

[1][DEV NOTE] Initial turbo project and add tailwindcss library

Prepare environments

Init project

Start project

Add tailwindcss

Add tailwind-config package

Install tailwindcss and tailwind-config for web app

Reference

Integrate `shadcn-ui`

Install `react-textarea-autosize` and `tiptap`

Add Input title with `react-textarea-autosize`

Add `tiptap` to nextjs

Create `database` package

Install `packages/database` into `web` app

Add `tailwindcss`

Add `tailwind-config` package

Install `tailwindcss` and `tailwind-config` for web app