Skip to content

Instantly share code, notes, and snippets.

View chanphiromsok's full-sized avatar
🎯
Focusing

Chanphirom Sok chanphiromsok

🎯
Focusing
  • Cambodia
  • 00:14 (UTC -12:00)
View GitHub Profile
@byteab
byteab / withBounce.tsx
Last active August 14, 2025 10:16
Achieve apple like spring motions with react native reanimated 3
import { withSpring } from 'react-native-reanimated'
export interface AppleSpringConfig {
duration?: number
bounciness?: number
velocity?: number
overshootClamping?: boolean
restSpeedThreshold?: number
restDisplacementThreshold?: number
}
@hardchor
hardchor / README.md
Last active October 29, 2025 01:54
Claude Task Master MCP in Github Copilot (VS Code)

Getting started with Claude Task Master in VS Code with Github Copilot:

  1. Follow the tutorial
    • I'm using pnpm / pnpx instead of npm / npx
    • Use the CLI for init, not the MCP yet
  2. After the initial setup:
    1. Copy all *.instructions.md files to .github/instructions/
    2. Copy the mcp.json file to .vscode/
  3. Launch Copilot Chat with something like Can you analyze the complexity of our tasks? or What tasks are available to work on next?
const { withAndroidManifest, withDangerousMod } = require("@expo/config-plugins");
const { mergeContents } = require("@expo/config-plugins/build/utils/generateCode");
const fs = require("node:fs");
const path = require("node:path");
/**
* Config plugin to add border radius to Android popup menus
* @param {import('@expo/config-types').ExpoConfig} config - Expo config
* @param {Object} options - Plugin options
* @param {number} [options.radius=14] - Border radius in dp
@okaybeydanol
okaybeydanol / SwipeableReanimated.tsx
Created February 21, 2025 21:57
RN: Swipeable Item with Reanimated 3 - Lightweight & Performant List Item with Swipe Actions
import React, {
forwardRef,
PropsWithChildren,
useImperativeHandle,
memo,
useMemo,
useCallback,
} from 'react';
import {
Gesture,
@ssalbdivad
ssalbdivad / ArkTypeVsZod.md
Last active November 3, 2025 02:03
ArkType/Zod Comparison

Here's a comparison between how the same simple user definition would be defined using ArkType and Zod:

image

ArkType's definition syntax is more concise (definitions are about 50% shorter on average) as well as making it more visually obvious what the inferred TypeScript type will be. The ability to infer TypeScript definitions directly is the same, but ArkType's syntax is again more concise by allowing you to use typeof on a property of arkUser directly instead of using an extra "infer" helper.

In general, we also have taken significant steps to optimize and clarify our type hints when hovering over validators. For example, in the case above, this is what you see when you mouse over "zodUser":

image

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.AppOpsManager;
import android.content.Context;
import android.content.Intent;
import android.text.TextUtils;
import java.lang.reflect.Method;
// MIUI. Redefining Android.
@esinanturan
esinanturan / README.md
Created March 29, 2022 21:27 — forked from cskeppstedt/README.md
Modify proguard rules in a managed expo project

Modify proguard rules in a managed expo project

If you ever need to modify the proguard rules for the Android-part of your Expo managed workflow, you can achieve this by using a config plugin.

  1. Make a folder for config-plugins called ./plugins in the project root folder.
  2. Place the withProguardRules.js and my-proguard-rules.pro in the folder
  3. Add the config plugin to the plugins array of your app.config.js (or app.json if you're using that instead).

NOTE: if you rename your .pro file, don't forget to change the two occurrences of my-proguard-rules in withProguardRules.js as well.

const { withDangerousMod, withPlugins } = require("@expo/config-plugins");
const {
mergeContents,
} = require("@expo/config-plugins/build/utils/generateCode");
const fs = require("fs");
const path = require("path");
async function readFileAsync(path) {
return fs.promises.readFile(path, "utf8");
}
@intergalacticspacehighway
intergalacticspacehighway / viewability-tracker-flatlist.tsx
Last active July 24, 2025 06:38
Viewability tracker with shared values
import { createContext, forwardRef, useCallback, useMemo } from "react";
import { FlatList, FlatListProps, ViewToken } from "react-native";
import Animated, { useSharedValue } from "react-native-reanimated";
const MAX_VIEWABLE_ITEMS = 4;
type ViewabilityItemsContextType = string[];
export const ViewabilityItemsContext = createContext<
Animated.SharedValue<ViewabilityItemsContextType>
import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import React from 'react';
import Animated, { useSharedValue, withRepeat, useAnimatedStyle, withTiming } from 'react-native-reanimated'
const App: () => React$Node = () => {
const animation = useSharedValue(1)
const animationStyle = useAnimatedStyle(() => {
return {
transform: [