From bb39ee0efe5fa4f1dd307d7efbc0d1659da83bfc Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Thu, 23 Jun 2016 06:44:51 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/animations.html | 8 ++-- releases/next/docs/direct-manipulation.html | 40 +++++++++++-------- .../next/docs/native-components-android.html | 3 +- 3 files changed, 29 insertions(+), 22 deletions(-) diff --git a/releases/next/docs/animations.html b/releases/next/docs/animations.html index 56f938e6e97..6ba24418b29 100644 --- a/releases/next/docs/animations.html +++ b/releases/next/docs/animations.html @@ -8,13 +8,13 @@ performant way. Animated focuses on declarative relationships betwe and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution. For example, a complete component with a simple spring bounce on mount looks like this:

class Playground extends React.Component { - constructor(props: any) { + constructor(props) { super(props); this.state = { bounceValue: new Animated.Value(0), }; } - render(): ReactElement { + render() { return ( <Animated.Image // Base: Image, Text, View source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}} @@ -159,7 +159,7 @@ what you want.

Note that in order to get this to work on AndroidcomponentWillMount() { // Animate creation LayoutAnimation.spring(); - }, + } _onPress() { // Animate the update @@ -179,7 +179,7 @@ what you want.

Note that in order to get this to work on Android/View> ); } -};

Run this example

This example uses a preset value, you can customize the animations as +}

Run this example

This example uses a preset value, you can customize the animations as you need, see LayoutAnimation.js for more information.

requestAnimationFrame #

requestAnimationFrame is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that diff --git a/releases/next/docs/direct-manipulation.html b/releases/next/docs/direct-manipulation.html index 029a06fd0a0..41388b60371 100644 --- a/releases/next/docs/direct-manipulation.html +++ b/releases/next/docs/direct-manipulation.html @@ -12,7 +12,7 @@ within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with setState and shouldComponentUpdate.

setNativeProps with TouchableOpacity #

TouchableOpacity uses setNativeProps internally to update the opacity of its child -component:

setOpacityTo: function(value) { +component:

setOpacityTo(value) { // Redacted: animation related code this.refs[CHILD_REF].setNativeProps({ opacity: value @@ -25,9 +25,10 @@ any knowledge of that fact or requiring any changes to its implementation:

/View> </TouchableOpacity>

Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value -in the state, then update that value whenever onPress is fired:

getInitialState() { - return { myButtonOpacity: 1, } -}, +in the state, then update that value whenever onPress is fired:

constructor(props) { + super(props); + this.state = { myButtonOpacity: 1, }; +} render() { return ( @@ -49,25 +50,25 @@ you will notice that it is a wrapper around RCTUIManager.updateView this is the exact same function call that results from re-rendering - see receiveComponent in ReactNativeBaseComponent.js.

Composite components and setNativeProps #

Composite components are not backed by a native view, so you cannot call -setNativeProps on them. Consider this example:

var MyButton = React.createClass({ +setNativeProps on them. Consider this example:

class MyButton extends React.Component { render() { return ( <View> <Text>{this.props.label}</Text> </View> ) - }, -}); + } +} -var App = React.createClass({ +class App extends React.Component { render() { return ( <TouchableOpacity> <MyButton label="Press me!" /> </TouchableOpacity> ) - }, -});

Run this example

If you run this you will immediately see this error: Touchable child + } +}

Run this example

If you run this you will immediately see this error: Touchable child must either be native or forward setNativeProps to a native component. This occurs because MyButton isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you @@ -77,10 +78,10 @@ pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward setNativeProps to a native-backed child component.

Forward setNativeProps to a child #

All we need to do is provide a setNativeProps method on our component that calls setNativeProps on the appropriate child with the given -arguments.

var MyButton = React.createClass({ +arguments.

class MyButton extends React.Component { setNativeProps(nativeProps) { this._root.setNativeProps(nativeProps); - }, + } render() { return ( @@ -88,8 +89,8 @@ arguments.

>{this.props.label}</Text> </View> ) - }, -});

Run this example

You can now use MyButton inside of TouchableOpacity! A sidenote for + } +}

Run this example

You can now use MyButton inside of TouchableOpacity! A sidenote for clarity: we used the ref callback syntax here, rather than the traditional string-based ref.

You may have noticed that we passed all of the props down to the child view using {...this.props}. The reason for this is that TouchableOpacity is actually a composite component, and so in addition @@ -104,10 +105,15 @@ characters when the bufferDelay is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use setNativeProps to directly manipulate the TextInput value when necessary. For example, the following code demonstrates clearing the -input when you tap a button:

var App = React.createClass({ +input when you tap a button:

class App extends React.Component { + constructor(props) { + super(props); + this.clearText = this.clearText.bind(this); + } + clearText() { this._textInput.setNativeProps({text: ''}); - }, + } render() { return ( @@ -120,7 +126,7 @@ input when you tap a button:

/View> ); } -});

Run this example

Avoiding conflicts with the render function #

If you update a property that is also managed by the render function, +}

Run this example

Avoiding conflicts with the render function #

If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from setNativeProps will be completely diff --git a/releases/next/docs/native-components-android.html b/releases/next/docs/native-components-android.html index 88bbd3fa674..395036da1f2 100644 --- a/releases/next/docs/native-components-android.html +++ b/releases/next/docs/native-components-android.html @@ -58,7 +58,8 @@ module.exports }

The event name topChange maps to the onChange callback prop in JavaScript (mappings are in UIManagerModuleConstants.java). This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:

// MyCustomView.js class MyCustomView extends React.Component { - constructor() { + constructor(props) { + super(props); this._onChange = this._onChange.bind(this); } _onChange(event: Event) {