Conditional rendering of components in a custom custom button

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

I am having problems as I cannot effectively use conditional rendering of components. My goal here is to load this button conditionally.

This is a strange problem and I have been trying to solve it all day, I use renderIf technique in one of my application scenes and it works great . However, when I use it in this component, it crashes immediately, throwing an NSException.

I used the terminal command npm install render-if -save to install a package that worked fine for the scene, but not for this component.

Any help would be hugely appreciated and any suggestions for alternative methods would be appreciated as well.

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;