Now, we need to goto file and implement a Contact menu option UI in order to navigate to the Contact screen. For that, we need to use the code from the following code snippet in the file: Setting.js Setting.js React, {Component} ; {View, TouchableOpacity} ; {List, Icon} ; { (props) { (props); .state = {};
  }

  render() { ( <TouchableOpacity
          onPress={() => this.props.navigation.navigate('Contact')}>
          <List.Item
            title="Contact Us"
            left={() => <List.Icon icon="chevron-right" />}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

export default Setting; import from 'react' import from 'react-native' import from 'react-native-paper' class Setting extends Component constructor super this return < > View Here, we have imported all the necessary packages and components in order to implement the Settings screen UI. Then, we used the component wrapping the List component in order to show the Contact option in the Settings screen. Then, we have set up the navigation config in the component. TouchableOpacity TouchableOpacity Hence, we will get the following result in the emulator screen: As we can see, we have got the Contact option in the Settings screen. Implementing Contact Screen Here, we need to create a new screen called Contact screen. For that, we need to create a new file called in the folder. Then, we need to import the file to the file and then add it to the stack navigator as shown in the code snippet below: Contact.js ‘./screens/’ Contact.js App.js StackNavigator = createStackNavigator({ : DashboardTabNavigator, : SinglePost, : CategorieList, :Contact
}); const DashboardTabNavigator SinglePost CategorieList Contact Now, we need to go back to the file and import the required packages. Here, we are going to make use of the and packages as shown in the code snippet below: Contact.js react-native-firebase tcomb-form-native {
  View,
  StyleSheet,
  TouchableHighlight,
  Text,
  Alert,
  ActivityIndicator,
  Image,
} ; firebase t ; { (props) { (props); .state = { : };
  }
} import from 'react-native' import from 'react-native-firebase' import from 'tcomb-form-native' // 0.6.9 export default class Contact extends Component constructor super this submit false Here, we have defined a state called submit which will handle the submitting of form to firebase. Now, we are going to make use of package to initialize the form instance and define the structure of the form. Then, we are going to use it in the function as shown in the code snippet below: tcomb-form-native render() render() { Form = t.form.Form; ContactForm = t.struct({ : t.String, : t.String, : t.String,
    }); ( <Form type={ContactForm}  />
      </View> const const email name message return < = > View style {styles.container} );


const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    marginTop: 50,
    padding: 20,
    backgroundColor: '#ffffff',
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center',
  },
  button: {
    height: 36,
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center',
  },
}); Hence, we will get the following result in the emulator screens: As we can, we have got the form interface in the Contact screen. Now, instead of using the text field in the message input, we are going to implement the text area into it. For that, we need to use the code from the following code snippet: Form = t.form.Form; options = { : { : { : , : {
        ...Form.stylesheet, : {
          ...Form.stylesheet.textbox, : {
            ...Form.stylesheet.textbox.normal, : ,
          }, : {
            ...Form.stylesheet.textbox.error, : ,
          },
        },
      },
    },
  },
}; const const fields message multiline true stylesheet textbox normal height 150 error height 150 Here, we have defined the options object in order to configure the component. Now, we need to integrate the options constant to the component as shown in the code snippet below: Form Form <Form
  type={ContactForm}
  options={options}
/> Hence, we will get the result as shown in the following emulator screen on the next page: Saving message to Firebase database Now, we are going to implement the feature to save the users message to the Firebase database. For that, we need to use the ref prop to get the value from the form as shown in the code snippet below: <Form
  type={ContactForm}
  ref={c => ( ._form = c)}
  options={options}
/> this Next, we need to create a function called which will get the value from the form and submit to the firebase. For now, we are going to add a simple log to it as shown in the code snippet below: handleSubmit handleSubmit = () => { value = ._form.getValue(); .log(value)
} async // this.setState({submit: true}); const this console Now, we will add the firebase configuration to it as shown in the code snippet below: firebase
   .database()
   .ref( )
   .push(value)
   .then( {
     Alert.alert( )
   })
   .catch( { .error(err);
   }); 'contact/' => res 'thank for reaching me' => err console Here, we have used the firebase module to call the database function. Then, we have used the contact ref function and pushed tie value. As a result, we have shown an alert box. Hence, we will get the following result in the emulator screens on the next page: The result on firebase: Summary In this chapter we leaned how to set up the in the react native application.Then, we learned how to make use of components from package in order to implement the form in the Contact screen. Then, we implemented the sending of message to the firebase. react-native-firebase tcomb-form-native This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the from instamobile React Native App Templates

Chevron

Super

visit more my tutorial

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Build WordPress Client App with React Native Part #14: Implementing Settings Screen

Too Long; Didn't Read

Companies Mentioned

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Build WordPress Client App with React Native Part #14: Implementing Settings Screen

Too Long; Didn't Read

Companies Mentioned

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES