react-native/Libraries/Text/TextUpdateTest.js
Spencer Ahrens 5e110d2776 [ReactNative] Fix Text Updating Crash
Summary:
@public

{D1953613} added an optimization that allowed for shadow nodes that are not
backed by views, but didn't actually work robustly in the remove case because
the indices can get out of sync.  That diff also started returning nil for raw
text nodes, which triggered this bug and broke "see more" functionality in the
`FBTextWithEntities` and `ExpandingText` components, leading to crashes in the
Groups app.

This diff fixes the issue by simply returning `UIView` placeholders again.
Slight perf/ memory cost but no more crashes and there should be no other
adverse affects.

We'll need to think up something more clever in order to properly support `nil`
views in the future, probably something that uses the shadow hierarchy to build
the View hierarchy, rather than mirroring identical commands to both - see
#1102.

Test Plan:
- TextUpdateTest fails without native changes, now passes with them.
- ExpandingText example no longer crashes.
- See More in Groups app no longer crashes.
2015-05-02 10:07:08 -08:00

62 lines
1.6 KiB
JavaScript

/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @providesModule TextUpdateTest
* @flow
*/
'use strict';
var React = require('react-native');
var TimerMixin = require('react-timer-mixin');
var {
NativeModules,
StyleSheet,
Text,
} = React;
var TestManager = NativeModules.TestManager || NativeModules.SnapshotTestManager;
var TextUpdateTest = React.createClass({
mixins: [TimerMixin],
getInitialState: function() {
return {seeMore: true};
},
componentDidMount: function() {
this.requestAnimationFrame(
() => this.setState(
{seeMore: false},
TestManager.markTestCompleted
)
);
},
render: function() {
return (
<Text
style={styles.container}
onPress={() => this.setState({seeMore: !this.state.seeMore})}>
<Text>Tap to see more (bugs)...</Text>
{this.state.seeMore && 'raw text'}
</Text>
);
},
});
var styles = StyleSheet.create({
container: {
margin: 10,
marginTop: 100,
},
});
module.exports = TextUpdateTest;