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>);

That should fit your needs:

var yourComponent = React.createClass({    render: function () {        return (            <View style={{flex:1, flexDirection:'column', justifyContent:'center'}}>                <View style={{flexDirection:'row'}}>                    <TextInput style={{flex:0.8, borderWidth:1, height:20}}></TextInput>                    <View style={{flex:0.2}}></View> // spacer                </View>            </View>        );    }});

If you are simply looking to make the input relative to the screen width, an easy way would be to use Dimensions:

// De structure Dimensions from Reactvar React = require('react-native');var {  ...  Dimensions} = React; // Store width in variablevar width = Dimensions.get('window').width; // Use width variable in style declaration<TextInput style={{ width: width * .8 }} />

I've set up a working project here. Code is also below.

https://rnplay.org/apps/rqQPCQ

'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  View,  TextInput,  Dimensions} = React;var width = Dimensions.get('window').width;var SampleApp = React.createClass({  render: function() {    return (      <View style={styles.container}>        <Text style={{fontSize:22}}>Percentage Width In React Native</Text>        <View style={{marginTop:100, flexDirection: 'row',justifyContent: 'center'}}>            <TextInput style={{backgroundColor: '#dddddd', height: 60, width: width*.8 }} />          </View>      </View>    );  }});var styles = StyleSheet.create({  container: {    flex: 1,    marginTop:100  },});AppRegistry.registerComponent('SampleApp', () => SampleApp);