I am the beginner of react native. I have a problem. I am trying to set sign up page with firebase but i couldn't do this. There is a compiler error that Unexpected token, expected ";" (29:21) This is my SignUp.js page
import React from 'react';
import Firebase from 'firebase';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Image,
Alert,
Button
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import SignUpNextBtn from '../components/SignUpNextBtn';
import Input from '../components/Input';
const SignUp: () => React$Node = () => {
componentWillMount() {
const firebaseConfig = {
apiKey: '****',
authDomain: '****',
}
firebase.initializeApp(firebaseConfig);
}
return (
<>
<View style={styles.container}>
<Input />
<View style={styles.headBackground}>
<Text>Sign Up</Text>
<Text style={styles.logo}>Sign Up to{'\n'}GOLD#</Text>
<Text style={styles.logoDescription}>Sign Up</Text>
</View>
<ScrollView>
<View style={styles.loginArea}>
<Image style={styles.userCheckImg} source={require('../assets/user-check.png')}/>
<Image style={styles.envelopeImg} source={require('../assets/envelope-alt.png')}/>
<Image style={styles.lockImg} source={require('../assets/lock-alt.png')}/>
<Image style={styles.mobileImg} source={require('../assets/mobile-android-alt.png')}/>
<Image style={styles.postcardImg} source={require('../assets/postcard.png')}/>
<Text>Welcome !</Text>
<Text>{'\n'}Name* </Text>
<Input />
<Text>Email* </Text>
<Input />
<Text>PIN* </Text>
<Input secureTextEntry={true}/>
<Text>ID </Text>
<Input />
<Text>Phone Number </Text>
<Input />
</View>
</ScrollView>
<SignUpNextBtn />
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingVertical:80,
backgroundColor: '#F5FCFF',
},
headBackground: {
position:"absolute",
top:0,
left:0,
height:560,
width:411,
backgroundColor:'#F3EA79',
},
logo:{
textAlign:'center',
fontSize:40,
fontWeight:'bold',
color:'#FFF',
width:200,
height:100,
top:10,
left:45,
},
logoDescription:{
textAlign:'center',
color:'#f2f2f2'
},
loginArea:{
marginHorizontal:40,
marginVertical:40,
backgroundColor:'#fff',
padding:20,
borderRadius:10,
elevation:10
},
userCheckImg: {
width: 15,
height: 12.75,
top:125,
left:5,
position:"absolute",
alignItems:'flex-start'
},
envelopeImg: {
width: 15,
height: 12.75,
top:215,
left:5,
position:"absolute",
alignItems:'flex-start'
},
lockImg: {
width: 15,
height: 12,
top:305,
left:5,
position:"absolute",
alignItems:'flex-start'
},
postcardImg: {
width: 15,
height: 12.75,
top:395,
left:5,
position:"absolute",
alignItems:'flex-start'
},
mobileImg: {
width: 15,
height: 12.75,
top:480,
left:5,
position:"absolute",
alignItems:'flex-start'
},
});
export default SignUp;
Where am I making a mistake? I have been dealing with this problem for a long time, thanks for your help.