TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof ... renderIf"' has no compatible call signatures

Question

Its base on https://github.com/react-native-training/reactxp-starter Also I am new to TypeScript!

The renderIf is a regular js function, for some reason I got the error with type. I am not really clear where the type should have been to let the renderIf function run. Any thought or pointer will be great! Since ReactXP is really a thin wrapper above React Native.

Thanks!

/*
* This file demonstrates a basic ReactXP app.
*/

import RX = require('reactxp');
import renderIf = require('./util/renderIf');
//import { VirtualListView, VirtualListViewItemInfo } from 'virtuallistview';

const styles = {
    container: RX.Styles.createViewStyle({
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#0a84c1'
    }),
    helloWorld: RX.Styles.createTextStyle({
        color: 'white',
        fontSize: 48,
        fontWeight: 'bold',
        marginBottom: 28
    }),
    welcome: RX.Styles.createTextStyle({
        color: 'white',
        fontSize: 32,
        marginBottom: 12
    }),
    instructions: RX.Styles.createTextStyle({
        fontSize: 16,
        color: '#aaa',
        marginBottom: 40
    }),
    docLink: RX.Styles.createLinkStyle({
        fontSize: 16,
        color: 'blue'
    }),
    emotionalInput: RX.Styles.createLinkStyle({
        fontSize: 32,
        height: 32,
    }),

    questionPage: RX.Styles.createTextStyle({
        color: 'white',
        fontSize: 48,
        fontWeight: 'bold',
        marginBottom: 28
    }),

    questionPageShow: RX.Styles.createTextStyle({
        color: 'white',
        fontSize: 48,
        fontWeight: 'bold',
        marginBottom: 28
    }),

    questionPageHide: RX.Styles.createTextStyle({
        color: 'white',
        fontSize: 48,
        fontWeight: 'bold',
        marginBottom: 28,
    }),
};

// interface QuestionItem extends VirtualListViewItemInfo {
//     text: string;
// }
interface QuestionProps {
}
interface QuestionState {
    questionNow: number;
}

class App extends RX.Component<QuestionProps, QuestionState> {
    private _translationValue: RX.Animated.Value;
    private _translationValue2: RX.Animated.Value;
    private _animatedStyle: RX.Types.AnimatedTextStyleRuleSet;
    private _animatedStyleNextQuestion: RX.Types.AnimatedTextStyleRuleSet;

    constructor() {
        super();

        this.state = {
            questionNow: 1,
        };

        this._translationValue = new RX.Animated.Value(-100);
        this._animatedStyle = RX.Styles.createAnimatedTextStyle({
            transform: [
                {
                    translateY: this._translationValue
                }
            ]
        });

        this._translationValue2 = new RX.Animated.Value(-100);
        this._animatedStyleNextQuestion = RX.Styles.createAnimatedTextStyle({
            transform: [
                {
                    translateY: this._translationValue2
                }
            ]
        });
    }

    componentDidMount() {
        // let animation = RX.Animated.timing(this._translationValue, {
        //       toValue: 0,
        //       easing: RX.Animated.Easing.OutBack(),
        //       duration: 500
        //     }
        // );
        // animation.start();
        let animationParalle = RX.Animated.parallel([
            RX.Animated.timing(this._translationValue, {
              toValue: 0,
              easing: RX.Animated.Easing.OutBack(),
              duration: 1000
            }),
            RX.Animated.timing(this._translationValue2, {
              toValue: 0,
              easing: RX.Animated.Easing.OutBack(),
              duration: 3000
            }),
        ]);

        animationParalle.start();
    }
    guessResult(e: any) {
        console.log(e);
    }
    pressAction(e: any) {
        console.log(e);
    }
    goNext(event: any) {
        console.log(event);
        const newCount = this.state.questionNow + 1;
        this.setState({
            questionNow: newCount,
        });
        console.log(newCount);
    }

    render(): JSX.Element | null {
        console.log(renderIf);
        return (
            <RX.View style={ styles.container }>
                <RX.Animated.Text style={ [styles.helloWorld, this._animatedStyle] }>
                    Go Go Go
                </RX.Animated.Text>

                <RX.Animated.Text style={ [styles.questionPage, this._animatedStyleNextQuestion] }>
                    NEXT Question!
                </RX.Animated.Text>

                {renderIf(
                    this.state.questionNow === 1,
                    <RX.Text> New Stuff</RX.Text>
                )}

                {/* 
                    Question 1
                */}
                <RX.Text style={ styles.welcome }>
                    Question {this.state.questionNow}
                    How are you?
                    <RX.Button
                        style={ styles.welcome }
                        onPressOut={this.goNext.bind(this)}>
                        Great!
                    </RX.Button>

                    <RX.Button
                        style={ styles.welcome }
                        onPressOut={this.goNext.bind(this)}>
                        Great!
                    </RX.Button>
                </RX.Text>



                {/* 
                    Question 2
                */}
                <RX.Text style={ styles.welcome }>
                    Question {this.state.questionNow}
                    How are you?
                    <RX.Button
                        style={ styles.welcome }
                        onPressOut={this.goNext.bind(this)}>
                        Great!
                    </RX.Button>

                    <RX.Button
                        style={ styles.welcome }
                        onPressOut={this.goNext.bind(this)}>
                        Great!
                    </RX.Button>
                </RX.Text>




                <RX.TextInput style={ styles.emotionalInput } onChangeText={this.guessResult}/>
                <RX.Text>Text</RX.Text>
            </RX.View>
        );
    }
}

export = App;

error

ERROR in [at-loader] ./src/App.tsx:154:18
    TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof "/Users/app/src/util/renderIf"' has no compatible call signatures.

renderIf.ts

export default function renderIf(condition: any, content: any) {
    if (condition) {
        return content;
    } else {
        return null;
    }
}

Answer 1

Wow.... its crazy, actually its because I did not add .default when I call renderIf.... BUT I can't really even do import renderIf = require('./util/renderIf').default; so I have to do import renderIf = require('./util/renderIf');.. which is strange