Conditional rendering of components in a react-native custom button

Question

I am an old programmer learning to use react-native.

I'm having trouble as I seem unable to effectively utilise conditional rendering of components. My goal here is to load this button conditionally.

This is a strange problem and I have spent the entire day trying to solve it, I am using the renderIf technique in one of the application's scenes and it is working perfectly. However, when I use it in this component it immediately crashes, throwing an NSException.

I have used the terminal command npm install render-if --save to install the package which worked perfectly for the scene but not for this component.

Any help would be hugely appreciated and any suggestions on alternative methods would also be appreciated.

GeneralButton.js

'use strict';

import React, { Component } from 'react';
import {
  StyleSheet,
  TouchableHighlight,
  View,
  Text,
  Dimensions,
  Platform,
} from 'react-native';

import renderIf from 'render-if';

class GeneralButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      render: true
    }
  }

  getWidth(){
    let width, percent;
    if (this.props.percent == true) {
      let screenWidth = Dimensions.get('window').width;
      width = (screenWidth / 100) * this.props.width;
      return width;
    } else {
      percent = false;
      width = this.props.width != null ? this.props.width : 300;
      return width;
    }
  }

  render() {
    return (
      {renderIf(this.state.render)(
        <TouchableHighlight underlayColor='rgba(255, 255, 255, 0.2)' onPress={this.props.onPress}>
          <View style={styles.button} width={this.getWidth()}>
            <Text style={styles.buttonText}>
              {this.props.text}
            </Text>
          </View>
        </TouchableHighlight>
      )}
    );
  }
}

const styles = StyleSheet.create({
  button: {
    height: 44,
    borderColor: 'rgba(255, 255, 255, 0.8)',
    borderWidth: StyleSheet.hairlineWidth,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 10,
    paddingRight: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
    ...Platform.select({
      ios: {
        fontFamily: 'OpenSans-Light',
      },
      android: {
        fontFamily: 'opensanslight',
      },
    })
  },
});

module.exports = GeneralButton;

Answer 1

In React, component renders function returns a component instance. Wrap your render content in View. In your case there is no need to use renderIf, you can use inline if:

render() {
  return (
    <View>
      {this.state.render &&
        <TouchableHighlight underlayColor='rgba(255, 255, 255, 0.2)' onPress={this.props.onPress}>
          <View style={styles.button} width={this.getWidth()}>
            <Text style={styles.buttonText}>
              {this.props.text}
            </Text>
          </View>
        </TouchableHighlight>
      }
    </View>
  )
}