How to pass data from input field in react native?

Question

I'm using https://github.com/expo-community/expo-firebase-starter as a starter template to build a react native app using firebase.

I am working with the following file in Home.js and want to do a few things but am having a few issues.

Get value of input field - I am trying to do constructor(props) in this file to get the content of the input field but keep getting an error when I try to do this.

Pass user data - I am trying to get details of the user that is logged in. Currently, I'm using firebase.checkUserAuth; how do I save the data of the contents of 'user' using 'this.state.user'. When I try to do this, I keep running into errors.

    import React, {useEffect } from "react";
    import { StyleSheet, Text, View } from "react-native";
    import { Container, Content, Header, Form, Input, Item, Label } from 'native-base';
    import { Button } from "react-native-elements";
    import { withFirebaseHOC } from "../config/Firebase";

    function Home({ navigation, firebase }) {

      useEffect(() => {
        try {

          firebase.checkUserAuth(user => {
            if (user) {
              // if the user has previously logged in
              console.log(user);
              // navigation.navigate("App");
            } else {
              // if the user has previously logged out from the app
              navigation.navigate("Auth");
            }
          });
        } catch (error) {
          console.log(error);
        }
      }, []);

      async function postReflection() {

        try {
          await alert('test');
        } catch (error) {
          console.log(error);
        }
      }

      async function handleSignout() {
        try {
          await firebase.signOut();
          navigation.navigate("Auth");
        } catch (error) {
          console.log(error);
        }
      }

      return (
        <Container style={styles.container}>

              <Form>
                <Item floatingLabel>
                  <Label>Reflection</Label>
                  <Input 
                    autoCapitalize='none'
                    autoCorrect={false}
                    // onChangeText = {(email)}
                  />
                </Item>

                  <Button style = {{ marginTop: 10, marginHorizontal:30 }}
                    title="Share"
                    rounded
                    onPress= {postReflection}
                    >
                  </Button>
                  </Form>



          {/* <Text>Home</Text>
          <Button
            title="Signout"
            onPress={handleSignout}
            titleStyle={{
              color: "#F57C00"
            }}
            type="clear"
          /> */}
        </Container>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff",
        // justifyContent: "center"
      }
    });

    export default withFirebaseHOC(Home);

Answer 1

"this" is a keyword referring to an instance of a class. "constructor" also only works as you expect in class component. As you are writing function component instead of class component, you cannot use them. See https://reactjs.org/docs/components-and-props.html#function-and-class-components .

I am guessing what you want to do is get the email the user has typed in, and send to firebase auth. So what you can use instead is useState hook . In Home component, declare and define it like

const [email, setEmail] = useState('');

And use it in the TextInput component like

onChangeText={text => setEmail(text)}