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 / 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";
@mmazzarolo
mmazzarolo / MyTextInput.js
Last active Oct 13, 2019
A simple wrapper on the React Native TextInput that fixes its ugly default Android style
View MyTextInput.js
import * as React from "react";
import { StyleSheet, TextInput } from "react-native";
const BLUE = "#428AF8";
const LIGHT_GRAY = "#D3D3D3";
class MyTextInput extends React.Component {
state = {
isFocused: false
};
@mmazzarolo
mmazzarolo / RadioButton.js
Last active Oct 13, 2019
Simple animated stateless React-Native radio button
View RadioButton.js
import React, { PropTypes } from 'react'
import { StyleSheet, TouchableOpacity } from 'react-native'
import { View } from 'react-native-animatable'
const DEFAULT_SIZE_MULTIPLIER = 0.7
const DEFAULT_OUTER_BORDER_WIDTH_MULTIPLIER = 0.2
const RadioButton = ({ size, innerColor, outerColor, isSelected, onPress, ...props }) => {
const outerStyle = {
borderColor: outerColor,
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 / hideOnScroll.js
Last active Jun 26, 2019
react-native-action-button hide on scroll
View hideOnScroll.js
// 1. Define a state variable for showing/hiding the action-button
state = {
isActionButtonVisible: true
}
// 2. Define a variable that will keep track of the current scroll position
_listViewOffset = 0
// 3. Add an onScroll listener to your listview/scrollview
<ListView
@mmazzarolo
mmazzarolo / CustomModal.js
Created May 25, 2016
React-Native animated modal (supports dismiss on backdrop touch and Android back button )
View CustomModal.js
import React, { Component, PropTypes } from 'react'
import { Dimensions, Modal, StyleSheet } from 'react-native'
import { View } from 'react-native-animatable'
const DEVICE_WIDTH = Dimensions.get('window').width
const DEVICE_HEIGHT = Dimensions.get('window').height
const DEFAULT_COLOR = '#001a33'
export default class CustomModal extends Component {
static propTypes = {
@mmazzarolo
mmazzarolo / Appfile
Created May 17, 2016
Simple Fastlane setup for React-Native (Android - iOS)
View Appfile
# iOS
app_identifier "com.myapp.app" # The bundle identifier of your app
apple_id "me@gmail.com" # Your Apple email address
team_id "1234ABCD" # Developer Portal Team ID
# Android
json_key_file "./google-play-api-secret.json" # Path to the json secret file - Follow https://github.com/fastlane/supply#setup to get one
package_name "com.myapp.app" # Your Android app package
@mmazzarolo
mmazzarolo / mobxLogger.js
Created May 30, 2016
While waiting for React-Native MobX devtools...
View mobxLogger.js
import mobx from 'mobx'
const DEFAULT_STYLE = 'color: #006d92; font-weight:bold;'
// Just call this function after MobX initialization
// As argument you can pass an object with:
// - collapsed: true -> shows the log collapsed
// - style -> the style applied to the action description
export const startLogging = ({ collapsed, style } = {}) => {
mobx.spy(event => {
You can’t perform that action at this time.