Alireza Valizade Alireza Valizade - 1 month ago 25
React JSX Question

how to get style of TouchableHighlight onPress

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

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);