CODEWITHSUNDEEP
javascriptreactjsreact-native
kirimi
kirimi

Reputation: 1400

react native-insert an image inside a component

I am using a library select multiple buttons and I am able to customize it. However, I would to insert an image inside this component.

const multipleData = [button1, button2, button3, button4, button5]
regionSelectHandler(){
     return(
     <View>
     {
      multipleData.map(
         (interest) =>
           <SelectMultipleButton
             key={interest}
             buttonViewStyle={{
               height: 60,
               width: "50",
             }}
             textStyle={{
               fontSize: 14,
             }}
             highLightStyle={{
               backgroundColor: 'white',
               textColor: 'black',
               borderTintColor: 'white',
               backgroundTintColor: '#6AAAC6',
               textTintColor: 'white',
             }}
             multiple={true}
             value={interest}
             selectable={this.state.multipleSelectedData.includes(interest)
             selected={this.state.multipleSelectedData.includes(interest)}
             singleTap={valueTap => this.trackSelection(valueTap)} />
         )
      }
      <View style={{borderWidth:0.5, borderColor:'gray'}}/>
     </View>
   )}

The code above will make 5 buttons and inside these buttons I want to insert an check mark image and when user clicks on the button check mark appears and when unclick it disappears.

Is there a way I could insert <Image style={{height:50, width:50}} source={require('../Assets/Image.png')}/> Image inside this component?

Upvotes: 1

Views: 356

Answers (1)

C&#225;ssio Sales
C&#225;ssio Sales

Reputation: 71

You can't insert and image into this component as it is because it doesn't take an image prop and doesn't have any logic in it to handle images. What you could do is fork the lib and add the logic to handle images the way you need.

This would require you to read through the lib's code and understand it well before you could basically implement a new feature into it. It is probably the best approach if you need this component to have this exact behaviour in many places. Don't forget to change the lib's reference to your fork instead of the original one.

Upvotes: 1

Related Questions