creating a custom Button using TouchableHighlight

Question

I'm trying to implement a custom button using TouchableHighlight

I created a button class and I'm importing it into my main program like this:

In button.js:

export default class Button extends React.Component {
    render() {
        return (
            <TouchableHighlight>
                <View style={styles.button}>
                    <Text style={styles.buttonText}>
                    </Text>
                </View>
            </TouchableHighlight>
        )
    }
}

In app.js:

import Button from './button'


<View>
     <Button onPress={ () => navigate('Chat', { user: 'Abe' })} title = "Abe"
     />
</View>

When I run this, I just get a blank button with no text or onPress event.

How can I pass in the onPress and title values to the Button class?

Thanks!

locropulenton · Accepted Answer · 2017-05-22 17:54:45Z

3

You need to access the props in your Button component.

export default class Button extends React.PureComponent {
  render() {
    const { onPress, title } = this.props;
    return (
      <TouchableHighlight onPress={onPress}>
        <View style={styles.button}>
            <Text style={styles.buttonText}>
              {title}
            </Text>
        </View>
      </TouchableHighlight>
    )
  }
}

edited May 22, 2017 at 17:54

locropulenton

4,8533 gold badges35 silver badges58 bronze badges

answered May 22, 2017 at 17:31

Travis White

1,9871 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

SkyeBoniwell Over a year ago

thanks, so using your example, would I keep the code in my app.js page the same? thanks again

ketan kulkarni Over a year ago

what CSS styles should be used so that background colour will be applied to the text only also apply border-radius

Travis White Over a year ago

Add backgroundColor property to the text style. Did you try the borderRadius property? React Native uses slightly different names for css properties (no hyphens)

ketan kulkarni Over a year ago

i want css applied only for text but background color is applying to entire width. if write <Text><Text>click me</Text></Text> then background color is applied to text only but border radius is not applying

Travis White Over a year ago

Sounds like your Text component is wider than you think. The backgroundColor property will only apply to the text if you style it on the text. Does the parent component have something like alignItems: 'stretch' set? Does the text have alignSelf: 'stretch' set?

|

Collectives™ on Stack Overflow

creating a custom Button using TouchableHighlight

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related