title: Data exists, but the map function returns no value React Native
body: <p>I guess I'm not realizing something. I have the structure where I list the friends of the logged in user. Data appears to exist on console.log, but the map function does not work. Also, when I press the component in tab transitions, useEffect only works once. It doesn't work after that. Can you help me? Thanks.</p>
  <p>App.js code</p>
  <pre><code>import { StatusBar } from 'expo-status-bar';
  import React, { useState, useMemo } from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  import SignIn from './SignIn';
  import SignUp from './SignUp';
  import Conversation from './Conversation';
  import Contacts from './Contacts';
  import Settings from './Settings';
  import Chats from './Chats';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  import {Ionicons} from '@expo/vector-icons'
  import { UserProvider } from './UserContext';
  import { LogBox } from &quot;react-native&quot;
  
  
  const Stack = createNativeStackNavigator();
  const Tabs = createBottomTabNavigator();
  
  const TabsNavigator = () =&gt; (
    &lt;Tabs.Navigator screenOptions={({ route }) =&gt; ({
      tabBarIcon: ({ focused, color, size }) =&gt; {
        return &lt;Ionicons name={route.name  === &quot;Chats&quot; ? &quot;chatbubble-ellipses-outline&quot; :  route.name === &quot;Contacts&quot; ? &quot;people-outline&quot; : &quot;settings-outline&quot;} color={color} size={size}  /&gt;
      }})}&gt;
      &lt;Tabs.Screen name=&quot;Chats&quot; component={Chats} /&gt;
      &lt;Tabs.Screen name=&quot;Contacts&quot; component={Contacts} /&gt;
      &lt;Tabs.Screen name=&quot;Settings&quot; component={Settings} /&gt;
    &lt;/Tabs.Navigator&gt;
  );
  
  export default function App() {
    LogBox.ignoreAllLogs(true);
    // const [lastUser, setLastUser] = useState('none');
    // const value = useMemo(
    //   () =&gt; ({ lastUser, setLastUser }), 
    //   [lastUser]
    // );
    return (
      &lt;UserProvider&gt;
      &lt;NavigationContainer&gt;
      &lt;Stack.Navigator&gt;
        &lt;Stack.Screen options={{headerShown : false }} name=&quot;SignIn&quot; component={SignIn} /&gt;
        &lt;Stack.Screen
              name=&quot;SignUp&quot;
              component={SignUp}
              options={{  headerTitle:'Login', headerBackVisible : true, headerBackTitleVisible :true}}
            /&gt; 
         &lt;Stack.Screen name=&quot;Home&quot; component={TabsNavigator} options={{headerShown : false, headerBackTitleVisible : false}}/&gt; 
         &lt;Stack.Screen name=&quot;Contacts&quot; component={Contacts} options={{  headerTitle:'ChatApp'}}/&gt; 
         &lt;Stack.Screen name=&quot;Conversation&quot; component={Conversation} options={{  headerTitle:'ChatApp'}}/&gt; 
  
      &lt;/Stack.Navigator&gt;
    &lt;/NavigationContainer&gt;
    &lt;/UserProvider&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  
  </code></pre>
  <p>SignIn.js code</p>
  <pre><code>import { useNavigation } from '@react-navigation/core'
  import React, { useEffect, useState, createContext, useContext } from 'react'
  import { KeyboardAvoidingView, StyleSheet, Text, TextInput, TouchableOpacity, View, Image } from 'react-native'
  import { borderColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes'
  import { auth, firebase } from './firebase'
  import { userContext } from './UserContext'
  import AsyncStorage from '@react-native-async-storage/async-storage';
  
  const SignIn = () =&gt; {
  
      const [email, setEmail] = useState('')
      const [password, setPassword] = useState('')
      const navigation = useNavigation()
      const value = useContext(userContext);
  
      const handleLogin = async() =&gt; {
        await auth
          .signInWithEmailAndPassword(email, password)
          .then(userCredentials =&gt; {
            const user = userCredentials.user;
            console.log('Logged in with:', user.email);
            getUser(user.email);
            navigation.replace(&quot;Home&quot;);
          })
          .catch(error =&gt; alert(error.message))
      }
  
      const getUser = async (email2) =&gt; {
        await firebase.database().ref().child('users').orderByChild('email').equalTo(email2).once('value').then((data) =&gt; {
          data.forEach((node) =&gt; {
                storeUser(node.val().username); // one data
              }
          )
     }
     )
    }
  
     const storeUser = async(data) =&gt; {
       try{
         await AsyncStorage.setItem('sertacKul', data);
       }catch(err){
         console.log(err);
       }
     }
  
      return(
          &lt;KeyboardAvoidingView
        style={styles.container}
        behavior=&quot;padding&quot;
      &gt;
        &lt;View style={styles.inputContainer}&gt;
          &lt;Image style={styles.logo} source={require('./img/logo.png')}&gt;
          &lt;/Image&gt;
          &lt;TextInput
            placeholder=&quot;Email&quot;
            value={email}
            onChangeText={text =&gt; setEmail(text)}
            style={styles.input}
          /&gt;
          &lt;TextInput
            placeholder=&quot;Password&quot;
            value={password}
            onChangeText={text =&gt; setPassword(text)}
            style={styles.input}
            secureTextEntry
          /&gt;
        &lt;/View&gt;
        &lt;View style={styles.buttonContainer}&gt;
          &lt;TouchableOpacity
            onPress={handleLogin}
            style={styles.button}
          &gt;
            &lt;Text style={styles.buttonText}&gt;Login&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity
            //onPress={handleSignUp}
            onPress={() =&gt; navigation.navigate('SignUp')}
            style={[styles.button, styles.buttonOutline]}
          &gt;
            &lt;Text style={styles.buttonOutlineText}&gt;Register&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity
            //onPress={handleSignUp}
            onPress={() =&gt; value.setData('ebebbebebe')}
            style={[styles.button, styles.buttonOutline]}
          &gt;
            &lt;Text style={styles.buttonOutlineText}&gt;{value.lastUser}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      &lt;/KeyboardAvoidingView&gt;
      )
  }
  export default SignIn;
  
  const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor : 'white'
      },
      logo :{
        resizeMode :'contain',
        width: '100%',
        marginBottom : 40
      },
      inputContainer: {
        width: '80%'
      },
      input: {
        backgroundColor: '#eeeeee',
        paddingHorizontal: 15,
        paddingVertical: 10,
        borderRadius: 10,
        marginTop: 5,
      },
      buttonContainer: {
        width: '60%',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 40,
      },
      button: {
        backgroundColor: '#06d6cc',
        width: '100%',
        padding: 15,
        borderRadius: 10,
        alignItems: 'center',
      },
      buttonOutline: {
        backgroundColor: 'white',
        marginTop: 5,
        borderColor: '#06d6cc',
        borderWidth: 2,
      },
      buttonText: {
        color: 'white',
        fontWeight: '700',
        fontSize: 16,
      },
      buttonOutlineText: {
        color: '#06d6cc',
        fontWeight: '700',
        fontSize: 16,
      },
    })
  </code></pre>
  <p>Contact.js code</p>
  <pre><code>import React, { useState, useEffect, useContext } from &quot;react&quot;;
  import {
    StyleSheet,
    View,
    TextInput,Text
  } from &quot;react-native&quot;;
  import { auth, firebase } from &quot;./firebase&quot;;
  import { List, Avatar, Divider, FAB } from &quot;react-native-paper&quot;;
  import uuid from &quot;react-native-uuid&quot;;
  import moment from &quot;moment&quot;;
  import { userContext } from &quot;./UserContext&quot;;
  import AsyncStorage from '@react-native-async-storage/async-storage';
  
  const Contacts = () =&gt; {
  
    const [username, setUsername] = useState(&quot;&quot;);
  
    const value = useContext(userContext);
    const [contactList, setContactList] = useState([{}]);
    const [lastUser, setLastUser] = useState('');
  
    useEffect(() =&gt; {
      setContactList([])
      updateLastUserName();
      getContacts();
    }, [])
  
    useEffect(() =&gt; {
      console.log(lastUser);
      console.log(contactList);
  
   }, [lastUser, contactList]);
  
   async function updateLastUserName(){
    const user = await getUserName();
    setLastUser(user);
  }
  
    async function getUserName(){
      const user = await AsyncStorage.getItem('sertacKul');
      return user;
     }
  
    const addFriend = () =&gt; {
      console.log(value.lastUser)
      firebase
        .database()
        .ref(&quot;/users/&quot;)
        .once(&quot;value&quot;)
        .then((data) =&gt; {
          let id = uuid.v4();
          firebase
            .database()
            .ref(&quot;/friendrelations/&quot; + id)
            .set({
              id: id,
              user1: username,
              user2: lastUser,
              relationtype: &quot;normal&quot;,
              createdDate: moment().format(&quot;DD/MM/YYYY HH:mm:ss&quot;),
            })
            .then(() =&gt; alert(&quot;Friend added.&quot;));
        });
    };
  
    async function getContacts(){
    
      await firebase.database().ref().child('friendrelations').orderByChild('user2').equalTo(lastUser)
    .once('value').then(data =&gt; {
      data.forEach((node) =&gt; { setContactList(lastContacts =&gt; [...lastContacts, node.val().user1])})
    })
  }
  
    return (
      &lt;View&gt;
        &lt;TextInput
          placeholder=&quot;Yeni Arkadaş&quot;
          value={username}
          style={styles.input}
          onChangeText={(text) =&gt; setUsername(text)}
        /&gt;
        &lt;FAB
          onPress={() =&gt; addFriend()}
          icon=&quot;plus&quot;
          style={{ position: &quot;absolute&quot;, right: 16 }}
        /&gt;
      {/* is not working */}
      {contactList.map((item)=&gt;{
           (&lt;List.Item onPress={() =&gt; navigation.navigate('Conversation')} title={item}
           left={() =&gt; &lt;Avatar.Image source={require('./img/profile1.png')} size={53}/&gt;}
           /&gt;
          )
       })}  
           &lt;Divider inset/&gt;
        
  
      &lt;/View&gt;
    );
  };
  export default Contacts;
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: &quot;center&quot;,
      alignItems: &quot;center&quot;,
      backgroundColor: &quot;white&quot;,
    },
    logo: {
      resizeMode: &quot;contain&quot;,
      width: &quot;100%&quot;,
      marginBottom: 40,
    },
    inputContainer: {
      width: &quot;80%&quot;,
    },
    input: {
      backgroundColor: &quot;#eeeeee&quot;,
      paddingHorizontal: 15,
      paddingVertical: 10,
      borderRadius: 10,
      marginTop: 5,
    },
    buttonContainer: {
      width: &quot;60%&quot;,
      justifyContent: &quot;center&quot;,
      alignItems: &quot;center&quot;,
      marginTop: 40,
    },
    button: {
      backgroundColor: &quot;#06d6cc&quot;,
      width: &quot;100%&quot;,
      padding: 15,
      borderRadius: 10,
      alignItems: &quot;center&quot;,
    },
    buttonOutline: {
      backgroundColor: &quot;white&quot;,
      marginTop: 5,
      borderColor: &quot;#06d6cc&quot;,
      borderWidth: 2,
    },
    buttonText: {
      color: &quot;white&quot;,
      fontWeight: &quot;700&quot;,
      fontSize: 16,
    },
    buttonOutlineText: {
      color: &quot;#06d6cc&quot;,
      fontWeight: &quot;700&quot;,
      fontSize: 16,
    },
  });
  
  </code></pre>