Skip to content

Instantly share code, notes, and snippets.


Satyajit Sahoo satya164

View GitHub Profile
satya164 / KeyboardSpacer.tsx
Created Dec 13, 2019
Spacer component to handle keyboard show and hide
View KeyboardSpacer.tsx
import * as React from 'react';
import { Animated, Keyboard, KeyboardEvent, Platform } from 'react-native';
type Props = {
offset?: number;
type State = {
keyboardHeightAnim: Animated.Value;
satya164 / tslint.json
Created Dec 20, 2018
My TSLint config
View tslint.json
"extends": ["tslint:recommended", "tslint-config-prettier"],
"rulesDirectory": ["tslint-plugin-prettier", "tslint-microsoft-contrib"],
"rules": {
"prettier": true,
"deprecation": true,
"interface-over-type-literal": false,
"member-access": [true, "no-public"],
"no-default-export": false,
View babel-codemod-aphrodite-to-styled-components.js
const dashify = text => text.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
const unitless = {
animationIterationCount: true,
borderImageOutset: true,
borderImageSlice: true,
borderImageWidth: true,
boxFlex: true,
boxFlexGroup: true,
boxOrdinalGroup: true,
columnCount: true,

JavaScript Style Library Wishlist

  • Familiar CSS syntax: Using CSS syntax makes it easier to copy/paste code from devtools and the internet, and a huge productivity boost.
  • SCSS like & shorhand: Super nice to write things like &:hover without having to write selectors again.
  • Nesting media queries: Nice to nest media queries inside a style block instead of having to declare it like plain CSS.
  • Support for CSS animations: CSS animations are great :)
  • No coupling to HTML tag: HTML tags have semantic meaning, and coupling styles to HTML tags makes it harder to re-use the same styles, for example, sometimes some of my buttons and links have similar styles and I don't wanna repeat them.
  • Easy to override styles: Overriding styles is one of the main pain points. Many libs don't do anything special and just produce different class names for the styles I declare. Due to no class name having higher specificity, the styles depend on the declaration order which can produce inconsistent
View findModuleDependencies.js
/* @flow */
import types from 'ast-types';
import { parse } from 'babylon';
const config = {
"sourceType": "module",
"plugins": [
View CollapsingHeaderScrollView.js
/* @flow */
import React, { PureComponent, PropTypes } from 'react';
import {
} from 'react-native';
satya164 /
Last active Dec 2, 2016
react-native-fbsdk in React Native 0.29.+
public class MainActivity extends ReactActivity {
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
protected String getMainComponentName() {
return "MyApp";
View logger.js
/* @flow */
/* eslint-disable no-console */
let _types: ?Array<string>,
_filters: ?Array<string | RegExp>,
_history: ?Array<{ timestamp: number; args: Array<any>; }>;
const labels = {
info: '[info]',
warn: '[warn]',
satya164 / class-properties-to-methods.js
Created Jan 8, 2016
Codemod to convert class methods to properties, and remove `.bind(this)` in JSX props
View class-properties-to-methods.js
// Codemod to convert class methods to properties, and remove `.bind(this)` in JSX props.
// Doesn't support Flow annotations yet
export default function(file, api) {
const j = api.jscodeshift;
const convertToClassProps = p => {
const node = p.node;
if ('_') === 0) {
node.type = 'ClassProperty';
satya164 /
Last active Dec 21, 2015
Release script for React Native (WIP)
#! /bin/bash