title: Is it possible to customize width of Picker in React Native?
body: <p><br>Im a newbie using React Native.
  <br>I jus create an application as on the screenshot.
  <br>I want to make the <code>dropdown</code> or <code>Picker</code> component a bit smaller.
  <br>But I cant do it, Im looking for a guide to solve this.
  <br>Thanks.</p>
  
  <p>My application:
  <a href="https://i.stack.imgur.com/6rrop.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6rrop.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import { Item, Picker, TouchableOpacity, View, ListView, Text } from 'react-native'
  import { connect } from 'react-redux'
  import { Icon, Header } from 'react-native-elements'
  import { Button, Container, Content, Footer, Title} from 'native-base'
  
  // For empty lists
  // import AlertMessage from '../Components/AlertMessage'
  
  // Styles
  import styles from './Styles/MainRestoStyles'
  
  class MainRestoScreen extends React.Component {
    constructor (props) {
      super(props)
  
      /* ***********************************************************
      * STEP 1
      * This is an array of objects with the properties you desire
      * Usually this should come from Redux mapStateToProps
      *************************************************************/
      const dataObjects = {
        first: [
          {title: 'First Title', description: 'First Description'},
          {title: 'Second Title', description: 'Second Description'},
          {title: 'Third Title', description: 'Third Description'},
          {title: 'Fourth Title', description: 'Fourth Description'},
          {title: 'Fifth Title', description: 'Fifth Description'},
          {title: 'Sixth Title', description: 'Sixth Description'},
          {title: 'Seventh Title', description: 'Seventh Description'},
          {title: 'Eighth Title', description: 'Eighth Description'},
          {title: 'Ninth Title', description: 'Ninth Description'},
          {title: 'Tenth Title', description: 'Tenth Description'}
        ],
        second: [
          {title: 'Eleventh Title', description: 'Eleventh Description'},
          {title: '12th Title', description: '12th Description'},
          {title: '13th Title', description: '13th Description'},
          {title: '14th Title', description: '14th Description'},
          {title: '15th Title', description: '15th Description'},
          {title: '16th Title', description: '16th Description'},
          {title: '17th Title', description: '17th Description'},
          {title: '18th Title', description: '18th Description'},
          {title: '19th Title', description: '19th Description'},
          {title: '20th Title', description: '20th Description'},
          {title: 'BLACKJACK!', description: 'BLACKJACK! Description'}
        ]
      }
      /* ***********************************************************
      * STEP 2
      * Teach datasource how to detect if rows are different
      * Make this function fast!  Perhaps something like:
      *   (r1, r2) =&gt; r1.id !== r2.id}
      *   The same goes for sectionHeaderHasChanged
      *************************************************************/
      const rowHasChanged = (r1, r2) =&gt; r1 !== r2
      const sectionHeaderHasChanged = (s1, s2) =&gt; s1 !== s2
  
      // DataSource configured
      const ds = new ListView.DataSource({rowHasChanged, sectionHeaderHasChanged})
  
      // Datasource is always in state
      this.state = {
        dataSource: ds.cloneWithRowsAndSections(dataObjects)
      }
    }
  
    /* ***********************************************************
    * STEP 3
    * `renderRow` function -How each cell/row should be rendered
    * It's our best practice to place a single component here:
    *
    * e.g.
      return &lt;MyCustomCell title={rowData.title} description={rowData.description} /&gt;
    *************************************************************/
    renderRow (rowData, sectionID) {
      // You can condition on sectionID (key as string), for different cells
      // in different sections
      return (
        &lt;TouchableOpacity style={styles.row}&gt;
          &lt;Text style={styles.boldLabel}&gt;Section {sectionID} - {rowData.title}&lt;/Text&gt;
          &lt;Text style={styles.label}&gt;{rowData.description}&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      )
    }
  
    /* ***********************************************************
    * STEP 4
    * If your datasource is driven by Redux, you'll need to
    * reset it when new data arrives.
    * DO NOT! place `cloneWithRowsAndSections` inside of render, since render
    * is called very often, and should remain fast!  Just replace
    * state's datasource on newProps.
    *
    * e.g.
      componentWillReceiveProps (newProps) {
        if (newProps.someData) {
          this.setState(prevState =&gt; ({
            dataSource: prevState.dataSource.cloneWithRowsAndSections(newProps.someData)
          }))
        }
      }
    *************************************************************/
  
    // Used for friendly AlertMessage
    // returns true if the dataSource is empty
    noRowData () {
      return this.state.dataSource.getRowCount() === 0
    }
  
    render () {
      return (
        &lt;Container&gt;
          &lt;View style={styles.toolbar}&gt;
            &lt;Text style={styles.toolbarButton}&gt;&lt;/Text&gt;
            &lt;Icon name='bowl' type='entypo' size={40} color='white'/&gt; 
            &lt;Text style={styles.toolbarButton}&gt;&lt;/Text&gt;
          &lt;/View&gt;
          &lt;Content&gt;
          &lt;Picker&gt; 
              &lt;Picker.Item  
                label='Hello' 
                value='hello' 
              /&gt; 
            &lt;/Picker&gt;
            &lt;ListView
              contentContainerStyle={styles.listContent}
              dataSource={this.state.dataSource}
              onLayout={this.onLayout}
              renderRow={this.renderRow}
              enableEmptySections
            /&gt;
          &lt;/Content&gt;
          &lt;Footer style={ styles.bars }&gt;
            &lt;Button transparent style={ styles.buttonsMenu }&gt;
              &lt;Icon name='location' type='entypo' color='white' size={30}/&gt;
            &lt;/Button&gt;
            &lt;Button transparent style={ styles.buttonsMenu }&gt;
              &lt;Icon name='heart' type='foundation' color='white' size={30}/&gt;
            &lt;/Button&gt;
            &lt;Button transparent style={ styles.buttonsMenu }&gt;
              &lt;Icon name='bell' type='entypo' color='white' size={30}/&gt;
            &lt;/Button&gt;
          &lt;/Footer&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      // ...redux state to props here
    }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(MainRestoScreen)</code></pre>
  </div>
  </div>
  </p>
  
  <p>update:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;View&gt;
    &lt;Picker style={{ marginLeft: 80, marginRight: 80 }}&gt; 
      &lt;Picker.Item  
        label='Hello' 
        value='hello' 
      /&gt; 
    &lt;/Picker&gt;
  &lt;/View&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>it's just affect the text, I want to make the whole <code>Pikcer</code> become smaller.
  <a href="https://i.stack.imgur.com/04dDV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/04dDV.png" alt="enter image description here"></a></p>