How to set 100% width in React Native flexbox?

Sometimes, we want to set 100% width in React Native flexbox.

In this article, we’ll look at how to set 100% width in React Native flexbox.

How to set 100% width in React Native flexbox?

To set 100% width in React Native flexbox, we can set alignSelf to 'stretch'.

For instance, we write:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Text } from 'react-native-paper';

const MyComponent = () => {
  return (
    <View>
      <Text
        style={{
          backgroundColor: 'yellow',
          alignSelf: 'stretch',
          textAlign: 'center',
        }}>
        hello world
      </Text>
    </View>
  );
};

export default MyComponent;

to set the alignSelf style to 'stretch' to make the Text component span the width of the screen.

Conclusion

To set 100% width in React Native flexbox, we can set alignSelf to 'stretch'.