How to add a full width button with flex-box in React Native?

Sometimes, we want to add a full width button with flex-box in React Native.

In this article, we’ll look at how to add a full width button with flex-box in React Native.

How to add a full width button with flex-box in React Native?

To add a full width button with flex-box in React Native, we can set the alignSelf style to 'stretch'.

For instance, we write:

import * as React from 'react';
import { View, Button } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View>
      <Button title="button" style={{ alignSelf: 'stretch' }} />
    </View>
  );
}

to add a Button with the alignSelf style set to 'stretch' to make the button stretch to the width of the screen.

Conclusion

To add a full width button with flex-box in React Native, we can set the alignSelf style to 'stretch'.