Skip to content

TouchableHighlight does not return to its backgroundColor after press #156

Closed
@ColinEberhardt

Description

@ColinEberhardt

The following defines a component with a TouchableHighlight that has a red background. When pressed the underlayColor is applied, however when the press is released it returns to a white background color. I would expect it to return to its original state, with a red background.

'use strict';

var React = require('react-native/addons');

var {
  AppRegistry,
  Text,
  StyleSheet,
  TouchableHighlight
} = React;

var styles = StyleSheet.create({
  buttonText: {
    fontSize: 18,
    color: 'black',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    width: 100,
    flexDirection: 'row',
    backgroundColor: 'red',
    borderColor: '#48BBEC',
    margin: 20,
    justifyContent: 'center'
  },
});

var UIExplorerApp = React.createClass({
  render: function() {
    return (
      <TouchableHighlight style={styles.button}
          underlayColor='#99d9f4'>
        <Text style={styles.buttonText}>Go</Text>
      </TouchableHighlight>
    );
  }
});

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

module.exports = UIExplorerApp;

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions