Passing Parameters with TabNavigation

[DruTrue]

Hi everybody,

I am trying to make a profile page. So first the user should log in to his account. If he logged in successfully, he passes to tab page. From there he can navigate to profile page. I have already done the login, registration and tab page with help of mysql and phpmyadmin. Both pages work fine. Also I use webhost. On the profile page I want to render the username which I typed on login page. I tried to code something. It works with console.log in Tabs.js but it doesn't work in Profile.js. What would be a correct way to do it as I want it? P.S I am quite new in React Native.

Login.js

    fetch('https://lifestormweb.000webhostapp.com/User_Login.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({

      email: UserEmail,

      password: UserPassword,

      name: UserName

    })

    }).then((response) => response.json())
        .then((responseJson) => {

         if(responseJson === 'Data Matched')
          {

              this.props.navigation.navigate("Tabs", { Name: UserName });

          }
          else{

            Alert.alert(responseJson);
          }

        }).catch((error) => {
          console.error(error);
        });

    }

    render() {
    return (
      <View style={styles.container}>
       <View style={styles.loginTextCont}>
        <Text style={{fontSize: 36, fontFamily: "Futura" }}>
          Willkommen zu</Text> <Text style={{fontSize: 36, fontFamily: "Futura", color:'#ff0000' }}>LifeStorm!</Text>
        <View style={{width: 10, height: 5 }} />
        </View>
        <TextInput style={styles.inputBox}
            onChangeText={UserName => this.setState({UserName})}
            underlineColorAndroid='#ffffff'
            placeholder="Ihre Name"
            placeholderTextColor = "#ffffff"
            selectionColor="#ffffff"
            keyboardType="email-address"
            onSubmitEditing={()=> this.password.focus()}
            />
        <TextInput style={styles.inputBox}
            onChangeText={UserEmail => this.setState({UserEmail})}
            underlineColorAndroid='#ffffff'
            placeholder="Ihre E-mail"
            placeholderTextColor = "#ffffff"
            selectionColor="#ffffff"
            keyboardType="email-address"
            onSubmitEditing={()=> this.password.focus()}
            />
        <TextInput style={styles.inputBox}
            onChangeText={UserPassword => this.setState({UserPassword})}
            underlineColorAndroid='#ffffff'
            placeholder="Passwort"
            secureTextEntry={true}
            placeholderTextColor = "#ffffff"
            ref={(input) => this.password = input}
            />
         <TouchableOpacity
         style={styles.button}
         onPress={this.UserLoginFunction}
         >
           <Text style={styles.buttonText}>Sich einloggen</Text>
         </TouchableOpacity>
        <View style={styles.signupTextCont}>
           <Text style={styles.signupText}>
           Haben Sie kein Konto?
           </Text>
           <TouchableOpacity onPress={()=>this.props.navigation.navigate("Register")}> <Text style={styles.signupButton}> Sich anmelden</Text></TouchableOpacity>
        </View>
      </View>
    );
  }

Tabs.js

    import React, { Component } from 'react';
    import { createBottomTabNavigator } from 'react-navigation';
    import { navigation } from 'react-navigation';
    import Page1 from '../screens/Page1';
    import Page2 from '../screens/Page2';
    import Page3 from '../screens/Page3';
    import Profile from '../screens/Profile';
    import Page4 from '../screens/Page4';
 
    export default class DetailsScreen extends React.Component {

    static navigationOptions = {
    header: null,
    };

    render() {
    const { navigation } = this.props;
    const Name1 = navigation.getParam('Name', 'UserName');
    console.log(Name1);

    return (
      <Tabnav />
    );
    }
    }

    const Tabnav =  createBottomTabNavigator({
    Profil: {screen:Profile,},
    Page1: {screen:Page1,},
    Page2: {screen:Page2,},
    Page3: {screen:Page3,},
    Page4: {screen:Page4,}
    });

Profile.js

     import React, { Component } from 'react';
     import { Text, View, AsyncStorage } from 'react-native';
     import { navigation } from 'react-navigation';
     import { Header } from "react-native-elements";
     import { Name1 } from '../screens/Tabs';

     export default class Profil extends React.Component {

     render() {
     return (
      <View>
        <Header
          centerComponent={{ text: 'Profil', style: { color: '#FF0000', fontSize: 20, fontWeight: 'bold' } }}
          outerContainerStyles={{ backgroundColor: '#ffffff' }}
        />
        <Text>Willkommen { Name1 } </Text>
      </View>
    );
    }

[react-native-bot]

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

Please make use of the bug report template to let us know about a reproducible bug or regression in the core React Native library.

If you'd like to propose a change or discuss a feature request, there is a repository dedicated to Discussions and Proposals you may use for this purpose.