Skip to content

Instantly share code, notes, and snippets.

View athlete-coder's full-sized avatar

athlete-coder

View GitHub Profile
@athlete-coder
athlete-coder / PaginatedHorizontalList.v1.tsx
Last active September 29, 2022 13:53
Paginated Horizontal Scroll
// version 1
import React, { useRef, FC } from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { normalize } from 'src/utils/tools';
interface Props {
childrens: JSX.Element[];
}
const PaginatedHorizontalList: FC<Props> = ({ childrens }) => {
@athlete-coder
athlete-coder / App.ts
Last active July 12, 2022 13:35
React Native Notifications
//App.tsx in RN
///other imports
import messaging from '@react-native-firebase/messaging';
import notifee from '@notifee/react-native';
const App: FC<Props> = ({ storeToken }) => {
const requestFCMPermission = () => {
const authResponse = await messaging().requestPermission();
const enabled = authResponse === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL;
@athlete-coder
athlete-coder / app.ts
Last active June 9, 2022 14:04
Express Rate Limiter
import express from "express";
import rateLimit from "express-rate-limit";
import api from './src/api';
const app = express();
app.use(cors());
const apiLimiter = rateLimit({
windowMs: 1 * 60 * 1000, // 1 minutes
max: 100,
@athlete-coder
athlete-coder / Banner.tsx
Last active May 26, 2022 13:46
RN Svg Tutorial - Fireworks Componentd
import React, { useEffect, useRef, useState } from 'react';
import { Animated, StyleSheet, Easing, View } from 'react-native';
import Colors from '../constants/Colors';
import { normalizeWidth } from '../utils/styles';
import { StyledTextBold } from './StyledText';
import Fireworks from '../assets/svgs/Fireworks';
const AnimatedFireWorks = Animated.createAnimatedComponent(Fireworks)
export default () => {
@athlete-coder
athlete-coder / App.js
Last active May 7, 2022 14:47
App Redux Ex
import React, { useState } from 'react'
import Header from './Header'
import Body from './Body'
import Button from './Button'
export default () => {
return (
<>
<Header />
<Body />
@athlete-coder
athlete-coder / index.js
Last active May 7, 2022 14:37
Redux Set Up
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.jsx'
import store from './store';
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<App />
@athlete-coder
athlete-coder / App.js
Created May 7, 2022 14:08
Nested Contexts
import { createContext, useContext, useState } from "react";
const NumberContext = createContext();
const StringContext = createContext();
const Body = () => {
console.log("render Body");
return <></>;
};
@athlete-coder
athlete-coder / App.js
Last active May 7, 2022 14:54
Better Way useContext
import { createContext, useContext, useState } from "react";
const NumberContext = createContext();
/**
* Body component
* not subscribed to the context value
*/
const Body = () => {
console.log("render Body");
@athlete-coder
athlete-coder / App.js
Last active May 6, 2022 22:05
Bad Example Of UseContexts
import { createContext, useState } from "react";
const NumberContext = createContext();
const Body = () => {
console.log("render Body");
return <></>;
};
const Header = () => {