Categories
JavaScript Answers React Native Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *