SpotifyAuth isn't defined

[hadrienbbt]

Hi,

I get this message when I try to lauch an example in my new application :

Here's my code :

import` React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Alert,
    LayoutAnimation,
    NativeModules,
    NavigatorIOS,
    TouchableHighlight,
    } from 'react-native';

//Assign our module from NativeModules and assign it to a variable
var SpotifyAuth = NativeModules.SpotifyAuth;

class logIn extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.normalText}>
                    React Native Spotify Module Basic Example!
                </Text>
                <TouchableHighlight style={styles.button} onPress={
                    ()=>{
                        //Start Auth process
                        SpotifyAuth.setClientID('*************','***********',['streaming'],(error)=>{
                            if(!error){
                                this.props.navigator.replace({component: logInSuccess, title: 'Success'});
                            } else {
                                console.log('error:',error);
                            }
                        });
                    }
                    }>
                    <Image resizeMode ={'contain'}
                        style={styles.image}
                        source={require('./assets/login-button-mobile.png')}
                    />
                </TouchableHighlight>
            </View>
        );
    }
}

class logInSuccess extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.normalText}>
                    LogIn Success!
                </Text>
                <Text style={styles.normalText}>
                    Some music should be playing now!
                </Text>
                <TouchableHighlight style={styles.button} onPress={()=>{
                    SpotifyAuth.isPlaying((res)=>{SpotifyAuth.setIsPlaying(!res, (err)=>{console.log(err)});});
                }
                    }>
                    <Text style={styles.btnText}>
                        Play/Pause
                    </Text>
                </TouchableHighlight>
            </View>
        );

    }
    componentDidMount() {
        SpotifyAuth.playURIs(["spotify:track:6HxIUB3fLRS8W3LfYPE8tP", "spotify:track:58s6EuEYJdlb0kO7awm3Vp"], {trackIndex :0, startTime:0},(error)=>{console.log('error',error)});
    }
}
//Used to navigate between other components
class spotifyModule extends Component {
    render(){
        return (
            <NavigatorIOS
                initialRoute={{
                    component: logIn,
                    title: 'Welcome!',
                }}
                style={{flex: 1}}
            />
        );
    }
}

class LotsOfStyles extends Component {
    constructor(props) {
        super(props);
        this.state = {
            w: 70,
            h: 120,
            align: 'center'
        };
        this._onPressPlus = this._onPressPlus.bind(this);
        this._onPressMoins = this._onPressMoins.bind(this);

    }

    _onPressPlus() {
        // Animate the update
        this.props.navigator.push({
            title: 'login',
            component: logIn,
        });
    }
    _onPressMoins() {
        // Animate the update
        LayoutAnimation.spring();
        this.setState({align: this.state.align == 'center' ? 'flex-start' : 'center'})
    }

    render() {
        let pic = require('./img/logo.png');
        return (
            <View style={{flex: 1, flexDirection: 'column'}}>
                <View style={{
                    flex: 7,
                    backgroundColor: 'powderblue',
                    justifyContent: 'center',
                    alignItems: this.state.align
                }}>
                    <Image source={pic} style={{width: this.state.w, height: this.state.h}}/>
                    <Text style={{
                        textAlign: 'center',
                        width: 220,
                        fontWeight: 'bold',
                        fontSize: 30,
                        marginTop: 30
                    }}>Bienvenue sur Moodmusic !</Text>
                    <Text style={{
                        textAlign: 'center',
                        width: 300,
                        fontWeight: 'bold',
                        fontSize: 15,
                        marginTop: 30
                    }}>Un monde de musique émotionnelle s'offre à vous.</Text>
                </View>
                <View style={{
                    flex: 1,
                    flexDirection: 'row'
                }}>
                    <TouchableOpacity onPress={this._onPressPlus} style={{
                        flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'skyblue'
                    }}>
                            <Text style={styles.loginStyle}>Se Connecter</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this._onPressMoins} style={{
                        flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'steelblue'
                    }}>
                        <Text style={styles.loginStyle}>S'inscrire</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'black',
    },
    button: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 250,
        height: 45,
        borderRadius: 64
    },
    image: {
        width: 250,
        height: 50
    },
    normalText: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: 'white'
    },
    btnText: {
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center',
        margin: 10,
        color: 'white'
    },
    loginStyle: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: 20
    }
});

AppRegistry.registerComponent('AwesomeProject', () => spotifyModule);

I don't understand what have I done wrong... Does someone know which step did i miss ?

BR

[digitaldavenyc]

Did you move SpotifyAuth.m and SpotifyAuth.h to your ios project folder? It looks like SpotifyAuth is undefined, it is very likely that it is not imported to your project properly.

[hadrienbbt]

Yes that was my problem, thank you very much ! :)

[digitaldavenyc]

No problem