Skip to content

Instantly share code, notes, and snippets.

View Stringsaeed's full-sized avatar
🏗️
building something that matters

Muhammed (Saeed) Ibrahim Stringsaeed

🏗️
building something that matters
66 followers · 343 following
View GitHub Profile
@Stringsaeed
Stringsaeed / ScreenContainer.tsx
Created June 9, 2023 00:28
React Native + Typescript
import React, { useMemo } from "react";
import {
ScrollView,
ScrollViewProps,
StyleSheet,
View,
ViewProps,
} from "react-native";
type BaseProps<T> = T extends "scroll"
@Stringsaeed
Stringsaeed / useGetFirstTime.js
Last active March 2, 2022 16:00
React Hook used for when user first time opens the app so if you want to show tutorial modal or load only onboarding stack in react-navigation & react-native
import { useCallback, useLayoutEffect, useState } from "react";
import { useAsyncStorage } from "@react-native-async-storage/async-storage";
const useGetFirstTime = () => {
const [firstTime, setFirstTime] = useState(false);
const { getItem, setItem } = useAsyncStorage("FirstTime");
const readItemFromStorage = useCallback(async () => {
const item = await getItem();
setFirstTime(!item);
}, [getItem]);
@Stringsaeed
Stringsaeed / setupJest.js
Created February 20, 2022 13:16
React Native setup jest
import 'react-native-gesture-handler/jestSetup';
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests();
jest.useFakeTimers();
jest.mock('react-native-reanimated', () => {
const Reanimated = require('react-native-reanimated/mock');
@Stringsaeed
Stringsaeed / AnimatedScrollHeader.tsx
Created February 19, 2022 20:17
Animated Scroll Header context using react native reanimated
// Animated Scroll Header Context
// imports react and Animated
import React, {createContext, useContext} from 'react';
import {clamp} from 'react-native-redash';
import {NativeScrollEvent, NativeSyntheticEvent, ViewStyle} from 'react-native';
import Animated, {
Extrapolate,
interpolate,
useAnimatedScrollHandler,
useAnimatedStyle,
@Stringsaeed
Stringsaeed / useFocusStatusBar.tsx
Created February 19, 2022 20:15
react native with react navigation focuse effect for status bar
import {useCallback} from 'react';
import {useFocusEffect} from '@react-navigation/native';
import {ColorValue, StatusBar, StatusBarStyle, Platform} from 'react-native';
const useFocusStatusBar = (
barStyle: StatusBarStyle = 'dark-content',
translucent: boolean = true,
backgroundColor: ColorValue = 'transparent',
): void => {
useFocusEffect(
@Stringsaeed
Stringsaeed / useAnimatedStatusBar.ts
Created February 19, 2022 20:14
react native animated status bar hook
import {StatusBar} from 'react-native';
import {useCallback} from 'use-memo-one';
import {useFocusEffect} from '@react-navigation/native';
import Animated, {runOnJS, useDerivedValue} from 'react-native-reanimated';
const updateStatusBarStyle = (
shared: Animated.SharedValue<number>,
maxNo: number,
) => {
'worklet';
@Stringsaeed
Stringsaeed / Fonts.ts
Created February 19, 2022 20:11
Generic Fonts to use across react native app
import {Platform, StyleSheet, TextStyle} from 'react-native';
import {getDesignSize} from '@utils';
type Weight = '700' | '600' | '500' | '400';
const fonts = new Map<Weight, string>([
['700' as const, Platform.select({default: '700' as const, android: 'Bold'})],
[
'500' as const,
@Stringsaeed
Stringsaeed / useScrollHandler.ts
Created February 19, 2022 20:09
react native reanimated scroll handler in y axies only
import {
useSharedValue,
useAnimatedScrollHandler,
} from 'react-native-reanimated';
const useScrollHandler = () => {
const scrollY = useSharedValue(0);
const onScroll = useAnimatedScrollHandler(event => {
scrollY.value = event.contentOffset.y;
});
@Stringsaeed
Stringsaeed / useRenderItem.tsx
Last active July 15, 2023 21:00
Render Item Hook to use in flatlists in react-native
import React, { useCallback } from "react";
import { ListRenderItem } from "react-native";
type BaseProps<T extends unknown> = {
item: T;
};
type UseRenderItemProps<T, P extends BaseProps<T>> = {
Component: React.ComponentType<P>;
componentProps: Omit<P, "item">;
@Stringsaeed
Stringsaeed / phone-validation.ts
Created February 19, 2022 20:07
Phone validation using google lib phone number
import {PhoneNumberUtil} from 'google-libphonenumber';
export const isPhoneNumber = (number?: string) => {
try {
if (!number) {
throw new Error('Phone number is required');
}
if (number.length < 4) {
throw new Error('Phone number is too short');
}