CODEWITHSUNDEEP
javascriptandroidreact-native
Coder
Coder

Reputation: 3130

React native Expected String but got object

I am trying to import the Login module in my index.android.js but it doesnt seem to work? What is wrong in render method?

login.js is located in /screens/login.js

react-native version "0.39.2"

index.android.js

'use strict';
import React, { Component } from 'react';
import { AppRegistry} from 'react-native';

//login module
var LoginScreen = require('./screens/login');

var app = React.createClass({
  render: function() {
    return (
        <LoginScreen />
    );
  }
});
AppRegistry.registerComponent('app', () => app);

login.js under /screens directory

'use strict';
import React, { Component } from 'react';
var Button = require('react-native-button');

import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    TextInput
} from 'react-native';


var Login = React.createClass({
    getInitialState: function() {
        return {
            username: '',
            password: ''
        }
    },
    _loginClick: function(event){
        console.log('login tapped');
    },
    render: function() {
        return (
            <View style={styles.container}>
                <View style={styles.inputs}>
                    <View style={styles.inputContainer}>
                        <TextInput
                            style={[styles.input, styles.whiteFont]}
                            placeholder="Username"
                            placeholderTextColor="#FFF"
                            value={this.state.username}
                        />
                    </View>
                    <View style={styles.inputContainer}>
                        <TextInput
                            password={true}
                            style={[styles.input, styles.whiteFont]}
                            placeholder="Pasword"
                            placeholderTextColor="#FFF"
                            value={this.state.password}
                        />
                    </View>
                    <View style={styles.forgotContainer}>
                        <Text style={styles.greyFont}>Forgot Password</Text>
                    </View>
                </View>
                <View style={styles.signin}>
                    <Text style={styles.whiteFont}>Sign In</Text>
                    <Button
                        style={{borderWidth: 1, borderColor: 'blue'}}
                        onPress={this._loginClick}>
                        Login
                    </Button>
                </View>
                <View style={styles.signup}>
                    <Text style={styles.greyFont}>Don't have an account?<Text style={styles.whiteFont}>  Sign Up</Text></Text>
                </View>
            </View>
        );
    },

});

module.exports = Login;

Upvotes: 0

Views: 3267

Answers (3)

Facundo La Rocca
Facundo La Rocca

Reputation: 3866

Change this:

var Button = require('react-native-button');

for this 

import Button from 'react-native-button';

Upvotes: 0

max23_
max23_

Reputation: 6689

Assuming react-native-button is referring to this, then you are importing the component incorrectly. It should be:

import Button from 'react-native-button';

This is because Button.js is exporting the component using export default class instead of module.export. So, you should use import instead of require(). More information here regarding export.

Upvotes: 2

Pir Shukarullah Shah
Pir Shukarullah Shah

Reputation: 4232

Issue is with your Button component, remove it. Secondly you are missing styles too.

Upvotes: 0

Related Questions