[Question] How to update MKButton label based on state change?

[rat-moonshine]

Hi,

I'm new to React Native, and working on an experimental app where I'm using MKButton. I have asked the same question at StackOverflow but didn't had any proper solution, so I thought to ask you here.

Based on my limited knowledge, I've constructed the MKButton in following way:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView
} from 'react-native';
import Icon from 'react-native-vector-icons/EvilIcons';
import {MKTextField, MKColor, MKButton} from 'react-native-material-kit';
import {connect} from 'react-redux';
import * as actions from '../actions';

const getButtonLabel = () =>
{
   if (!this.props.toUpdate)
   {
       return 'ADD';
   }
   else
   {
       return 'UPDATE';
   }
}
    
const AddButton = MKButton.coloredButton()
    .withText({getButtonLabel()}).build();

type Props = {};
class AddPerson extends Component<Props> 
{
    render() {
        return (
            return (
            <View style={styles.addButton}>
                <AddButton onPress={this.onButtonPress.bind(this)}/>
            </View>
        );
    }
}

const mapStateToProps = state => {
    return {
        toUpdate: state.toUpdate,
    };
};

export default connect(mapStateToProps, actions)(AddPerson);

But I couldn't able to get it work due to different undefined reference errors at different times, or just no rendering of the button at all.

I see there's a way documented at here, but this also so much of writing and not renders same as button created with MKButton.coloredButton().build(), unfortunately:

<MKButton
  backgroundColor={MKColor.Teal}
  shadowRadius={2}
  shadowOffset={{width:0, height:2}}
  shadowOpacity={.7}
  shadowColor="black"
  onPress={() => {
    console.log('hi, raised button!');
  }}
  >
  <Text pointerEvents="none"
        style={{color: 'white', fontWeight: 'bold',}}>
    RAISED BUTTON
  </Text>
</MKButton>

Can we do this in a .build() way and also change the label based on state change?

Thanks!

[kientux]

I don't think there is a way, because the builder version creates a Text internally and doesn't expose any reference outside. If you want it to be the same as builder version, try reading the source code to see what it is styled inside:

function coloredRaisedButton() {
  return new ButtonBuilder()
    .withStyle({
      borderRadius: 2,
      shadowRadius: 1,
      shadowOffset: { width: 0, height: 0.5 },
      shadowOpacity: 0.7,
      shadowColor: 'black',
      elevation: 4,
    })
    .withTextStyle({
      color: 'white',
      fontWeight: 'bold',
    });
}