title: How to render Alert Component conditionally in react native
body: <p>I am trying to customize the Alert Component. For that in the render() method I am 
  wrapping  Alert inside the AlerBoxContainer class (that is placed in alertbox-container.tsx file) . I am rendering it by toggling using a prop.</p>
  
  <p><strong>Approach -1</strong> : By directly returning the Alert component if the condition is true or returning null if condition is false.</p>
  
  <p>This is in alertbox-container.tsx file: </p>
  
  <pre><code>import * as React from "react";
  import { Alert} from "react-native";
  import { connect } from "react-redux";
  import { Dispatch } from "redux";
  import { State } from "../../../../store/reducer";
  import * as constants from "../../constants";
  import * as selectors from "../../selectors";
  import { AlertBox, AlertBoxContainerProps } from "./alertbox";
  
  interface AlertBoxState {
      showAlert: boolean;
      blurred: boolean;
      appState: any;
  }
  
  class AlertBoxContainer extends React.Component&lt;AlertBoxContainerProps, AlertBoxState&gt; {
      constructor(props) {
          super(props);
  }
  
  render() {
      return this.props.isAlertVisible ?
          Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
              { text: constants.CANCEL_TEXT, onPress: () =&gt; this.props.onCancel() },
              { text: constants.EXIT_TEXT, onPress: () =&gt; this.props.onExit() }
          ])
          :  null;
  }
  }
  
  const mapStateToProps = (state: State): AlertBoxContainerProps =&gt; ({
      isAlertVisible: selectors.getIsAlertVisible(state)
  });
  
  const mapDispatchToProps = (dispatch: Dispatch&lt;core.features.workplace.Action&gt;): AlertBoxContainerProps =&gt; ({
      toggleAlertVisible: () =&gt; dispatch(core.features.workplace.toggleAlertVisible())
  });
  
  export default connect&lt;any, AlertBoxContainerProps, AlertBoxContainerProps&gt;(
      mapStateToProps,
      mapDispatchToProps
  )(AlertBoxContainer);
  </code></pre>
  
  <p>When I tried the above code I got the error :</p>
  
  <p>Property 'render' in type 'AlertBoxContainer' is not assignable to the same property in base type 'Component'.
    Type '() => void' is not assignable to type '() => ReactNode'.
      Type 'void' is not assignable to type 'ReactNode'.ts(2416)</p>
  
  <p>I also tried in the following way :</p>
  
  <p><strong>Aprroach - 2:</strong></p>
  
  <p>in alertbox-container.tsx :</p>
  
  <pre><code> render() {
  return (
      &lt;AlertBox
          isAlertVisible={this.props.isAlertVisible}
          onCancel={this.props.onCancel}
          onExit={this.props.onExit}
      /&gt;
  );
  }
  </code></pre>
  
  <p>In alertbox.tsx file :</p>
  
  <pre><code>import { Alert, View } from "react-native";
  import * as constants from "../../constants";
  export interface AlertBoxContainerProps {
      isAlertVisible?: boolean;
      toggleAlertVisible?: () =&gt; any;
      navigation?: any;
      hardwareBackPress?: () =&gt; any;
      onExit?: () =&gt; any;
      onCancel?: () =&gt; any;
  }
  
  export const AlertBox = (props: AlertBoxContainerProps) =&gt; {
      return props.isAlertVisible
      ? (
          Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
              { text: constants.CANCEL_TEXT, onPress: () =&gt; props.onCancel() },
              { text: constants.EXIT_TEXT, onPress: () =&gt; props.onExit() }
          ])
      )
      : null; 
  };
  </code></pre>
  
  <p>When I tried this code I got the error : " JSX element type 'void' is not a constructor function for JSX elements.ts(2605) "</p>
  
  <p>How can I get rid of these errors and render the alert box?</p>
  
  <p>When I tried with the second approach and by modifying the code I am able to render the Alert, with the following code :</p>
  
  <p><strong>Approach -3 :</strong> </p>
  
  <p>In alertbox.tsx :</p>
  
  <pre><code>export const AlertBox = (props: AlertBoxContainerProps) =&gt; {
  return (
      &lt;View&gt;
          {}
          {props.isAlertVisible
              ? Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
                    { text: constants.CANCEL_TEXT, onPress: () =&gt; props.onCancel() },
                    { text: constants.EXIT_TEXT, onPress: () =&gt; props.onExit() }
                ])
              : null}
      &lt;/View&gt;
  );
  </code></pre>
  
  <p>};</p>
  
  <p>But the code is with the weird syntax where in the view I need to place empty '{ }' other wise I get the error :</p>
  
  <p>" Type 'void' is not assignable to type 'ReactNode'.ts(2322)
  index.d.ts(725, 39): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes &amp; Readonly>' " .</p>