CODEWITHSUNDEEP
javascriptreactjsreact-native
baristaGeek
baristaGeek

Reputation: 487

How to add a button in React Native?

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

Upvotes: 46

Views: 92718

Answers (9)

Viktor Belashov
Viktor Belashov

Reputation: 421

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

Upvotes: 1

Thiru
Thiru

Reputation: 33

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

Upvotes: 0

Keshav Gera
Keshav Gera

Reputation: 11264

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

enter image description here

Upvotes: 1

Aymen
Aymen

Reputation: 1496

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

Upvotes: 1

kabangi julius
kabangi julius

Reputation: 2709

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

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

Upvotes: 1

Montaser Almohasen
Montaser Almohasen

Reputation: 81

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

Upvotes: 0

Ashok R
Ashok R

Reputation: 20796

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

enter image description here

Read More Here.

Upvotes: 28

Yevgen Safronov
Yevgen Safronov

Reputation: 4033

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

Upvotes: 36

ide
ide

Reputation: 20838

The react-native-button package provides a button that is styled like a native button. Install it with npm install react-native-button and use it in your component like this:

var Button = require('react-native-button');

var ExampleComponent = React.createClass({
  render() {
    return (
      <Button
        style={{borderWidth: 1, borderColor: 'blue'}}
        onPress={this._handlePress}>
        Press Me!
      </Button>
    );
  },

  _handlePress(event) {
    console.log('Pressed!');
  },
});

Upvotes: 25

Related Questions