反应本机元素检测

Question

I want in my react-native app detect if user have a touch ID sensor or not and then if he have I want to display button with native element action instead of just normal action button. When I created if statement it shows me an error. I'm using 'create-react-native-app' with expo client SDK.

error message

Code

class LoginButton extends React.Component {
    state = {
        waiting: false,
    };

    render() {
        let authFunction;
        if (NativeModules.ExponentFingerprint.hasHardwareAsync() === true) {
            if (Platform.OS === 'android') {
                authFunction = async () => {
                    this.setState({waiting: true});
                    try {
                        let result = await NativeModules.ExponentFingerprint.authenticateAsync();
                        if (result.success) {
                            alert('Udało Ci się zalogować')
                        } else {
                            alert('Logowanie nie udane')
                        }
                    }
                    finally {
                        this.setState({waiting: false})
                    }
                };
            } else if (Platform.OS === 'ios') {
                authFunction = async () => {
                    let result = await NativeModules.ExponentFingerprint.authenticateAsync(
                        'Zaloguj się przy użyciu TouchID'
                    );
                    if (result.success) {
                        alert('Udało Ci się zalogować')
                    } else {
                        alert('Logowanie nie udane')
                    }
                };
            }
            return (
                <Button onPress={authFunction} title="Zaloguj się przy użyciu odcisku palca" style={styles.buttonStyle}>
                    {this.state.waiting
                        ? 'Czekam na TouchID...'
                        : 'Zalogowano przy użyciu TouchID'}
                </Button>
            )

        } else if (NativeModules.ExponentFingerprint.hasHardwareAsync() === false) {
            return (
                <Button onPress={} title="Zaloguj się" style={styles.buttonStyle}/>
            )
        }
    }
}

Answer 1

The issue is here

<Button
  onPress={} <--- here
  title="Zaloguj się" 
  style={styles.buttonStyle}
/>

React doesn't allow you to assign empty expressions to JSX attributes.

In order to fix it, just remove it

<Button title="Zaloguj się" style={styles.buttonStyle}/>

or assign it, for example, to authFunction which will be null.

<Button onPress={authFunction} title="Zaloguj się" style={styles.buttonStyle}/>