Setting disabled through setState

[CamiloTerevinto]

I am using this:

import { RoundButton } from 'react-native-button-component';

<View style={{width: "100%", justifyContent: "center", alignItems: "center"}}>
    <RoundButton text="Terminar compra" onPress={() => navigate("PurchaseConfirmation", { data: this.state.basket})} 
        disabled={this.state.anyProductSelected == false}
        style={{width: 125, height: 35, marginBottom: 5, marginTop: 5}}>
    </RoundButton>
</View>

And I am updating the state with:

addHandler = (index: number, product: Product) : number => {
        ...
        this.setState({ anyProductSelected: true});
    }

But the button stays disabled (while the rest of the UI updates just fine).

Am I doing something wrong or this not supported?

More data:

• "react": "16.0.0-alpha.12",
• "react-native": "^0.47.1",
• "react-native-button-component": "^0.1.24",
• typescript 2.3
• Android 7 (emulator)

[CamiloTerevinto]

If I instead use the multiple state support like this:

<RoundButton buttonState={this.state.buttonState}
    states={{
       disabled: {
           text: "Terminar compra",
           disabled: true,
           backgroundColors: ["#fff", "#fff"],
           style: {width: 125, height: 35, marginBottom: 5, marginTop: 5}
        },
        enabled: {
            text: "Terminar compra",
            disabled: false,
            backgroundColors: ["#4dc7a4", "#4dc7a4"],
            style: {width: 125, height: 35, marginBottom: 5, marginTop: 5},
            onPress: () => navigate.navigate("PurchaseConfirmation", { data: this.state.basket})
        }
    }}>
</RoundButton>

Then:

• I can click the button
• The button changes to the appropriate color BUT is dimmed as if it was disabled
• Upon click the button the color turns to the actual enabled color
• The transition effect is not nice for a disabled->enabled transition

[jacklam718]

@CamiloTerevinto Thanks for report the issue with detailed information. I just fixed the issue it building on Travis CI right now, will let you know when it's done.

[jacklam718]

@CamiloTerevinto Fixed in v0.1.25

[CamiloTerevinto]

@jacklam718 Glad to hear that, which of the two problems did you fix?

[jacklam718]

@CamiloTerevinto I only fixed can not update disabled state issue.

[CamiloTerevinto]

@jacklam718 Do I need to re-run react-native link? I still have the problem after npm-update installed 0.1.25

[jacklam718]

@CamiloTerevinto Same issue?

[CamiloTerevinto]

@jacklam718 Yes, the problem (first case) still exists. I just reinstalled the application on the emulator to confirm.

[jacklam718]

@CamiloTerevinto
I would suggest:

• Kill your react-native's dev server
• Remove npm_modules
• Run yarn OR npm install to install dependencies (make sure the version of react-native-button-component is correct)
• Run react-native link again
• Start you react-native dev server again by npm start

[CamiloTerevinto]

@jacklam718 I have just done this:

1. remove the app from the emulator
2. close the react-native server
3. delete node_modules
4. run npm install
5. checked that your package.json says "0.1.25"
6. run react-native run-android

Problem still exists unfortunately. I added this to confirm it's not something I'm doing wrong:

<Text>{this.state.anyProductSelected.toString()}</Text>

This shows: "false" then "true" as expected, but the button is still disabled

[jacklam718]

@CamiloTerevinto
Run this command cat node_modules/react-native-button-component/package.json | grep "version" to check the version.

[jacklam718]

@CamiloTerevinto Is it really 0.1.25?

[CamiloTerevinto]

@jacklam718 As you can see in the following image, it is really 0.1.25:

(this from node_modules/react-native-button-component/package.json

[jacklam718]

@CamiloTerevinto Then, I nothing can help you. You can just fork this repo and directly change it.