Button Components

In React Native, the Button component provides a simple way to create a button that triggers an action when pressed. Here’s an explanation of how to use the Button component, its properties, and an example of its usage

Basic Usage

To use the Button component, import it from react-native and include it in your component tree. Here’s a basic example:

            import React from 'react';
            import { View, Button, Alert } from 'react-native';
            
            const MyComponent = () => {
              const onPressButton = () => {
                Alert.alert('Button pressed!');
              };
            
              return (
                <View>
                  <Button
                    title="Press me"
                    onPress={onPressButton}
                  />
                </View>
              );
            };
            
            export default MyComponent;
            
            

        

Properties

The Button component has the following essential properties:

title :The text displayed on the button

onPressA function that is called when the button is pressed.

Styling

The Button component doesn't support custom styles beyond basic platform-specific adjustments (like color on iOS), so it's typically styled by wrapping it in a View and applying styles to the View component.

Example with Styling

Here's an example of wrapping a Button in a View and applying custom styles:

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

const MyComponent = () => {
  const onPressButton = () => {
    Alert.alert('Button pressed!');
  };

  return (
    <View style={styles.container}>
      <Button
        title="Press me"
        onPress={onPressButton}
        color="#841584" // Custom color (iOS only)
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MyComponent;

        

Conclusion

The Button component in React Native provides a straightforward way to add interactive elements to your application. By using its properties like title and onPress, you can create buttons that trigger actions when tapped by the user. For more complex styling or customizations, consider using touchable components like TouchableOpacity or TouchableHighlight along with custom styling and child components.