I don't seem to have any problems using setState in other pages of my project but in the app.js it just does not work? I am very new to react native.

I am calling the function 'handleacount' from another page and it gets the data and I just want to update the 'Acount'

The state is updating because it alerts but it does not update when it has already been rendered? Am I missing something?

The page App.js is :

import 'react-native-gesture-handler'; 

import React, { useState, Component } from "react";
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Constants from 'expo-constants';
import IconBadge from 'react-native-icon-badge';

import { Text, View, StyleSheet } from 'react-native';

import HomeScreen from './pages/HomeScreen';
import SearchScreen from './pages/SearchScreen';
import SettingsScreen from './pages/SettingsScreen';
import MapScreen from './pages/MapScreen';
import NotificationsScreen from './pages/NotificationsScreen';
import { ListItem, Avatar, Badge, Icon, withBadge } from 'react-native-elements' 
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
  

const MessagesIcon = ({ tintColor }) => (
  <Icon
    type="MaterialCommunityIcons"
    name="checkcircle"
    size={24}
    color={tintColor}
  />
);




function HomeStack() {
  return (
    <Stack.Navigator>        
     <Stack.Screen 
        name="Home"
        component={HomeScreen}
        options={{ title: 'Home Page', headerShown: false }}
      />

     <Stack.Screen
        name="Search"
        component={SearchScreen}
        options={{ headerShown: false }}
      />
     
     <Stack.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{ headerShown: false }}
      />

       <Stack.Screen
        name="Map"
        component={MapScreen}
        changeoptions={{ headerShown: false }}
      />

      <Stack.Screen
        name="Settings"
        component={SettingsScreen}
        changeoptions={{ headerShown: false }}
      />

    </Stack.Navigator>
  );
}

function SettingsStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Settings"
        component={SettingsScreen}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}

function App() {

function App() { const [Acount, setAcount] = useState(0)

this.state = {
    Acount: 2
  };

handleacount = (data) => {

  this.state = {
    Acount: 9
  }; 

  alert(this.state.acount)
  }



  return (
    <NavigationContainer>
      <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#b08cf3',
        inactiveTintColor: 'black',
      }}>
        <Tab.Screen
          name="HomeStack"
          component={HomeScreen}
          options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={30} />
            ),
          }}
        />

        <Tab.Screen
          name="SearchStack"
          component={SearchScreen}
          options={{
            tabBarLabel: 'Search',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="account-search"
                color={color}
                size={30}
              />
            ),
          }}
        />


        <Tab.Screen
          name="NotificationsStack"
          component={NotificationsScreen}
          options={{
            tabBarBadge: 5,      
            tabBarLabel: 'Notifications',
            tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={30} />
           
        
            ),
          }}
        />        

        <Tab.Screen
          name="MapStack"
          component={MapScreen}
          options={{
            tabBarLabel: 'Map',
            tabBarIcon: ({ focused, color, size }) => {
        return (
           <View>
              <MaterialCommunityIcons name="map-marker" size={30} color='rgb(68,68,68)' style={{ marginTop:0 }}/>
              <View style={{position:'absolute', bottom:32, left:-38 }}>
              <IconBadge
              MainElement={
                   <View>
                      
                   </View>
                }
                
                BadgeElement={
                  
                   // here your text in badge icon
                   <Text style={{fontWeight: 900,fontFamily: "sans-serif-medium",
    fontSize: 14,color:'#FFFFFF', Top:10 }}>{ this.state.acount }</Text>
                }
             
           
            IconBadgeStyle={
                   {width:20,
      height:20,
      borderWidth: 2,
    borderColor: "#b5b5b5",
      backgroundColor: '#ff8a8a'}
                  }


               /></View>
           </View>
        );
      },
          }}
        /> 

        <Tab.Screen
          name="SettingsStack"
          component={SettingsScreen}
          options={{
            tabBarLabel: 'Account',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="account"
                color={color}
                size={30}
              />
            ),
          }}
        /> 
      </Tab.Navigator> 
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {

    flex: 1
  }
});

export default App;

CodePudding user response：

State belongs to the component so you should move it inside the App component like this

function App() {
  const [account, setAccount] = useState(0)
  ...
}

But how do you call the setAccount from another page you wonder and there you need to have a look into React Context or Redux. Context: https://reactjs.org/docs/context.html Redux: https://redux.js.org/

CodePudding user response：

I sorted it by place this in another page:

 <Button
         onPress={() => {increment(2)}} title="Click Me"
       />

Then in the function App I added

  // State: a counter value
  const [counter, setCounter] = useState(0)

  increment = (data) => {
    setCounter(data)
  }

Not entirely sure how or why this works though?