React-Native Button

Syntax

The <Button> component in React-Native takes in several props to customize its behavior and appearance. Here's a basic example:

import React from 'react';
import { Button } from 'react-native';

const MyButton = () => {
  const onPressHandler = () => {
    console.log('Button pressed!');
  };

  return (
    <Button
      title="Press me"
      onPress={onPressHandler}
      color="#841584"
      accessibilityLabel="Learn more about this button"
    />
  );
};

Example

Here's a more complex example that demonstrates how to customize the styles and add an icon to the button:

import React from 'react';
import { Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const MyButton = () => {
  const onPressHandler = () => {
    console.log('Button pressed!');
  };

  return (
    <Button
      title="Press me"
      onPress={onPressHandler}
      color="#841584"
      icon={
        <Icon
          name="ios-information-circle-outline"
          size={20}
          color="white"
        />
      }
      buttonStyle={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 8,
        paddingRight: 8,
        borderRadius: 4,
        backgroundColor: '#841584',
      }}
      containerStyle={{
        margin: 8,
      }}
      titleStyle={{
        paddingLeft: 8,
        color: 'white',
      }}
      accessibilityLabel="Learn more about this button"
    />
  );
};

Output

When a user presses the button, the onPressHandler function will be called, and the following message will be logged to the console: "Button pressed!".

Explanation

The <Button> component is a built-in component in React-Native that provides a clickable control to perform an action. The title prop specifies the text displayed on the button. The onPress prop specifies the function to be executed when the button is pressed. The color prop specifies the background color of the button.

Additionally, there are various other props that can be used to customize the appearance and behavior of the button, including icon, buttonStyle, containerStyle, and titleStyle.

Use

The <Button> component can be used to add clickable controls to a React-Native app. Buttons can be used in various scenarios, such as to submit a form, navigate to a different screen, or perform any other action.

Important Points

• The <Button> component is a built-in component in React-Native, so there's no need to install any additional packages.
• The <Button> component is available for both Android and iOS, and it's automatically styled based on the platform.
• The <Button> component can be customized using various props, such as color, icon, buttonStyle, containerStyle, and titleStyle.

Summary

The <Button> component in React-Native provides a simple and easy-to-use way to add clickable controls to your app. By using various props, you can customize the appearance and behavior of the button to meet your specific needs.