Calling a function from another component screen in react navigation

1

So I have a function in my HomeScreen which am trying to call from my addChatScreen which is in another component . I’ve already passed the function from HomeScreen when shifting to AddChatScreen.

import React, {useState} from 'react';
import { StyleSheet, View, Button, Dimensions, Image, FlatList } from 'react-native';
import {FAB, Text} from 'react-native-paper'

const SCREEN_HEIGHT = Dimensions.get('window').height
const SCREEN_WIDTH = Dimensions.get('window').width

//homeScreen
export default function App({navigation}) {

    const [chats, setChat] = useState([])

    const addChat = chat => {

      chat.id = chats.length + 1
      setChat([...chats, chat])
      console.log(chats);

    }

  return (
    <>
      <View
        style={{
          backgroundColor: '#ffffff',
        }}
      >

            <FAB
                style={style.fab}
                small
                icon='plus'
                label='Create Chat'
                onPress={() => navigation.navigate('AddChat', {addChat})}

            />

      </View>
    </>
  );
}

Above is the homeScreen code when am passing the function when the button is clicked

So now in the addChat screen i want to get that function and update the data

import React, {useState} from 'react';

import {Button,
     View, 
     Dimensions,
     Animated,
     TextInput,
     TouchableOpacity,
     TouchableHighlight,
     AsyncStorage,
     Image,
     SafeAreaView,
     StyleSheet,
     KeyboardAvoidingView
 } from 'react-native'
import {MaterialIcons, Entypo, AntDesign, Feather} from 'react-native-vector-icons';

const SCREEN_HEIGHT = Dimensions.get('window').height
const SCREEN_WIDTH = Dimensions.get('window').width

//addChatScreen
export default function App({navigation}){

    const [chatName, setChatName] = useState('')
    const [chatCover, setChatCover] = useState('')
    const [chatPlatform] = useState('whatsapp')

    function onSaveChat() {
        navigation.getParams(addChat(chatName,chatPlatform))
        navigation.goBack()
    }

    return(
        <SafeAreaView style={{
                flex:1, 
                backgroundColor: '#ffffff'
            }}>
            <KeyboardAvoidingView>
                <View>
                
                <View>
                    <View style={{position: 'absolute', top: 20, left: 20, zIndex: 1000}}>
                        <TouchableOpacity onPress={() => navigation.goBack()}>
                            <MaterialIcons name="close" size={30} color="#0C8555" />
                        </TouchableOpacity>
                    </View>

                    <View style={{height: SCREEN_HEIGHT / 2 - 50, width: SCREEN_WIDTH, backgroundColor: '#f1f1f1', justifyContent: 'center', alignItems: 'center'}}>
                        <Image source={require('../../../assets/user.png')} style={{}} />
                        <Text style={{color: '#d1d1d1', fontSize: 18, fontWeight: 'bold', paddingTop: 10}}>FAKE CHAT</Text>
                    </View>

                    <View style={{position: 'absolute', bottom: 20, right: 20, zIndex: 1000, backgroundColor: '#0C8555', padding: 5, borderRadius: 25}}>
                        <TouchableOpacity>
                            <MaterialIcons name="local-see" size={30} color="#ffffff" />
                        </TouchableOpacity>
                    </View>
                </View>

                <View>
                    <View style={{justifyContent: 'center', alignItems: 'center'}}>
                        <TextInput 
                            placeholder='Edit Name'
                            placeholderTextColor='#d1d1d1'
                            value={chatName}
                            onChangeText={setChatName}
                            style={{
                                borderBottomWidth: 2,
                                borderBottomColor: '#0C8555',
                                height: 70,
                                width: SCREEN_WIDTH - 50,
                                fontSize: 20

                            }}
                        />
                    </View>

                    <View style={{margin: 30, alignItems: 'flex-end', justifyContent: 'flex-end'}}>
                                <FAB
                                    style={style.fab}
                                    small
                                    // icon='plus'
                                    label='Create'
                                    onPress={() => onSaveChat()}
                                    disabled={chatName == ''? true : false}
                                />
                    </View>

                </View>

                </View>
            </KeyboardAvoidingView>
        </SafeAreaView>
            )
    }

yeah, this works smooth(goes back to the homeScreen when Create Btn is clicked) but does not update the data.
How can I update the data?

2

Hey Edward,

it would be awesome to see a small example project on codesandbox.

There are some general ideas to your problem:

Because I have no deeper knowledge about your project, it’s good advice to do your own research :slightly_smiling_face:

1 Like
3

Thanks you very much sir