This post goes over how to ensure React Native Paper <Button> doesn’t take full width.

View

The simplest solution is to wrap <Button> in <View>:

import { View } from 'react-native';
import { Button } from 'react-native-paper';

function MyComponent() {
  return (
    <View style={{ display: 'flex', flexDirection: 'row' }}>
      <Button>My Button</Button>
    </View>
  );
}

Make sure you set the <View> style:

{ display: 'flex', flexDirection: 'row' }

Card

If rendered inside <Card.Actions>, <Button> won’t take full-width:

import { Button, Card } from 'react-native-paper';

function MyComponent() {
  return (
    <Card.Actions>
      <Button>My Button</Button>
    </Card.Actions>
  );
}

But it’ll be right-aligned. To left-align the button, set <Card.Actions> style:

{ alignSelf: 'flex-start' }