Ricky Almeida rickyalmeidadev

👨‍💻

Learning something new everyday

Software Developer

rickyalmeidadev / App.styles.ts

Last active December 25, 2021 01:48

Reactive styles based on user’s color scheme in React Native

	import makeStyles from '@app/helpers/make-styles'

	const useStyles = makeStyles(theme => ({
	container: {
	flex: 1,
	justifyContent: 'center',
	alignItems: 'center',
	backgroundColor: theme.bg,
	},
	text: {

rickyalmeidadev / GridList.js

Last active December 17, 2021 00:22

React Native GridList using FlatList

	import * as React from 'react'
	import {FlatList, useWindowDimensions, View} from 'react-native'

	const GridList = ({numColumns, renderItem, spacing, ...props}) => {
	const dimensions = useWindowDimensions()

	return (
	<FlatList
	numColumns={numColumns ?? 2}
	renderItem={(...args) => (

rickyalmeidadev / use-focus.js

Last active November 22, 2021 02:18

useFocus and useRefs hooks for React and React Native forms

	import {useCallback} from 'react'

	const useFocus = refs => {
	const focus = useCallback(
	name => {
	refs?.[name]?.current?.focus?.()
	},
	[refs]
	)

rickyalmeidadev / script.js

Created November 13, 2021 04:38

Codegen for src/components/index.js exports

	// scripts/codegen/components.js

	const fs = require('fs')
	const path = require('path')

	const header = '/*\n This file is generated. Do not edit.\n */\n'
	const code = fs
	.readdirSync(path.join(__dirname, '..', '..', 'src', 'components'))
	.filter(filename => !filename.endsWith('.js'))
	.map(filename => `export {default as ${filename}} from './${filename}/${filename}'`)

rickyalmeidadev / .eslintrc.json

Created November 9, 2021 12:33

Vite React configuration

	{
	"extends": [
	"eslint:recommended",
	"plugin:react/recommended",
	"plugin:react/jsx-runtime",
	"plugin:@typescript-eslint/recommended",
	"plugin:prettier/recommended"
	],
	"plugins": ["react", "@typescript-eslint", "prettier"],
	"settings": {

rickyalmeidadev / add-pre-commit-hook.md

Last active October 23, 2021 01:29

Adding Pre Commit Hook

npx mrm@2 lint-staged

rickyalmeidadev / make-graphql-client.d.ts

Last active September 8, 2021 17:43

GraphQL client factory for Next.js

	export type GraphQLQuery = string

	export type GraphQLMutation = string

	export type Variables = {
	[key: string]: any
	}

	type QueryBody = {
	query: GraphQLQuery

rickyalmeidadev / create-store.js

Created July 4, 2021 09:18

Simple implementation of Redux

	const createStore = reducer => {
	let state
	let listeners = []

	const getState = () => state
	const dispatch = action => {
	state = reducer(state, action)
	listeners.forEach(listener => listener())
	}
	const subscribe = listener => {

rickyalmeidadev / config.js

Last active July 3, 2021 19:35

Adds a menu item to clear AsyncStorage in DevSettings

	import { DevSettings, Platform, ToastAndroid } from 'react-native'
	import AsyncStorage from '@react-native-async-storage/async-storage'
	import Snackbar from 'react-native-snackbar'

	DevSettings.addMenuItem('Clear AsyncStorage', async () => {
	const keys = await AsyncStorage.getAllKeys()
	await AsyncStorage.multiRemove(keys.filter(key => !key.includes('@REACTOTRON')))
	const message = 'AsyncStorage has been cleared'
	if (Platform.OS === 'android') {
	ToastAndroid.show(message, ToastAndroid.SHORT)

rickyalmeidadev / scrollbar.css

Created June 24, 2021 21:30

A Beatiful Scrollbar