Sometimes, we want to set width style to a percentage number with React Native.

In this article, we’ll look at how to set width style to a percentage number with React Native.

How to set width style to a percentage number with React Native?

To set width style to a percentage number with React Native, we can use flexbox.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ flexDirection: 'row' }}>
      <Text style={{ flexGrow: 1 }}>foo</Text>
      <Text style={{ width: '20%' }}>bar</Text>
    </View>
  );
}

to set flexDirection to 'row' to add a horizontal flexbox layout.

We set the 2nd Text component to fill 20% of the screen.

Then we set flexGrow to 1 on the first Text component to expand to fill the remaining width of the screen.

Conclusion

To set width style to a percentage number with React Native, we can use flexbox.