Daybrush (Younkue Choi) daybrush

This gist outlines how to resize a view when a keyboard appears using Auto Layout (there are a bunch of code samples out there that manually adjust the view's frame, but that's just so 2013). The method I outline below works universally on both iPhone and iPad, portrait and landscape, and is pretty darn simple.

Setting Up

The first thing to do is to define our containing view controller, the view, and the bottom constraint that we'll use to adjust its size.

Here's HeightAdjustingViewController.h. We don't need to expose any public properties, so it's pretty bare.

	Scene.js	CSS
	easing	animation-timing-function
	iterationCount	animation-iteration-count
	duration	animation-duration
	fillMode	animation-fill-mode
	direction	animation-direction
	delay	animation-delay
	playState	animation-play-state

	import JavaScriptCore

	extension JSContext {
	subscript(key: String) -> Any {
	get {
	return self.objectForKeyedSubscript(key)
	}
	set{
	self.setObject(newValue, forKeyedSubscript: key as NSCopying & NSObjectProtocol)
	}

	var traverse = require("@babel/traverse").default;
	var t = require("@babel/types");

	function convert(ast) {
	traverse(ast, {
	ClassMethod(path) {
	const node = path.node;
	node.type = "MethodDefinition";
	node.value = t.functionExpression(null, node.params, node.body, node.generator, node.async);
	node.value.returnType = node.returnType

	<style>
	/* CSS */
	.selector {
	animation-name: a;
	animation-duration: 3s;
	}
	@keyframes a {
	0% {
	left: 0%;
	}

	/* CSS */
	.selector {
	animation-name: a;
	animation-duration: 3s;
	animation-timing-function: ease;
	-webkit-animation-name: a;
	-webkit-animation-duration: 3s;
	-webkit-timing-function: ease;
	-moz-animation-name: a;
	-moz-animation-duration: 3s;

	/* CSS Easing */
	{
	easing: Scene.EASE_IN, // EASE_OUT, EASE_IN_OUT, ...
	}
	/* Custom */
	{
	easing: t => 1 - Math.pow(t, 3),
	}

	scene.play(); // Play JavaScript animation
	scene.playCSS(); // Play CSS animation

	new Scene.SceneItem({
	0: {
	number: 0,
	stringWithUnit: "0px",
	color: "#ff5555",
	function: 0,
	array: [0, 50, 100],
	object: {"a": 1, "b": 2},
	etc: "A",
	},

	// b.js
	function a() {
	}

	function b() {
	a();
	}