CODEWITHSUNDEEP
android-layoutreact-nativenine-patch
Arpit
Arpit

Reputation: 438

How to use a 9 Patch image in android react native?

I have a 9 patch image of a chat bubble. I am placing text inside an image component. I would want the image to stretch based on the content in the text box.

This is my layout 

<View style={{flexDirection: "row"}}>

   <View style={{flex: 0.8, backgroundColor:'#929238'}}>

       <Image source={require('../../patch.9.png')} style={{ flexWrap:'wrap'}}>
          <View style={{marginVertical: 15, marginLeft: 20, backgroundColor: 'white', padding:10}}>
             <Text style={{color: 'black'}}>{this.props.data.content}</Text>
          </View>
       </Image>
    </View>
    <View style={{flex: 0.2}}></View>
</View>

Upvotes: 3

Views: 3790

Answers (1)

Patrick R
Patrick R

Reputation: 6857

<Image> with nested content is no longer supported in React-Native.

There is good library to use 9 patch drawable image in react-native such as https://github.com/madsleejensen/react-native-image-capinsets

Below is implementation code :

<View style = {styles.bubbleImageContainerStyle}>
     <ImageCapInset source = {Images.bubbleShape} capInsets = {{top:30, right:30, bottom:20, left:30}} style = {styles.bubbleImageStyle}/> 
     <Text style = {styles.textDescriptionStyle}>{this.props.description}</Text>
</View>

Below is CSS :

bubbleImageContainerStyle: {        
        marginHorizontal : 15,        
},
bubbleImageStyle: {        
        position :'absolute',
        height : '100%',
        width : '100%',        
 },
textDescriptionStyle:{                       
        marginHorizontal:15,
        marginTop : 25,       
        fontFamily: Fonts.regular,
        fontSize: 13,
        color: Colors.grayTextColor,       
},

Please find attached 9 patch drawable sample bubble image.

enter image description here

Note: We have given highest resolution(4.x) image, you can make different resolution images like 1.x, 1.5x, 2.x, 3.x respectively.

Upvotes: 2

Related Questions