Sometimes, we want to change the width of the View by text inside with React Native.

In this article, we’ll look at how to change the width of the View by text inside with React Native.

How to change the width of the View by text inside with React Native?

To change the width of the View by text inside with React Native, we can set the alignSelf property.

For instance, we write:

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

const App = () => {
  return (
    <View style={{ backgroundColor: 'orange', alignSelf: 'flex-start' }}>
      <Text style={{ color: 'blue' }}>hello world</Text>
    </View>
  );
};
export default App;

to set alignSelf to 'flex-start' to make the View display like a block element in HTML.

Conclusion

To change the width of the View by text inside with React Native, we can set the alignSelf property.