Skip to content

Instantly share code, notes, and snippets.

🍉
Hey there! I am using GitHub.

Matteo Mazzarolo mmazzarolo

🍉
Hey there! I am using GitHub.
Block or report user

Report or block mmazzarolo

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@mmazzarolo
mmazzarolo / elevations.ts
Last active Nov 21, 2019
React-Native cross platform elevation definitions
View elevations.ts
/**
* React-Native cross-platform elevations.
* Based on https://ethercreative.github.io/react-native-shadow-generator/
*
* Usage:
* 1. Import "elevations" from this file
* import { elevations } from "config/elevations";
* 2. Use it. Assuming you need an elevation of 2 (based on the Android
* elevation standard), doing the following will cast the same shadow
* on both platforms:
@mmazzarolo
mmazzarolo / useAnimation.ts
Last active Nov 20, 2019
A basic "useAnimation" hook for React-Native animations
View useAnimation.ts
import { useEffect, useState } from "react";
import { Animated, Easing } from "react-native";
interface Params {
autoStart?: boolean;
config?: Partial<Animated.TimingAnimationConfig>;
initialValue?: number;
reverse?: boolean;
}
@mmazzarolo
mmazzarolo / useObservableAnimation.js
Created Nov 13, 2019
Animate React-Native components based on MobX observables changes
View useObservableAnimation.js
import { useEffect, useState } from "react";
import { Animated, Text, View } from "react-native";
import { reaction } from "mobx";
import { observer } from "mobx-react";
const defaultCheckObservedValue = observed => observed.visible;
const defaultCreateAnimationIn = animValue =>
Animated.timing(animValue, {
toValue: 1,
@mmazzarolo
mmazzarolo / store.ts
Last active Nov 10, 2019
Puzzle Game logic
View store.ts
import {
LayoutRectangle,
LayoutChangeEvent,
GestureResponderEvent
} from "react-native";
import { createContext, useContext } from "react";
import { observable, action, computed } from "mobx";
import { takeWhile, takeRightWhile, sortBy, intersectionBy } from "lodash";
const isOppositeDirectionOf = (dir1: string, dir2: string) => {
@mmazzarolo
mmazzarolo / watch.js
Created Oct 19, 2019
Develop a browser extension with live-reloading using Create React App without ejecting
View watch.js
#!/usr/bin/env node
// A script for developing a browser extension with live-reloading
// using Create React App (no need to eject).
// Run it instead of the "start" script of your app for a nice
// development environment.
// P.S.: Install webpack-extension-reloader before running it.
// Force a "development" environment in watch mode
process.env.BABEL_ENV = "development";
View charles-command-line-options.md

Charles command-line options

Charles supports a few command line options out of the box, documented here.
Unfortunately they seem to operate only as parameters for new Charles sessions, so you won't be able to run commands on a running instance of Charles.

Start a specific Charles session

A Charles session contains all of your recorded information. It is represented by the Session window; by default a new session is automatically created when you start Charles.
Sessions can be saved from File → Save Session (+S).
Once saved, if you want you can start Charles from the saved session by running:

@mmazzarolo
mmazzarolo / useKeyboardPress.ts
Created Dec 30, 2018
A React hook for handling keypresses
View useKeyboardPress.ts
import { useState, useEffect, useRef } from "react";
interface Parameters {
key: string;
ctrlKey?: boolean;
shiftKey?: boolean;
metaKey?: boolean;
onKeyDown?: (e: KeyboardEvent) => void;
onKeyUp?: (e: KeyboardEvent) => void;
}
View run-scrcpy.sh
if pgrep scrcpy; then
osascript -e 'tell application "System Events" to tell process "scrcpy"' \
-e 'set frontmost to true' \
-e 'if windows is not {} then perform action "AXRaise" of item 1 of windows' \
-e 'end tell'
else
/usr/local/bin/scrcpy
fi
@mmazzarolo
mmazzarolo / MainActivity.java
Created Dec 13, 2018
Fresco/Picasso comparison on images with a dimension > 2048px
View MainActivity.java
package com.example.matteomazzarolo.imagetest;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
@mmazzarolo
mmazzarolo / big-images-in-android-rn.js
Created Dec 1, 2018
Image decoding limit workaround for RN (Android)
View big-images-in-android-rn.js
export default class CroppedImage extends Component {
state = {
croppedImageSources: []
};
async componentDidMount() {
const crops = 4;
const croppedImageHeight = imHeight / crops;
const croppedImageSources = [];
for (let i = 0; i <= crops; i++) {
You can’t perform that action at this time.