title: react native gradient button
body: <p>I have a problem with my btn component, I am using react-native-linear-gradient lib...</p>
  
  <p><strong>btn.js</strong></p>
  
  <pre><code>import React,{ Component } from 'react';
  import {View,Text,StyleSheet, TouchableOpacity} from 'react-native';
  import {Button,Item} from 'native-base';
  
  import LinearGradient from 'react-native-linear-gradient';
  
  class GradientBtn extends Component {
      constructor(props){
          super(props);
      }
      render(){
      return(     
          &lt;LinearGradient colors={['#d7d7d7', '#fafafa', '#e8e8e8']} 
          style={[styles.btnContainer,{height:this.props.h,width:this.props.w}]}&gt;
              &lt;Text style={styles.btn}&gt;{this.props.name}&lt;/Text&gt;
          &lt;/LinearGradient&gt;
  
  
  
  
  
      );
    }
  }
  
  var styles = StyleSheet.create({
      btnContainer:{
          backgroundColor:'#f0f0f0',
          justifyContent:'center',
          marginLeft:1
      },
      btn:{
          textAlign:'center',
          color:'#000',
          fontWeight:'700',
          fontSize:12
      }
  });
  
  export default GradientBtn;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>&lt;View style={{flexDirection:'row',justifyContent:'space-between',marginTop:5}}&gt;
      &lt;TouchableOpacity&gt;
          &lt;GradientBtn h={35} w={'24.55%'} name="Open Corrective"/&gt;
      &lt;/TouchableOpacity&gt;
      &lt;TouchableOpacity&gt;
          &lt;GradientBtn h={35} w={'24.55%'} name="Open Corrective"/&gt;
      &lt;/TouchableOpacity&gt;
      &lt;TouchableOpacity&gt;
          &lt;GradientBtn h={35} w={'24.55%'} name="Open Corrective"/&gt;
      &lt;/TouchableOpacity&gt;
      &lt;TouchableOpacity&gt;
          &lt;GradientBtn h={35} w={'24.55%'} name="Open Corrective"/&gt;
      &lt;/TouchableOpacity&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>when I remove TouchableOpacity tag from component then the view will ok, but I want touch opacity on that btn when I placed this tag then my view will compress means out the width and didn't see proper btn..</p>