React try to use a textinput but nothing appears

Question

I'm trying to put in place this thing : https://callstack.github.io/react-native-paper/2.0/text-input.html But it doesn't appear. I have no error but nothing is visible : i got a blank. I think this is due to the fact that i don't use a class, but i don't want to use is here.

import React, { useState } from 'react';
import { StyleSheet, TextInput, View, Text, Button, Image } from 'react-native';
import { login } from '../api/mock';
import EmailForm from '../forms/EmailForm';
import mainLogo from '../../assets/juliette.jpg';

const LoginScreen = ({ navigation }) => {
  state = {
    text: ''
  };
  return (
    <View style={styles.main_container}>
        <Image style={styles.image} source={mainLogo} />
        <TextInput
        label='Email'
        value={this.state.text}
        onChangeText={text => this.setState({ text })}
        />
        <EmailForm buttonText="Se connecter" onSubmit={login} onAuthentication={() => navigation.navigate('Home')}>

        <Button style={styles.button} title="Créer un compte" onPress={() => navigation.navigate('CreateAccount')}/>
      </EmailForm>
    </View>
  );
};


const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    marginTop: 50,
    justifyContent: 'center',
    marginHorizontal: 16
  },
  textinput: {
    marginLeft: 5,
    marginRight: 5,
    height: 50,
    borderColor: '#000000',
    borderWidth: 1,
    paddingLeft: 5
  },
  image: {
    marginLeft:50,
    height: 300,
    width: 300
  },
  button: {
      flex: 2,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      borderBottomWidth: StyleSheet.hairlineWidth
  },
})

export default LoginScreen;

Thank you for advance

Answer 1

As you are using a functional component you will have to manage the state like below

const LoginScreen = ({ navigation }) => {
  //The hook should be used here
  const [text,setText]=useState('');
  return (
    <View style={styles.main_container}>
        <Image style={styles.image} source={mainLogo} />
        <TextInput
        label='Email'
        value={text}
        onChangeText={text => setText(text)}
        placeholder="Enter text"
        />
        <EmailForm buttonText="Se connecter" onSubmit={login} onAuthentication={() => navigation.navigate('Home')}>

        <Button style={styles.button} title="Créer un compte" onPress={() => navigation.navigate('CreateAccount')}/>
      </EmailForm>
    </View>
  );
};