Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
7 contributors

Users who have contributed to this file

@charpeni @hramos @tesseralis @dayhaysoos @Esemesek @chanlawrencet @mukeshsharma1201
237 lines (177 sloc) 5.79 KB
id title
button
Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at the source code for this button component. Or, take a look at the wide variety of button components built by the community.

Example

import React from 'react';
import {
  StyleSheet,
  Button,
  View,
  SafeAreaView,
  Text,
  Alert,
} from 'react-native';
import Constants from 'expo-constants';

function Separator() {
  return <View style={styles.separator} />;
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.title}>
          The title and onPress handler are required. It is recommended to set
          accessibilityLabel to help make your app usable by everyone.
        </Text>
        <Button
          title="Press me"
          onPress={() => Alert.alert('Simple Button pressed')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          Adjust the color in a way that looks standard on each platform. On
          iOS, the color prop controls the color of the text. On Android, the
          color adjusts the background color of the button.
        </Text>
        <Button
          title="Press me"
          color="#f194ff"
          onPress={() => Alert.alert('Button with adjusted color pressed')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          All interaction for the component are disabled.
        </Text>
        <Button
          title="Press me"
          disabled
          onPress={() => Alert.alert('Cannot press this one')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          This layout strategy lets the title define the width of the button.
        </Text>
        <View style={styles.fixToText}>
          <Button
            title="Left button"
            onPress={() => Alert.alert('Left button pressed')}
          />
          <Button
            title="Right button"
            onPress={() => Alert.alert('Right button pressed')}
          />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

Reference

Props

onPress

Handler to be called when the user taps the button

Type Required
function Yes

title

Text to display inside the button

Type Required
string Yes

accessibilityLabel

Text to display for blindness accessibility features

Type Required
string No

color

Color of the text (iOS), or background color of the button (Android)

Type Required
color No

disabled

If true, disable all interactions for this component.

Type Required
bool No

testID

Used to locate this view in end-to-end tests.

Type Required
string No

hasTVPreferredFocus

(Apple TV only) TV preferred focus (see documentation for the View component).

Type Required Platform
bool No iOS

nextFocusDown

Designates the next view to receive focus when the user navigates down. See the Android documentation.

Type Required Platform
number No Android

nextFocusForward

Designates the next view to receive focus when the user navigates forward. See the Android documentation.

Type Required Platform
number No Android

nextFocusLeft

Designates the next view to receive focus when the user navigates left. See the Android documentation.

Type Required Platform
number No Android

nextFocusRight

Designates the next view to receive focus when the user navigates right. See the Android documentation.

Type Required Platform
number No Android

nextFocusUp

Designates the next view to receive focus when the user navigates up. See the Android documentation.

Type Required Platform
number No Android

touchSoundDisabled

If true, doesn't play system sound on touch.

Type Required Platform
boolean No Android
You can’t perform that action at this time.