Skip to content

Instantly share code, notes, and snippets.

Avatar

Ben Clayton benvium

  • www.calvium.com
  • Bristol, UK
View GitHub Profile
@benvium
benvium / styled-components-typescript-samples.tsx
Created Mar 8, 2019
Using TypeScript with styled-components 4.1.1 for attrs and styled
View styled-components-typescript-samples.tsx
import styled from 'styled-components'; // 4.1.1
import * as React from "react";
type SizeProp = { size: number };
const A = styled.div<SizeProp>`
height: ${props => props.size}px;
`;
const Ac = () => <A size={99} />;
@benvium
benvium / flowType.js
Last active Feb 22, 2018
Calvium Tech Session 22/2/2018 - FlowType
View flowType.js
/* @flow */
import React, {PureComponent} from 'react';
import type {Node} from 'react'; // Here's how to import the FlowType for Node (rendered react classes or null)
// Simple Component with Flow
type PropsType = {
a: string,
b: number,
};
@benvium
benvium / iterm-display-folder-name-in-tab-bash-profile.sh
Last active Feb 15, 2018
iTerm - Display the current folder name at the top of tabs, and update when changing directory.
View iterm-display-folder-name-in-tab-bash-profile.sh
#####
# iTerm - Display the current folder name at the top of tabs, and update when changing directory.
#
# Based on https://gist.github.com/phette23/5270658, with suggestions from the commments there
#####
addToPromptCommand() {
if [[ ":$PROMPT_COMMAND:" != *":$1:"* ]]; then
PROMPT_COMMAND="${PROMPT_COMMAND:+"$PROMPT_COMMAND:"}$1"
fi
@benvium
benvium / Main.js
Created Feb 12, 2018
react-navigation: selection of different routes based on whether the user is logged in or out, via redux
View Main.js
import {rootNavigatorSelector} from './navigation/router';
import Store from './redux/store';
// Connect `rootNavigatorSelector` to redux.
const ConnectedMain = connect(state => ({
Layout: rootNavigatorSelector(state),
}))(Main);
// App root component
class Root extends PureComponent {
@benvium
benvium / ConfigureStore.js
Created May 31, 2016
React Native ConfigureStore including AutoRehydrate
View ConfigureStore.js
/**
* Creates and configures the Redux Store
*/
import {createStore, applyMiddleware, compose} from 'redux';
import thunkMiddleware from 'redux-thunk'; // useful for networking actions
import createLogger from 'redux-logger'; // log out each action
import {persistStore, autoRehydrate} from 'redux-persist';
import rootReducer from './reducers'; // this combines all reducers into one
import {AsyncStorage} from 'react-native';
import Console from '../Console';
@benvium
benvium / Root.js
Created Apr 29, 2016
Use same root component for android and iOS
View Root.js
// Your main root component
import React, {Component} from 'react-native';
export class Root extends Component {
//..
}
@benvium
benvium / artifacts.gradle.txt
Created Apr 21, 2016
Gradle code to make APK files have a sensible format
View artifacts.gradle.txt
// Makes the APKs we build be called AppName-release-buildVariant-1.2.3_4.apk
//
// To use, add this file to the root of your project (next to gradle.properties) make sure the name is artifacts.gradle.
// Then edit gradle.properties to include: `applicationName=MyAppName`
// Then edit module build.gradle, add at the end `apply from: "../artifacts.gradle"`
//
// Adapted slightly from https://www.jayway.com/2015/03/13/producing-better-named-android-apks-with-gradle/
android.applicationVariants.all { variant ->
def appName
//Check if an applicationName property is supplied; if not use the name of the parent project.
@benvium
benvium / androidWifiDebug.sh
Last active Apr 4, 2016
Android: Set up WiFi Debugging
View androidWifiDebug.sh
# Connect Android Device via USB cable
# Type in terminal
adb tcpip 5555
# > restarting in TCP mode port: 5555
# Find android device's IP with (Settings/About/Status)
adb connect X.X.X.X
@benvium
benvium / react-native-navigator-ios-right-button.jsx
Created Mar 30, 2016
React Native NavigatorIOS - how to use onRightButtonPress to call a component method
View react-native-navigator-ios-right-button.jsx
const MyComponent = React.createClass({
statics: {
getRoute: function (props:Object) {
// To pass in the onLeft/RightButton press
// to out instance we need to use the 'ref'
// function (in passProps).
// This'll be passed the component instance, that we can call the methods on.. Phew!
let instance = null;
const route = {
@benvium
benvium / react-native-keyboard-show-resize.js
Last active Oct 15, 2020
React Native. Resize a view when the keyboard appears or hides.
View react-native-keyboard-show-resize.js
'use strict';
const React = require('react-native');
const {
DeviceEventEmitter,
LayoutAnimation,
Dimensions,
} = React;