How to Create a Simple Contact Form in React Native with Firebase Realtime Database

React Native is getting more popular among developers concentrated in the hybrid apps. Building a native app for each platform is more complicated nowadays. This is the main reason for React Native’s huge rise. I already made some tutorials on React Native and you can see them under this article. Firebase is a Google managed service which provides a lot of services. Real-time Database is one of the popular services from them to store your data as no-SQL. In this blog, I am following a directory location for doing all my projects which is /var/www/ html. This is only a note for you to understand the upcoming steps in this article. Let us start.

FIREBASE

We are going to set up the firebase database first. Go to firebase console using the below link.

https://console.firebase.google.com/

Then click Add Project. This will show a form and fill it with your Project Name and Country. Now accept the terms and conditions and click Create Project button. You can see the details I gave from the below image.

Your firebase project is created. You will e directed to a page as below.

From the side menu, select Database. From there, you will get two database options such as Cloud Firestore and Realtime Database. Click an Create Database button from Realtime Database. Now it checks for the permission you wanted to give for the database. Select Start in Test Mode and click Enable. It is shown in the below image.

Now you will be directed to a page as below. Add a collection by entering a collection name as I did. I gave the collection name contacts. It’s just a simple step by clicking the input field on the right of the project ID, input your collection name and press Enter. Done.

REACT NATIVE

1. INSTALL AND SETUP REACT NATIVE

I already made a tutorial on installing and setting up of React Native. You can see it from the link below. But note that you have to change the project name AwesomeProject to ReactnativeContactForm (Step 9). Because in this tutorial, I am using that name. But as I told, It is not mandatory for you to follow my naming systems. You can choose your own. In that case, you have to use them in the upcoming steps too.

https://www.techomoro.com/how-to-install-and-setup-react-native-on-ubuntu-17-10

2. INSTALL NATIVEBASE

Nativebase is a node package which allows you to use some UI components for React Native. If you can build your UI components using Flexbox, or you are using any other packages to setup UI,  then this step is not mandatory for you.

npm install native-base --save
react-native link

3. EDIT APP.JS

The index.js file is executed first in React Native. As a default, App.js file is imported to the index. So The code inside App.js is executed. The rendered view you are seeing first time on your device is coming from this file. We are going to edit this.

First, import all components from their locations/ libraries. Some of the components I imported from native-base are also available in the react-native library. I imported them from native-base because they are pre-styled and it saves a lot of time.

import React, { Component } from 'react'
import { StyleSheet, TouchableOpacity, View, Alert } from 'react-native'
import { Container, Header, Title, Content, Text, Icon, Card, CardItem, Item, Body, Right, Button, Input, Form, Textarea, Left } from 'native-base'

export default class App extends Component {
}

constructor(props) {
  super(props);
  this.state = {
  name: null,
  mobile: null,
  email:null,
  msg: null,
  isSubmited: false, 
};
}

https://console.firebase.google.com/

postContact= (name, mobile, email, msg, nameClear, mobileClear, emailClear, msgClear) => {
  if(this.state.msg!=null){
   fetch('https://contact-form-db-133.firebaseio.com/contacts.json', {
   method:'POST',
   headers: {
   Accept:'application/json',
   'Content-Type':'application/json',
  },
   body:JSON.stringify({
    "name":name,
    "mobile":mobile,
    "email":email,
    "msg":msg,
    }),
   })
  .then((response) => response.json())
  .then((responseData) => {
    if(responseData.name !=null ){
    this.refs[nameClear].setNativeProps({text:''});
    this.refs[mobileClear].setNativeProps({text:''});
    this.refs[emailClear].setNativeProps({text:''});
    this.refs[msgClear].setNativeProps({text:''});
    this.setState({
    name:null,
    mobile:null,
    email:null,
    msg:null,
    isSubmited:true,
   })
 }
else{
  Alert.alert(
   'Oops !',
   'Something went wrong',[
    {text: 'OK', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},],
   { cancelable: false })
 }
})
.done();
}
else{
  Alert.alert(
   'Oops !',
   'Press SUBMIT button after entering your message',[
   {text: 'OK', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},],
   { cancelable: false })
   }
};

_togglePostCard(){
  this.setState({
  isSubmited:false
 })
}

• On changing the text in each input field, the value is set to its corresponding states
• A ref variable is with each input fields to clear the value in the input box field after submitting the form.
• Keyboard type is added with each input.
• On pressing the SUBMIT button, the input states and the ref variables will be passed with the postContact() function as function parameters. The recommended method is binding the postContect() function with the states. But here the states are simply passing as the function parameters.
• posting the form data to firebase will return an object like { “name”: “id”}. We are using this to verify that the data is posted successfully on the firebase.

render() {
   return (
     <Container>
      <Header androidStatusBarColor="#1362af" style={{ backgroundColor: '#1976D2' }}>
      <Body style = {{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }}>
     <Title>CONTACT</Title>
      </Body>
      </Header>
     <Content>
      <Cardstyle={styles.postCard}>
{this.state.isSubmited ?
      <View>
      <CardItem>
       <Item>
         <Icon activename="ios-checkmark-circle" style={{fontSize:30, color:'#4CAF50', marginLeft:5, marginRight:10}}/>
         <Textstyle = {{flex:1}}>Thanks. We will get in touch with you as soon as possible</Text>
         </Item>
      </CardItem>
      <CardItem>
         <Left>
         </Left>
         <Body>
           <Touchable OpacitysuccessonPress={() =>this._togglePostCard()}>
               <Icon active name="refresh" style={{fontSize:50, color:'#64DD17', marginLeft:10}}/>
           </TouchableOpacity>
         </Body>
         <Right>
         </Right>
      </CardItem>
      </View>
:
      <View>
       <CardItem>
         <Item>
           <Inputplaceholder='Name' onChangeText={(name) =>this.setState({name})} ref={'nameClear'}/>
         </Item>
         </CardItem>
          <CardItem>
             <Item>
                  <Input placeholder='Mobile' onChangeText={(mobile) =>this.setState({mobile})} ref={'mobileClear'} keyboardType = {'phone-pad'}/>
            </Item>
       </CardItem>
       <CardItem>
             <Item>
                <Input placeholder='Email' onChangeText={(email) =>this.setState({email})} ref={'emailClear'} keyboardType = {'email-address'}/>
             </Item>
       </CardItem>
       <Form style = {{ marginLeft:20, marginRight:20 }}>
           <TextarearowSpan={5} borderedplaceholder="Type your message" onChangeText={(msg) =>this.setState({msg})} ref={'msgClear'}/>
       </Form>
      <CardItem>
       <Left>
      </Left>
      <Body>
        <Button successonPress={() =>this.postContact(this.state.name, this.state.mobile, this.state.email, this.state.msg, 'nameClear', 'mobileClear', 'emailClear', 'msgClear')}>
        <Text>SUBMIT</Text>
        </Button>
      </Body>
     <Right>
     </Right>
    </CardItem>
  </View>
  }
 </Card>
</Content>
</Container>
);
}

Now the contact form is set. Add some styles as shown below. This should be added outside the class we created.

const styles = StyleSheet.create({
  postCard: {
  marginLeft:25,
  marginRight:25,
  marginTop:20,
  marginBottom:20,
}
});

https://contact-form-db-133.firebaseio.com/contacts.json

If you need a signed APK of your app, just follow the steps in the link below.

https://www.techomoro.com/how-to-generate-signed-apk-in-react-native

GITHUB

The complete project I created is uploaded in GitHub and you can always refer it.

REACT NATIVE

https://github.com/syamjayaraj/ReactnativeContactForm

Have a nice code !