I have created the APK file of my app using the below link.
https://facebook.github.io/react-native/docs/signed-apk-android#docsNav
Successfully, It installed and once I click on the login button it shows "Unfortunately, the app has closed error". I tried creating APK of other project and it is working fine. But, in this project, it crashes.
Once after creating the project, I have changed my project name is the string.xml file. Is there any problem with that? Even tried to keep the previous name also, but my issue did not get resolved. My package.json file is
{
"name": "awsUpload",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"aws-sdk": "^2.395.0",
"link": "^0.1.5",
"react": "16.6.3",
"react-native": "^0.58.3",
"react-native-aws3": "0.0.8",
"react-native-device-info": "^0.26.2",
"react-native-file-upload": "^1.0.4",
"react-native-image-picker": "^0.28.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-router-flux": "^4.0.6",
"uniqid": "^5.0.3"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
Is there any problem in my packages?
My button file code is
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Dimensions from 'Dimensions';
import {
StyleSheet,
TouchableOpacity,
Text,
Animated,
Easing,
Image,
Alert,
View,
} from 'react-native';
import {Actions, ActionConst} from 'react-native-router-flux';
import spinner from '../images/loading.gif';
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
const MARGIN = 40;
export default class ButtonSubmit extends Component {
constructor() {
super();
this.state = {
isLoading: false,
};
this.buttonAnimated = new Animated.Value(0);
this.growAnimated = new Animated.Value(0);
this._onPress = this._onPress.bind(this);
}
_onPress() {
if (this.state.isLoading) return;
this.setState({isLoading: true});
Animated.timing(this.buttonAnimated, {
toValue: 1,
duration: 200,
easing: Easing.linear,
}).start();
setTimeout(() => {
this._onGrow();
}, 2000);
setTimeout(() => {
Actions.secondScreen();
this.setState({isLoading: false});
this.buttonAnimated.setValue(0);
this.growAnimated.setValue(0);
}, 2300);
}
_onGrow() {
Animated.timing(this.growAnimated, {
toValue: 1,
duration: 200,
easing: Easing.linear,
}).start();
}
render() {
const changeWidth = this.buttonAnimated.interpolate({
inputRange: [0, 1],
outputRange: [DEVICE_WIDTH - MARGIN, MARGIN],
});
const changeScale = this.growAnimated.interpolate({
inputRange: [0, 1],
outputRange: [1, MARGIN],
});
return (
<View style={styles.container}>
<Animated.View style={{width: changeWidth}}>
<TouchableOpacity
style={styles.button}
onPress={this._onPress}
activeOpacity={1}>
{this.state.isLoading ? (
<Image source={spinner} style={styles.image} />
) : (
<Text style={styles.text}>LOGIN</Text>
)}
</TouchableOpacity>
<Animated.View
style={[styles.circle, {transform: [{scale: changeScale}]}]}
/>
</Animated.View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
top: -95,
alignItems: 'center',
justifyContent: 'flex-start',
marginTop: 100,
},
button: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor : '#48a4ff',
height: MARGIN,
borderRadius: 20,
zIndex: 100,
},
circle: {
height: MARGIN,
width: MARGIN,
marginTop: -MARGIN,
borderWidth: 1,
borderColor: 'blue',
borderRadius: 100,
alignSelf: 'center',
zIndex: 99,
backgroundColor: '#48a4ff',
},
text: {
color: 'white',
},
image: {
width: 24,
height: 24,
},
});
