Skip to content
Related Articles

Related Articles

Improve Article

React Native Button Component

  • Last Updated : 10 May, 2021

The following approach covers how to use the Button in react-native. For this, we are going to use the Button component. It is basically a clickable component which is used to perform some action when clicked by the user.

Syntax:

<Button
 onPress={}
 title="Button"
 color="#841584"
/>

Props in Button:

  • onPress: It is called when the user tap on the button.
  • title: It is the text which displays inside the button.
  • accessibilityLabel: Text to display for blindness accessibility features.
  • color: It is used to set the color of the button.
  • disabled: If it is true, then user didn’t able to press the button.
  • hasTVPreferredFocus: TV preferred focus, It is only available for TV.
  • nextFocusDown: Designates the next view to receive focus when the user navigates down.
  • nextFocusForward: Designates the next view to receive focus when the user navigates forward.
  • nextFocusLeft: Designates the next view to receive focus when the user navigates left.
  • nextFocusRight: Designates the next view to receive focus when the user navigates right.
  • nextFocusUp: Designates the next view to receive focus when the user navigates up.
  • testID: It is used to locate this view in end-to-end tests.
  • touchSoundDisabled: If true, doesn’t play system sound on touch.

Now let’s start with the implementation:

  • Step 1: Open your terminal and install expo-cli by the following command.



    npm install -g expo-cli
  • Step 2: Now create a project by the following command.

    expo init myapp
  • Step 3: Now go into your project folder i.e. myapp

    cd myapp

Project Structure: It will look like the following.

Example: Now lets implement the Button. Here we created a Button and when someone clicks on that button the count will change.

App.js

App.js




import React , {useState} from 'react';
import { StyleSheet, Text, View , Button } from 'react-native';
  
export default function App() {
  const [count , setcount] = useState(0);
  const changeCount = () => {
    setcount(count + 1);
  }
  return (
    <View style={styles.container}>
        <Text style={styles.text}>{count}</Text>
        <Button
          title={"Click Me"}
          onPress={changeCount}
        />
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text : {
    fontSize : 40,
    marginBottom : 30
  }
});

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.

Reference: https://reactnative.dev/docs/button




My Personal Notes arrow_drop_up
Recommended Articles
Page :