Complete Guide to Making View 80% Width of Parent in React Native

Overview of React Native Layout System

React Native employs a Flexbox-based layout system that differs significantly from traditional web CSS. In early versions, React Native indeed lacked support for percentage widths, which caused considerable challenges for developers. However, with continuous framework evolution, starting from React Native 0.42, official support for percentage values in width and height styles was introduced.

Percentage Width Solution

The most straightforward solution is using percentage widths. Simply set width: '80%' in your style sheets:

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#5A9BD4',
  },
  textInputContainer: {
    width: '80%',
    height: 50,
    backgroundColor: '#B8D2EC',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textInputContainer}>
        <Text style={styles.text}>80% width of parent container</Text>
      </View>
    </View>
  );
}

This approach is concise and efficient, fully aligning with React Native's design philosophy. Note that percentage values must be wrapped in quotes and written as strings, such as '80%', not 80%.

Flexbox Layout Solution

Before percentage width support was available, developers typically used Flexbox to achieve similar effects:

import React from 'react';
import { View, TextInput } from 'react-native';

export default function App() {
  return (
    <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center'}}>
      <View style={{flexDirection: 'row'}}>
        <TextInput 
          style={{flex: 0.8, borderWidth: 1, height: 40, padding: 10}}
          placeholder="Enter text here"
        />
        <View style={{flex: 0.2}} />
      </View>
    </View>
  );
}

This solution uses flex: 0.8 to make the TextInput occupy 80% of available space, with the remaining 20% filled by an empty view. While functionally achieving the goal, the code is relatively complex and requires additional placeholder elements.

Dimensions API Solution

Another historical approach involves using the Dimensions API to directly calculate screen width:

import React from 'react';
import { View, TextInput, Dimensions, StyleSheet } from 'react-native';

const { width: screenWidth } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 100,
    alignItems: 'center',
  },
  textInput: {
    backgroundColor: '#dddddd',
    height: 60,
    width: screenWidth * 0.8,
    padding: 10,
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput 
        style={styles.textInput}
        placeholder="Width calculated using Dimensions"
      />
    </View>
  );
}

This method obtains screen width via Dimensions.get('window').width and multiplies by 0.8 to get the target width. While calculation is precise, it lacks responsiveness and requires manual handling during screen rotation or size changes.

Solution Comparison and Selection Recommendations

Each of the three solutions has its advantages and disadvantages:

• Percentage Solution: Code is concise, responsive, currently recommended as the preferred approach
• Flexbox Solution: Good compatibility, but relatively complex code
• Dimensions Solution: Precise calculation, but lacks automatic responsiveness

In practical development, prioritize the percentage solution unless supporting older React Native versions. For complex layout requirements, combine multiple solutions for optimal results.

Best Practices and Considerations

When using percentage widths, pay attention to the following points:

1. Ensure parent container has explicit dimensions, otherwise percentage calculations may be inaccurate
2. Use string-form percentage values in style sheets
3. Consider adaptation for different screen sizes and orientations
4. For complex responsive layouts, combine with onLayout event for dynamic adjustments

By properly applying these techniques, developers can easily implement various complex layout requirements and enhance application user experience.