CODE EXAMPLE FOR JAVASCRIPT

Percentage Height And Width React Native

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

const PercentageDimensionsBasics = () => {
  // Try removing the `height: '100%'` on the parent View.
  // The parent will not have dimensions, so the children can't expand.
  return (
    <View style={{ height: '100%' }}>
      <View style={{
        height: '33%', backgroundColor: 'red'
      }} />
      <View style={{
        width: '66%', height: '35%', backgroundColor: 'blue'
      }} />
      <View style={{
        width: '20%', height: '50%', backgroundColor: 'yellow'
      }} />
    </View>
  );
};

export default PercentageDimensionsBasics;