CODEWITHSUNDEEP
javascriptreact-native
tldr
tldr

Reputation: 12112

React Native: <Text> won't render if placed inside <TouchableHighlight>

In the following code:

'use strict';

var React = require('react-native'),

{
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Component,
  NavigatorIOS
} = React,

styles = StyleSheet.create({
  container: {
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  }
})

class Login extends Component {
  render() {
    return (
    /*<TouchableHighlight
      style={styles.button}
      underlayColor='#99d9f4'>*/
      <Text style={styles.text}>Login with Google</Text>
    /*</TouchableHighlight>*/
    )
  }
}

module.exports = Login

The <Text> Login gets rendered only when the surrounding <TouchableHighlight> is commented out. What am I doing wrong?

Upvotes: 0

Views: 1267

Answers (2)

Stephani Bishop
Stephani Bishop

Reputation: 1619

You need to import 'TouchableHighlight'. Add TouchableHighlight to your list of requires.

var React = require('react-native'),

{
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Component,
  NavigatorIOS,
  TouchableHighlight
} = React,

Upvotes: 5

Jonathan Huang
Jonathan Huang

Reputation: 2086

In order to use the tag, you have to import it in the destructuring assignment block just like Text and View.

Upvotes: 1

Related Questions