Styjun

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.

Approach -1 : By directly returning the Alert component if the condition is true or returning null if condition is false.

This is in alertbox-container.tsx file:

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<AlertBoxContainerProps, AlertBoxState> 
 constructor(props) 
 super(props);


render() 
 return this.props.isAlertVisible ?
 Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
 text: constants.CANCEL_TEXT, onPress: () => this.props.onCancel() ,
 text: constants.EXIT_TEXT, onPress: () => this.props.onExit() 
 ])
 : null;



const mapStateToProps = (state: State): AlertBoxContainerProps => (
 isAlertVisible: selectors.getIsAlertVisible(state)
);

const mapDispatchToProps = (dispatch: Dispatch<core.features.workplace.Action>): AlertBoxContainerProps => (
 toggleAlertVisible: () => dispatch(core.features.workplace.toggleAlertVisible())
);

export default connect<any, AlertBoxContainerProps, AlertBoxContainerProps>(
 mapStateToProps,
 mapDispatchToProps
)(AlertBoxContainer);

When I tried the above code I got the error :

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)

I also tried in the following way :

Aprroach - 2:

in alertbox-container.tsx :

 render() 
return (
 <AlertBox
 isAlertVisible=this.props.isAlertVisible
 onCancel=this.props.onCancel
 onExit=this.props.onExit
 />
);

In alertbox.tsx file :

import Alert, View from "react-native";
import * as constants from "../../constants";
export interface AlertBoxContainerProps 
 isAlertVisible?: boolean;
 toggleAlertVisible?: () => any;
 navigation?: any;
 hardwareBackPress?: () => any;
 onExit?: () => any;
 onCancel?: () => any;


export const AlertBox = (props: AlertBoxContainerProps) => 
 return props.isAlertVisible
 ? (
 Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
 text: constants.CANCEL_TEXT, onPress: () => props.onCancel() ,
 text: constants.EXIT_TEXT, onPress: () => props.onExit() 
 ])
 )
 : null; 
;

When I tried this code I got the error : " JSX element type 'void' is not a constructor function for JSX elements.ts(2605) "

How can I get rid of these errors and render the alert box?

When I tried with the second approach and by modifying the code I am able to render the Alert, with the following code :

Approach -3 :

In alertbox.tsx :

export const AlertBox = (props: AlertBoxContainerProps) => 
return (
 <View>
 
 props.isAlertVisible
 ? Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
 text: constants.CANCEL_TEXT, onPress: () => props.onCancel() ,
 text: constants.EXIT_TEXT, onPress: () => props.onExit() 
 ])
 : null
 </View>
);

;

But the code is with the weird syntax where in the view I need to place empty ' ' other wise I get the error :

" 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 & IntrinsicClassAttributes & Readonly>' " .

remove null from else condition and write a <div /> instead

Explanation:

A react component should always return a jsx component, so in your case, if the condition is false, you're returning null, so just return a dummy jsx (say <div /> ) element.

 <View>
 
 props.isAlertVisible
 && Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
 text: constants.CANCEL_TEXT, onPress: () => props.onCancel() ,
 text: constants.EXIT_TEXT, onPress: () => props.onExit() 
 ])
 
</View>

If null is creating the issue then you could do a short-circuit
Hope it helps !

This issue is that Alert.alert() is not a Component, it’s a function (calling the alert() method). The render function must be passed a Component, so that is why you are getting the errors.

Alert.alert() is easy to use and handy. It doesn’t have to be in the render method at all to work, in fact it doesn’t even need to be in a Component to work. All you need to do is call it when you want it to come up. For example, here is how you could bring up an alert at the press of a button:

class Example extends Component<*, *> 
  
 callAlert = () => 
    Alert.alert(
      “Alert title”,
      “Alert explanation”,
      [
        
          text: “Yes”,
 onPress: () => console.log(“Yes pressed”),
        ,
        
          text: “No”,
          onPress: () => console.log('No Pressed'),
        ,
      ],
       cancelable: false 
    );
  ;

  render() 
    return (
      <TouchableOpacity onPress=this.callAlert>
        <Text>
 Alert Button
        </Text>
      </TouchableOpacity>
    );
  

In your case, whenever you toggle your prop, call the alert and everything should be peachy!