From b00a61d4eea7f62631f55d5728e3845c3b2c977a Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Wed, 11 Nov 2015 11:01:00 +0800 Subject: [PATCH 1/3] remove Precompute Style Since there are no precomputeStyle module now. --- docs/DirectManipulation.md | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/docs/DirectManipulation.md b/docs/DirectManipulation.md index 77551e590de..a47a39fe2cb 100644 --- a/docs/DirectManipulation.md +++ b/docs/DirectManipulation.md @@ -161,37 +161,6 @@ that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`. -## Precomputing style - -We learned above that `setNativeProps` is a wrapper around -`RCTUIManager.updateView`, which is also used internally by React to -perform updates on re-render. One important difference is that -`setNativeProps` does not call `precomputeStyle`, which is done -internally by React, and so the `transform` property will not work if -you try to update it manually with `setNativeProps`. To fix this, -you can call `precomputeStyle` on your object first: - -```javascript -var precomputeStyle = require('precomputeStyle'); - -var App = React.createClass({ - componentDidMount() { - var nativeProps = precomputeStyle({transform: [{rotate: '45deg'}]}); - this._root.setNativeProps(nativeProps); - }, - - render() { - return ( - this._root = component} - style={styles.container}> - Precompute style! - - ) - }, -}); -``` -[Run this example](https://rnplay.org/apps/8_mIAA) - ## setNativeProps to clear TextInput value Another very common use case of `setNativeProps` is to clear the value From f4756d95ee98c00b7e2c10aa2a7d4fa5900fb910 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Wed, 11 Nov 2015 16:41:58 +0800 Subject: [PATCH 2/3] Update DirectManipulation.md and there is no more controlled / bufferdelay prop for TextInput --- docs/DirectManipulation.md | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/docs/DirectManipulation.md b/docs/DirectManipulation.md index a47a39fe2cb..d37da3b4a9c 100644 --- a/docs/DirectManipulation.md +++ b/docs/DirectManipulation.md @@ -161,37 +161,6 @@ that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`. -## setNativeProps to clear TextInput value - -Another very common use case of `setNativeProps` is to clear the value -of a TextInput. The `controlled` prop of TextInput can sometimes drop -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: - -```javascript -var App = React.createClass({ - clearText() { - this._textInput.setNativeProps({text: ''}); - }, - - render() { - return ( - - this._textInput = component} - style={styles.textInput} /> - - Clear text - - - ); - } -}); -``` -[Run this example](https://rnplay.org/plays/pOI9bA) - ## Avoiding conflicts with the render function If you update a property that is also managed by the render function, From 7cb64e1655366c5eab2a08aacf52d74361368ea9 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Mon, 14 Dec 2015 19:48:35 +0800 Subject: [PATCH 3/3] revert TextInput example --- docs/DirectManipulation.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/docs/DirectManipulation.md b/docs/DirectManipulation.md index d37da3b4a9c..a47a39fe2cb 100644 --- a/docs/DirectManipulation.md +++ b/docs/DirectManipulation.md @@ -161,6 +161,37 @@ that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`. +## setNativeProps to clear TextInput value + +Another very common use case of `setNativeProps` is to clear the value +of a TextInput. The `controlled` prop of TextInput can sometimes drop +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: + +```javascript +var App = React.createClass({ + clearText() { + this._textInput.setNativeProps({text: ''}); + }, + + render() { + return ( + + this._textInput = component} + style={styles.textInput} /> + + Clear text + + + ); + } +}); +``` +[Run this example](https://rnplay.org/plays/pOI9bA) + ## Avoiding conflicts with the render function If you update a property that is also managed by the render function,