Nested Touchable with absolute position

Question

I need to implement an interface where an object is clickable, but an area of this object does another action, like this:

|-----------|
|        |  | -> clicking on this small area does an action
|        ---|
|           |
|           |
|           | -> clicking on this area does another action
|           |
|-----------|

I did an implementation similar this structure:

<View> // Container
  <Touchable onPress={do X}> // Large area
  <Touchable onPress={do Y} style={{position: absolute, top: 0, right: 0}}> // Small area
</View>

The problem is that the small area never activate the onPress props. The event is always triggered on the large area.

Can someone help me with this?

Thanks!

Answer 1

I'm not sure if you have any styling to show for the small container, but if there is no width or height, it will not trigger, so check to make sure you have set up a width and height:

smallContainer: {
    width: 120, // set this
    height:100, // set this
    position:'absolute',
    top:0,
    right:0
}

I've gotten your setup working here. Code is also below.

https://rnplay.org/apps/StpOXg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var SampleApp = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <View style={{flexDirection:'row'}}> 
          <TouchableHighlight onPress={ () => alert('largeContainer') } style={styles.container1}>
                    <View><Text>Hello1</Text></View>
            </TouchableHighlight>
          <TouchableHighlight onPress={ () => alert('smallContainer') }  style={styles.container2}>
                <View><Text>Hello2</Text></View>
            </TouchableHighlight>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1
  },
  container1: {
    width:320,
    height:300,
    backgroundColor: 'red'
  },
  container2: {
    width: 120,
    height:100,
    position:'absolute',
    backgroundColor: 'green',
    top:0,
    right:0
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);