How to add a button in React Native?

Question

I´m confused with this whole "no CSS" thing, but I understand why it's beneficial. All I want to do is place a button in the middle of the screen but I don't understand how styling works in React yet. This is my code:

var tapSpeed = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Tap me as fast as you can!
        </Text>
        <View style={styles.button}>
        !
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFCCCC'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  button: {
    textAlign: 'center',
    color: '#ffffff',
    marginBottom: 7,
    border: 1px solid blue,
    borderRadius: 2px
  }
});

there were some errant semicolons and extra commas before the edit -- i assume those were just typos. if not you may want to look into that — Austin Greco
– Austin Greco, Commented Apr 26, 2015 at 2:58
It wasn't a typo, but thank you. However, I copy-pasted the edited code and the simulator is throwing an error (the screen is red). Any other idea? — baristaGeek
– baristaGeek, Commented Apr 26, 2015 at 3:30
ah the border should have quotes around it: border: '1px solid blue', — Austin Greco
– Austin Greco, Commented Apr 26, 2015 at 3:32
can you set the button margins to all 'auto'? (haven't played with react-native much) — Brigand
– Brigand, Commented Apr 26, 2015 at 3:58
@FakeRainBrigand You cannot set button margins to auto. If you want buttons to stretch wrap them change the lineItems property value to 'stretch' in the example provided. — vhs
– vhs, Commented Sep 9, 2015 at 5:22

Yevgen Safronov · Accepted Answer · 2016-11-11 10:54:27Z

36

Update: use built-in Button component.

Deprecated:

Wrap your View into TouchableHighlight for iOS and TouchableNativeFeedback for Android.

var {
  Platform,
  TouchableHighlight,
  TouchableNativeFeedback 
} = React;

var tapSpeed = React.createClass({
  buttonClicked: function() {
    console.log('button clicked');
  },
  render: function() {
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android') {
     TouchableElement = TouchableNativeFeedback;
    }
    return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Tap me as fast as you can!
      </Text>
      <TouchableElement
        style={styles.button}
        onPress={this.buttonClicked.bind(this)}>
        <View>
          <Text style={styles.buttonText}>Button!</Text>
        </View>
      </TouchableElement>        
    </View>
    );
  }
});

edited Nov 11, 2016 at 10:54

answered Apr 26, 2015 at 8:23

Yevgen Safronov

4,0331 gold badge29 silver badges39 bronze badges

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

6 Comments

C.P. Over a year ago

where to see the console.log() output?

Yevgen Safronov Over a year ago

@Chetan set debugging in chrome with long tap pn the screen, and open browser's console.

Augustin Riedinger Over a year ago

FYI, the TouchableNativeFeedback doc says: At the moment it only supports having a single View instance as a child node. The <Text> must be wrapped in a View. Please edit your answer so people don't make the same mistake.

Ziteng Chen Over a year ago

Augustin is right, the Text tag must be within a View tag like this "<View><Text style={styles.buttonText}>Button!</Text></View>", or there will be runtime error "Invariant Violation: RawText Button! must be wrapped in an explicit <Text> component".

Asaf Maoz Over a year ago

thanks for the tips in the comments. please edit answer for android: <TouchableElement style={styles.button}> <view> <Text style={styles.buttonText}>Button!</Text> </view> </TouchableElement>

|

Ashok R · Accepted Answer · 2017-01-12 02:10:57Z

You can use built in react-native Button element.

import React, { Component } from 'react';
import { StyleSheet, View, Button, Alert, AppRegistry } from 'react-native';

class MainApp extends Component {

_onPress() {
  Alert.alert('on Press!');
 }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button onPress={this._onPress} title="Hello" color="#FFFFFF" accessibilityLabel="Tap on Me"/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  buttonContainer: {
    backgroundColor: '#2E9298',
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 10,
    shadowOpacity: 0.25
  }
})

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

7 Comments

ha404 Over a year ago

You should probably add --save, like this: npm install react-native-button --save.

backslash112 Over a year ago

not working... Got this error: Error: Requiring unknown module "react-native-button". but i have been installed the package before use it

ide Over a year ago

@backslash112 Try restarting the packager.

Zsolt Szatmari Over a year ago

This looks native on iOS, not on Android.

Lane Rettig Over a year ago

Works, but it doesn't appear to be possible to vertically center the text inside the button if the button is taller than the text. Cf. github.com/ide/react-native-button/issues/9. Any ideas?

|

kabangi julius · Accepted Answer · 2017-07-15 10:21:21Z

You have two options to achieve a touchable component/button to handle user's events.

One is to use the built in Button Component. Check the docs here http://facebook.github.io/react-native/docs/button.html
Two use either TouchableHighlight or TouchableNativeFeedback or TouchableOpacity or TouchableWithoutFeedback. Think of this as a way for you to convert different areas of your app to tappable(clickable) or a way for you to create a custom button. Each component here is different based on how it behaves once it's tapped by the user. Check the docs for more details. http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html etc.

Concerning styling in react native you will need to understand flexbox layout. Check this css flexbox article all rules are applicable to react-native https://css-tricks.com/snippets/css/a-guide-to-flexbox/ except that you will have to capitalize the rules e.g align-content to alignContent

Aymen · Accepted Answer · 2018-11-08 20:43:15Z

1

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

edited Nov 8, 2018 at 20:43

answered Jul 15, 2017 at 10:46

Aymen

1,50619 silver badges29 bronze badges

Comments

Keshav Gera · Accepted Answer · 2019-11-29 06:44:18Z

export default class Login extends React.Component {
  barcodeAction = () => {
    this.props.navigation.navigate('BarCodeScanner')
  }

  cleverTapAction = () => {
    this.props.navigation.navigate('CleverTapApp')
  }
} 

render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});

Viktor Belashov · Accepted Answer · 2020-05-14 20:31:02Z

import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity, Text} from 'react-native';
var tapSpeed = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <TouchableOpacity>
          <Text style={styles.welcome}>
            Tap me as fast as you can!
          </Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text>!</Text>
        </TouchableOpacity>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: '#FFCCCC'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    alignSelf: 'center'
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 7,
    border: 1px solid blue,
    borderRadius: 2px
  }
});

Montaser Almohasen · Accepted Answer · 2017-05-02 18:01:52Z

0

Please check react-native doc's regarding the buttons

You have more than one way to add button in your application and styling it

You can use Button tag and it's have only one way styling by color attribute, it will appearing in IOS different than Android, or by putting button in view tag with style

<View style={style.buttonViewStyle}> <Button title="Facebook" color="blue" onPress={this.onFacebookPress} /> </View>

And check the TouchableOpacity and TouchableNativeFeedback tags

And take a lock on below link for more options to add custom buttons in your app

https://js.coach/react-native/react-native-action-button?search=button

edited May 2, 2017 at 18:01

answered May 2, 2017 at 17:48

Montaser Almohasen

811 silver badge4 bronze badges

Comments

Thiru · Accepted Answer · 2020-05-14 17:47:21Z

0

The Button element from react-native package does not provide built in styling feature. Ex. The "title" props will be in upper case by default. Hence, I've used an another package react-native-elements that provides nice features for Button element along with different styling options.

You can refer more details on Button from react-native-elements

answered May 14, 2020 at 17:47

Thiru

337 bronze badges

Collectives™ on Stack Overflow

How to add a button in React Native?

9 Answers 9

6 Comments

Comments

7 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

6 Comments

Comments

7 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related