React Native Relase, Debug apk crashes in physical devices

Question

I followed the facebook documentation on how to generate signed apk exactly. But still I am getting error: undefined is not an object (evaluating 'e.length' Here is the screenshot

However, the app works fine in Android Emulator with command react-native run-android. But, I got the issue which was causing the app to crash. It was native-base. Here is the following code in my App.js:

import React, { Component } from 'react';
import {Text} from 'react-native';
import { Container, Header, Content, Form,Text, Item, Input, Label, Button } 
from 'native-base';
export default class ReactNativeExample extends Component {
constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: ''
    };
    this.doSignIn = this.doSignIn.bind(this);
}

doSignIn() {
    
let formdata = new FormData();
formdata.append("username", this.state.username)
formdata.append("password", this.state.password)

fetch('http://someweb.com/loginUser',{
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formdata
}).then((response) => response.json())
    .then((responseData) => {
         console.log("Inside responsejson");
         if(responseData.error != true) {
            console.log('You have logged in...');
         }
     }).done();
 }

render() {

return (
  <Container>
    <Header />
    <Content>
      <Form>
        <Item floatingLabel style={{margin: 8}}>
          <Label>Username</Label>
          <Input ref="username" onChangeText={(username) => 
          this.setState({username})}/>
        </Item>
        <Item floatingLabel last style={{margin: 8}}>
          <Label>Password</Label>
          <Input ref="username" onChangeText={(password) => 
          this.setState({password})}/>
        </Item>
         <Button block info style={{margin: 8}} onPress={this.doSignIn}>
        <Text>Login</Text>
      </Button>
      </Form>
    </Content>
  </Container>
  <Text> Hello </Text>
  );
 }
}

I want to know what is wrong with the above native-base code that is making the App crash? Is there any way I can make native-base code work?

Thank You.

ReactNative version: 0.50.1

score 0 · Answer 1 · answered Nov 15 '17 at 09:59

tried your code. Was able to generate an apk successfully. Didn't find any issue while running the apk. Posting the code.

import React, { Component } from "react";
import { Container, Header, Content, Form, Text, Item, Input, Label,Button } from "native-base";
export default class ReactNativeExample extends Component {
constructor(props) {
  super(props);
  this.state = {
  username: "",
  password: "",
};
this.doSignIn = this.doSignIn.bind(this);
}
doSignIn() {
  let formdata = new FormData();
  formdata.append("username", this.state.username);
  formdata.append("password", this.state.password);

  fetch("https://httpbin.org/", {
    method: "post",
    headers: {
      "Content-Type": "multipart/form-data",
    },
    body: formdata,
  })
    .then(response => console.log("response", response))
    .done();
}

render() {
  return (
    <Container>
      <Header />
      <Content>
        <Form>
          <Item floatingLabel style={{ margin: 8 }}>
            <Label>Username</Label>
            <Input ref="username" onChangeText={username => this.setState({ username })} />
          </Item>
          <Item floatingLabel last style={{ margin: 8 }}>
            <Label>Password</Label>
            <Input ref="username" onChangeText={password => this.setState({ password })} />
          </Item>
          <Button block info style={{ margin: 8 }} onPress={this.doSignIn}>
            <Text>Login</Text>
          </Button>
        </Form>
      </Content>
    </Container>
   );}
}

When using NativeBase components use <Text/> from 'native-base'

Thank you for your response. Well I figured out as @Sintylapse pointed out where i was wrong. — Jason, Nov 15 '17 at 12:08

score 0 · Accepted Answer · answered Nov 15 '17 at 10:27

That's because there is import duplicates of Text component

import { Text } from 'react-native';
import { Container, Header, Content, Form,Text, Item, Input, Label, Button } 
from 'native-base';

You can import both Text components via as like this

import { Text as NativeText } from 'react-native';

And then use NativeText. Otherwise, do not duplicate your imports.

React Native Relase, Debug apk crashes in physical devices

2 Answers2