Make View 80% Width of Parent in React Native

Make view 80% width of parent in React Native

As of React Native 0.42 height: and width: accept percentages.

Use width: 80% in your stylesheets and it just works.

• Screenshot
  
  
  
  

• Live Example
  
  Child Width/Height as Proportion of Parent
  
  

• Code

  import React from 'react';
  import { Text, View, StyleSheet } from 'react-native';
  
  const width_proportion = '80%';
  const height_proportion = '40%';
  
  const styles = StyleSheet.create({
    screen: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#5A9BD4',
    },
    box: {
      width: width_proportion,
      height: height_proportion,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#B8D2EC',
    },
    text: {
      fontSize: 18,
    },
  });
  
  export default () => (
    <View style={styles.screen}>
      <View style={styles.box}>
        <Text style={styles.text}>
          {width_proportion} of width{'\n'}
          {height_proportion} of height
        </Text>
      </View>
    </View>
  );
  

How Do I Make ScrollView Components Size a Ratio of Screen Size in React Native?

you better use Dimensions from React Native

import {SafeAreaView, ScrollView, StyleSheet, View, Dimensions} from 'react-native';

const styles = StyleSheet.create({
    item: {
        height: Dimensions.get('window').height * 0.25,
        margin: 2,
        borderRadius: 15
    },
})

react native flex and width percentage different

Flex is used when you trying to “fill” over the available space.By using flex in a layout or view or any component space is divided according to each element's flex property.Let me show you example when we use flex

In the picture the red, yellow and the green views which are inside container view that has flex: 1 set. The red view is set with flex property flex: 1 , the yellow view is set with flex property flex: 2 and the green view is set with flex property flex: 3 . 1+2+3 = 6 which means that the red view will get 1/6 of the space, the yellow 2/6 of the space and the green 3/6 of the space.

We use flex where you want the width to match 100% of the parent layout when flexdirection is column as we dividing space in vertial and when flexdirection is row then it divide the space vertial.

We use use percentage where we want set some specific value of space in aspect of height and width in the view

100% width in React Native Flexbox

Simply add alignSelf: "stretch" to your item's stylesheet.

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},

React native styling. width: percentage - number

I'd agree with Viktor, you should be able to achieve this using Flex Box.

Here's something I put together: https://snack.expo.io/B1jDKOhyb

You set the flexDirection of the formRow to row, and then the first child (the holder View for your AutoComplete component to flex: 1. This makes it fill all available space. The next child View is your icon holder. Which you can set to whatever value you want (in this case 50).

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.formRow}>
          <View style={styles.formItem}>
            // AutoComplete component goes here
          </View>
          <View style={styles.formIcon}>
           // Icon goes here
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 100
  },
  formRow: {
    flexDirection: 'row',
    height: 50,
  },
  formItem: {
    flex: 1,
    backgroundColor: 'dodgerblue',
  },
  formIcon: {
    width: 50,
    backgroundColor: 'greenyellow',
  },
});

React Native - Set parent match width for component inside a ScrollView that is inside a Modal

I've made it after wrap ScrollView with a View with style flexDirection : 'row'. Yet to figure out why

React Native Use Percentage for Square Image

you can use Dimensions to calculate the size of image

const _width  = Dimensions.get('screen').width * 0.5

then use

image: {
    width: _width,
    height: _width,
  },

---

Related Topics