The left side of the screen is untouchable when using NavigatorIOS

I have this very strange error for my adaptive iOS application when I use NavigatorIOS (this is necessary): on the left side of the screen there are 30 points of the zone that is insensitive to the first touch (nothing happens in touchableHighlight or TouchableWithoutFeedback ) in Listview elements, for example ...

When I use Navigator, there are no problems at all, it is specific to NavigatorIOS (and I need it in this part of the application), I also tried without any style, the same problem.

Did not see any github problem or discussion about this error.

Edit:

Runnable example: https://rnplay.org/apps/E0R2vg

Component code example:

 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, NavigatorIOS, ListView, TouchableWithoutFeedback, Dimensions, } = React; var myListView = React.createClass({ getInitialState: function() { return { ds: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), }; }, componentDidMount: function() { console.log('feed datasource'); this.setState({ ds: this.state.ds.cloneWithRows([{name: 'one'}, {name:'two'}, {name: 'three'}]), }); }, render: function() { return ( <View style={styles.container}> <ListView dataSource={this.state.ds} renderRow={this.renderItem} style={styles.listView} /> <TouchableWithoutFeedback onPress={this.nextroute}> <View style={[styles.pressme, {flex:1}]}> <Text>Next route to see the issue</Text> </View> </TouchableWithoutFeedback> </View> ); }, renderItem: function(item) { return ( <View style={styles.row}> <TouchableWithoutFeedback onPress={() => alert('pressed')}> <View style={styles.pressme}> <Text>x</Text> </View> </TouchableWithoutFeedback> <Text>{item.name} - Item description...</Text> </View> ); }, nextroute: function() { this.props.navigator.push({ title: 'Try press [x] (twice)', component: myListView, onLeftButtonPress: () => this.props.navigator.pop(), }); }, }); var SampleApp = React.createClass({ render: function() { return ( <NavigatorIOS style={styles.navcontainer} initialRoute={{ component: myListView, title: 'First view is ok', }} tintColor="#000000" barTintColor="#fd7672" translucent={false} ref='navios' /> ); } }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 28, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', fontSize: 19, marginBottom: 5, }, navcontainer: { flex: 1, }, listView: { flex: 1, width: Dimensions.get('window').width, }, row: { flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#FFFFFF', }, pressme: { margin: 10, borderWidth: 1, borderColor: 'red', padding: 15, } }); AppRegistry.registerComponent('SampleApp', () => SampleApp); 
+5
source share

All Articles