Janic Duplessis janicduplessis

Safe Area improvements to be able to handle header height properly in React Navigation

Extend SafeAreaView support to Android, main use case is to support translucent status bar easily.

A:

Add an API to access synchronously and watch safe area insets changes. This could be either as SafeAreaView statics or on the Dimensions API. Somewhat inspired by https://webkit.org/blog/7929/designing-websites-for-iphone-x/

	// @flow

	import React from 'react';
	import { StatusBar } from 'react-native';
	import hoistStatics from 'hoist-non-react-statics';
	import invariant from 'invariant';
	import { withNavigation } from 'react-navigation';

	import type { Subscription } from '../../types';

	// Gradle script for detached apps.

	import org.apache.tools.ant.taskdefs.condition.Os

	void runBefore(String dependentTaskName, Task task) {
	Task dependentTask = tasks.findByPath(dependentTaskName);
	if (dependentTask != null) {
	dependentTask.dependsOn task
	}
	}

	Feedback based on usage of StackNavigation only. In no particular order:

	- Pass initial route in stack props, common use case authentication
	- route params are a bit annoying to use; this.props.navigation.state.params.
	Maybe move to props directly or to another prop. Also to make things worse
	params is nullable, should default to empty object. Would also be nice to
	make it flow-typeable instead of being {[string]: mixed}
	- Screen focus handling (I think I saw a commit about that so it might be done already)
	- Screen event emitter, useful for header buttons, right now I'm passing a function
	to setParams in cDM but it's meh.

	// Based on https://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayQueryRenderer.js

	/**
	* Copyright (c) 2013-present, Facebook, Inc.
	* All rights reserved.
	*
	* This source code is licensed under the BSD-style license found in the
	* LICENSE file in the root directory of this source tree. An additional grant
	* of patent rights can be found in the PATENTS file in the same directory.
	*

	...

	import { Animated, AppState } from 'react-native';

	...

	// Fades in its children when mounted.
	class FadeInWrapper extends React.Component {
	state = {
	anim: new Animated.Value(this.props.enabled ? 0 : 1),

	...

	// Some fancy looking components!
	import ErrorView from './components/ErrorView';
	import LoadingView from './components/LoadingView';

	...

	export class Renderer extends React.Component {
	static defaultProps = {

	import * as React from 'react';
	import { AppState } from 'react-native';

	import { Environment, RecordSource, Store } from 'relay-runtime';
	import { QueryRenderer } from 'react-relay';

	import ErrorView from './components/ErrorView';
	import LoadingView from './components/LoadingView';

	export class Renderer extends React.Component {