how to get style of TouchableHighlight onPress

Question

I Want When User Press On Each Item In My Menu Get width and offset left that element and set in state...this is my code :

{clearMenuItems && clearMenuItems.map((item, index)=> {
                        return (
                            <TouchableElement
                                key={index}
                                underlayColor='#f2f2f2'
                                style={styles.item}
                                onPress={()=>{handleOnPress(item)}}
                            >
                                <Text style={styles.text}>{item.title}</Text>
                            </TouchableElement>
                        );
                    })
}

how i can get style of element?

Answer 1

this is an example how to get a style of element :

 'use strict';

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


    var TestIt = React.createClass({
      measureWelcome() {
        this.refs.welcome.measure(this.logWelcomeLayout);
      },

      logWelcomeLayout(ox, oy, width, height, px, py) {
        console.log("ox: " + ox);
        console.log("oy: " + oy);
        console.log("width: " + width);
        console.log("height: " + height);
        console.log("px: " + px);
        console.log("py: " + py);
      },

      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome} ref="welcome">
              Welcome to React Native!
            </Text>
            <TouchableOpacity onPress={this.measureWelcome}>
              <Text>Measure it</Text>
            </TouchableOpacity>
          </View>
        );
      }
    });

    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

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

Answer 2

There is underlayColor prop in TouchableHithlight. You can customize color. If you want to change something else you have to apply different style when the button component is pressed. It's good to wrap the Touchable in your own component so for example you can add state or styles.