how to set the dynamic width of view in react native code example

Example 1: getting view height dynamically in react native

import React, { Component } from 'react';
import ReactNative, { AppRegistry, View, TouchableOpacity, findNodeHandle, Text, StyleSheet } from 'react-native';


export default class App extends Component {

  constructor() {
    super();

    this.state = { x: null, y: null, width: null, height: null }
  }

  calculateDimensions = () => {
    this.refs.innerView.measureLayout(ReactNative.findNodeHandle(this.refs.containerView), (xPos, yPos, Width, Height) => {
      this.setState({ x: xPos, y: yPos, width: Width, height: Height });
    });
  }

  render() {
    return (
      <View ref="containerView" style={styles.container}>
        <View ref="innerView" style={styles.innerView}>
          <Text style={styles.text}>X: {this.state.x}</Text>
          <Text style={styles.text}>Y: {this.state.y}</Text>
          <Text style={styles.text}>Width: {this.state.width}</Text>
          <Text style={styles.text}>Height: {this.state.height}</Text>
        </View>

        <TouchableOpacity activeOpacity={0.8} style={styles.ButtonDesign} onPress={this.calculateDimensions}>
          <Text style={styles.text}>Calculate Blue Box's Dimensions</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    innerView: {
      backgroundColor: '#ff5722',
      width: '70%',
      height: '70%',
      marginBottom: 50,
      justifyContent: 'center',
      alignItems: 'center'
    },
    ButtonDesign: {
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      paddingHorizontal: 10,
      height: 50,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#0091ea',
    },
    text: {
      color: 'white',
      fontSize: 17
    },

  });

Example 2: react native dynamic view size

const messages = [
              'hello',
              'this is supposed to be a bit of a long line.',
              'bye'
              ];
return (
  <View style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: 150,
            alignItems: 'flex-end',
            justifyContent: 'flex-start',
            backgroundColor: '#fff',
            }}>

{messages.map( (message, index) => (
  <View key={index} style={{
                  flexDirection: 'row',
                  marginTop: 10
                }}>
    <View style={{
                  flex: -1,
                  marginLeft: 5,
                  marginRight: 5,
                  backgroundColor: '#CCC',
                  borderRadius: 10,
                  padding: 5,
                }}>
      <Text style={{
                    fontSize: 12,
                    }}>
        {message}
      </Text>
    </View>
    <Image source={require('some_path')} style={{width:30,height:30}} />
   </View> 
  ))} 
 </View>
)