Skip to content

Instantly share code, notes, and snippets.


Ben Clayton benvium

  • Bristol, UK
View GitHub Profile
benvium / styled-components-typescript-samples.tsx
Created March 8, 2019 08:49
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 / flowType.js
Last active February 22, 2018 15:10
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 /
Last active February 15, 2018 14:11
iTerm - Display the current folder name at the top of tabs, and update when changing directory.
# iTerm - Display the current folder name at the top of tabs, and update when changing directory.
# Based on, with suggestions from the commments there
addToPromptCommand() {
if [[ ":$PROMPT_COMMAND:" != *":$1:"* ]]; then
benvium / Main.js
Created February 12, 2018 08:43
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),
// App root component
class Root extends PureComponent {
benvium / ConfigureStore.js
Created May 31, 2016 17:41
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 / Root.js
Created April 29, 2016 16:17
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 / artifacts.gradle.txt
Created April 21, 2016 14:03
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 make sure the name is artifacts.gradle.
// Then edit to include: `applicationName=MyAppName`
// Then edit module build.gradle, add at the end `apply from: "../artifacts.gradle"`
// Adapted slightly from
android.applicationVariants.all { variant ->
def appName
//Check if an applicationName property is supplied; if not use the name of the parent project.
benvium /
Last active April 4, 2016 16:32
Android: Set up WiFi Debugging
# 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 / react-native-navigator-ios-right-button.jsx
Created March 30, 2016 09:18
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 / react-native-keyboard-show-resize.js
Last active October 15, 2020 04:06
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 {
} = React;