Skip to content

Instantly share code, notes, and snippets.

Avatar
🏗️
building something that matters

Muhammad Saeed Stringsaeed

🏗️
building something that matters
View GitHub Profile
@Stringsaeed
Stringsaeed / useGetFirstTime.js
Last active Mar 2, 2022
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
View useGetFirstTime.js
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 Feb 20, 2022
React Native setup jest
View setupJest.js
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 Feb 19, 2022
Animated Scroll Header context using react native reanimated
View AnimatedScrollHeader.tsx
// 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 Feb 19, 2022
react native with react navigation focuse effect for status bar
View useFocusStatusBar.tsx
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 Feb 19, 2022
react native animated status bar hook
View useAnimatedStatusBar.ts
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 Feb 19, 2022
Generic Fonts to use across react native app
View Fonts.ts
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 Feb 19, 2022
react native reanimated scroll handler in y axies only
View useScrollHandler.ts
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
Created Feb 19, 2022
Render Item Hook to use in flatlists in react-native
View useRenderItem.tsx
import React, {ComponentType} from 'react';
import {ListRenderItem} from 'react-native';
import {useCallback} from 'use-memo-one';
type BaseProps<ItemType> = {
item: ItemType;
};
const useRenderItem = <ItemType, P extends BaseProps<ItemType>>(
RenderItem: ComponentType<P>,
@Stringsaeed
Stringsaeed / phone-validation.ts
Created Feb 19, 2022
Phone validation using google lib phone number
View phone-validation.ts
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');
}
@Stringsaeed
Stringsaeed / pixel.ts
Last active Feb 19, 2022
Create a pixel perfect design in react native
View pixel.ts
import {Dimensions} from 'react-native';
const {height: SCREEN_HEIGHT, width: SCREEN_WIDTH} = Dimensions.get('window');
const designSize = {width: 390, height: 844};
const CURRENT_RESOLUTION = Math.sqrt(
SCREEN_HEIGHT * SCREEN_HEIGHT + SCREEN_WIDTH * SCREEN_WIDTH,
);
const DESIGN_RESOLUTION = Math.sqrt(
designSize.height * designSize.height + designSize.width * designSize.width,