How to change Button on fetch response in react native?

Question

Based on my response returned from server i want to change the button upon the status of field friends_status from the below response

{
  "responseHeader": {
    "type": "314",
    "status": "200",
    "message": "Successfully found the profile"
  },
  "neighbourProfile": [{
      "friends_status": "210",
    },
    {
      "friends_status": "217",
    },
    {
      "friends_status": "219",
    },
    {
      "friends_status": "200",
    }
  ]
}

I want to change the button text as well as the button.How do i replace button with an image

Updated:

       if(neighbours.friend_status == '219'){
          <Button color={'#00BFA5'} title="Add"
          onPress={console.log('clicked')}/> 
       }
       else if(neighbours.friend_status == '208'){
          <Button color={'#ffffff'} title={"Add"} onPress={console.log('clicked')}/>
       }
       else if(neighbours.friend_status == '216')
       {

           <TouchableOpacity>
           <Image source={require('../Images/ic_reject.png')}/>
           <Image source={require('../Images/ic_request_accept.png')}/>
           </TouchableOpacity>

       }
       else if(neighbours.friend_status == '221'){

           <TouchableOpacity>
           <Image source={require('../Images/ic_reject.png')}/>
           <Image source={require('../Images/ic_request_accept.png')}/>
           </TouchableOpacity>

       }

Kaan Öner · Accepted Answer · 2017-12-21 08:40:59Z

1

I suggest you to create your own button component, you can pass your friends_status data as a props to the component than you can do this:

renderButtonContent(){
if (this.props.friend_status === xxx) {
    return (
        <TouchableOpacity>
            <Image />
        </TouchableOpacity>
    )
} else {
    return (
        <TouchableOpacity>
            <Text> add</Text>
        </TouchableOpacity>
    )
}

}

if my answer isn't clear feel free to ask any question to me. And you can also catch new props value with:

componentWillReceiveProps(nextProps){

}

answered Dec 21, 2017 at 8:40

Kaan Öner

826 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Val · Accepted Answer · 2017-12-21 08:43:05Z

0

To make <Image /> as a <Button />, you can just place an image with wrapping <Touchable />:

<View style={styles.buttonStyle}>
  <TouchableWithoutFeedback onPress={() => {}}>
    <Image source={{uri: YOUR_IMAGE_URI}} />
  </TouchableWithoutFeedback>
</View>

<TouchableWithoutFeedback /> (and other Touchables) with content in it, is very much simular to <Button /> with custom content.

Check TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight to pick one that suit your needs.

edited Dec 21, 2017 at 8:43

answered Dec 21, 2017 at 8:37

Val

22.9k11 gold badges72 silver badges87 bronze badges

8 Comments

Anu Over a year ago

if(neighbours.friend_status == '216') 			   { 				   return( 				   <TouchableOpacity> 				   <Image source={require('../Images/ic_reject.png')} style={{width:10, height:10}}/> 				   <Image source={require('../Images/ic_request_accept.png') style={{width:10,height:10}}}/> 				   </TouchableOpacity> 				   ) 			   }

i've tried like this but got error

Val Over a year ago

your second <Image />'s source does not have proper end of curly braces }

Anu Over a year ago

if(neighbours.friend_status == '219'){<Button color={'#00BFA5'} title={"Add"} onPress={console.log('clicked')}/> }  else if(neighbours.friend_status == '216')  {  <TouchableOpacity> <Image source={require('../Images/ic_reject.png')} style={{width:10, height:10}}/><Image source={require('../Images/ic_request_accept.png')} style={{width:10,height:10}}/></TouchableOpacity> }

This is my updated code

Val Over a year ago

in jsx it would be { neighbours.friend_status == '219' && <Button /> } { neighbours.friend_status == '216' && <Button /> } just list them one by one.

Val Over a year ago

@anu please read this Inline If with Logical && Operator. it would really benefit coding life. reactjs.org/docs/…

|

Collectives™ on Stack Overflow

How to change Button on fetch response in react native?

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related