Icon color not changed on press in react native

up vote
0
down vote

favorite

This is my code

import React, {

    Component

} from 'react'



import {

Body,

Text,

View

} from 'native-base'

import {

Icon

} from 'react-native-elements'



export default class App extends Component {

    constructor(props) {

    super(props);

    this.state = {

        iconColour: "red"

      }

  }



   func() {

    console.warn("changed")

    this.setState({

        iconColor: "blue"

    })

  }



 render() {

    return (

        <View>

    <Text> textInComponent </Text>

    <Icon name='map' color={this.state.iconColour} onPress= 

       {()=>this.func()}/>

    </View>

       )

     } 

 }

i want to change the color of icon when pressed

but the color does not update

the function works and state changed but the view is not updated

i think i missed a simple thing

i searched but i can't find similar situation

i think a command should run to render the view with new properties

thanks for your helps

asked Nov 9 at 22:15

Amin Joharinia

314

add a comment |

up vote
0
down vote

favorite

This is my code

import React, {

    Component

} from 'react'



import {

Body,

Text,

View

} from 'native-base'

import {

Icon

} from 'react-native-elements'



export default class App extends Component {

    constructor(props) {

    super(props);

    this.state = {

        iconColour: "red"

      }

  }



   func() {

    console.warn("changed")

    this.setState({

        iconColor: "blue"

    })

  }



 render() {

    return (

        <View>

    <Text> textInComponent </Text>

    <Icon name='map' color={this.state.iconColour} onPress= 

       {()=>this.func()}/>

    </View>

       )

     } 

 }

i want to change the color of icon when pressed

but the color does not update

the function works and state changed but the view is not updated

i think i missed a simple thing

i searched but i can't find similar situation

i think a command should run to render the view with new properties

thanks for your helps

asked Nov 9 at 22:15

Amin Joharinia

314

add a comment |

up vote
0
down vote

favorite

This is my code

import React, {

    Component

} from 'react'



import {

Body,

Text,

View

} from 'native-base'

import {

Icon

} from 'react-native-elements'



export default class App extends Component {

    constructor(props) {

    super(props);

    this.state = {

        iconColour: "red"

      }

  }



   func() {

    console.warn("changed")

    this.setState({

        iconColor: "blue"

    })

  }



 render() {

    return (

        <View>

    <Text> textInComponent </Text>

    <Icon name='map' color={this.state.iconColour} onPress= 

       {()=>this.func()}/>

    </View>

       )

     } 

 }

i want to change the color of icon when pressed

but the color does not update

the function works and state changed but the view is not updated

i think i missed a simple thing

i searched but i can't find similar situation

i think a command should run to render the view with new properties

thanks for your helps

asked Nov 9 at 22:15

Amin Joharinia

314

This is my code

import React, {

    Component

} from 'react'



import {

Body,

Text,

View

} from 'native-base'

import {

Icon

} from 'react-native-elements'



export default class App extends Component {

    constructor(props) {

    super(props);

    this.state = {

        iconColour: "red"

      }

  }



   func() {

    console.warn("changed")

    this.setState({

        iconColor: "blue"

    })

  }



 render() {

    return (

        <View>

    <Text> textInComponent </Text>

    <Icon name='map' color={this.state.iconColour} onPress= 

       {()=>this.func()}/>

    </View>

       )

     } 

 }

i want to change the color of icon when pressed

but the color does not update

the function works and state changed but the view is not updated

i think i missed a simple thing

i searched but i can't find similar situation

i think a command should run to render the view with new properties

thanks for your helps

react-native

asked Nov 9 at 22:15

Amin Joharinia

314

asked Nov 9 at 22:15

Amin Joharinia

314

asked Nov 9 at 22:15

Amin Joharinia

314

asked Nov 9 at 22:15

Amin Joharinia

314

asked Nov 9 at 22:15

Amin Joharinia

314

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

Just change iconColor: "blue" to iconColour: "blue":))

answered Nov 9 at 23:27

Hameda169

1087

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233952%2ficon-color-not-changed-on-press-in-react-native%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

Just change iconColor: "blue" to iconColour: "blue":))

answered Nov 9 at 23:27

Hameda169

1087

add a comment |

up vote
1
down vote

Just change iconColor: "blue" to iconColour: "blue":))

answered Nov 9 at 23:27

Hameda169

1087

add a comment |

up vote
1
down vote

Just change iconColor: "blue" to iconColour: "blue":))

answered Nov 9 at 23:27

Hameda169

1087

Just change iconColor: "blue" to iconColour: "blue":))

answered Nov 9 at 23:27

Hameda169

1087

answered Nov 9 at 23:27

Hameda169

1087

answered Nov 9 at 23:27

Hameda169

1087

answered Nov 9 at 23:27

Hameda169

1087

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk