'React-native (Signed) release apk keeps crashing after login screen

when i build release apk after following all the documents from the official react native documentation my app crash after login screen , in the screen of events list but in the debug apk work fine. i tried some solution but nothing help

this is my code

import React, { useState, useEffect, useCallback } from "react";
import { RefreshControl, StyleSheet, View, Text, ScrollView, ActivityIndicator, TouchableOpacity, SafeAreaView } from "react-native";
import { HomeNavBar } from '../../layouts/index';
import { getAllApproximateEvents, SearchEnabledEvent } from '../../services/Event.service';
import { getIndividualConnectedAccount } from '../../services/ConnectedAccount.service';
import { Colors } from '../../core/Colors';
import Unities from '../../core/unities';
//Componnents
import { Event, Filter } from '../../components/index';
//icons
import FilterIcon from '../../assets/filter-gray.svg';
import Indicator from '../../assets/indicator.svg';
import NoEvent from '../../assets/NoEvents.svg'
//Redux
import { connectIndividualAccountSuccess, bankIndividualAccountSuccess } from '../../redux/slices/LoginSlices';
import { useSelector, useDispatch } from 'react-redux';

const wait = (timeout) => {
  return new Promise(resolve => setTimeout(resolve, timeout));
}

export default function Home({ route, navigation }) {
  const dispatch = useDispatch()

  const page = 0;
  const [event_list, setEvent_list] = useState([]);
  const [eventNumber, setEventNumber] = useState(0);
  const [refreshing, setRefreshing] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const { profil, connectedIndividualAccount, compteStripe } = useSelector((state) => state.login)

  //filter
  const [isFilterVisible, setIsFilterVisible] = useState(false);
  const [isFilter, setIsFilter] = useState(false);
  const handleFilter = () => setIsFilterVisible(() => !isFilterVisible);
  const [filterData, setFilterData] = useState({
    AddressList: [],
    Distance: 0,
    title: "",
    Address: [],
    isPublic: "",
    category: null,
    subCategorie: null,
    endDate: null,
    startDate: null,
    offreTarrifaire: "",
    minPrice: 0,
    maxPrice: 3000,
    mine: false,
    UserId: profil.id
  }
  )
  //connected account
  const getCurrentConnectedAccount = () => {
    getIndividualConnectedAccount(profil.id).then((res) => {
      if (res) {
        console.log('account', res.data)
        dispatch(connectIndividualAccountSuccess(res.data.stripeIndividualAccount));
        dispatch(bankIndividualAccountSuccess(res.data.stripeBankAccount))
      }

    }).catch((error) => {
      console.log('ERRRRRRRRRRRRRRRRRRR', { error })
    })

  }

  //***** 
  const onRefresh = useCallback(() => {
    setRefreshing(true);
    getList_Event();
    // getCurrentConnectedAccount();
    wait(1000).then(() => setRefreshing(false));
  }, []);
  useEffect(() => {
    getList_Event();
    if (compteStripe.buissnesType == 'individual') {
      getCurrentConnectedAccount();
    }

  }, []);

  const filter_Event = (data) => {
    setIsLoading(true);
    if (data == filterData) {
      getList_Event();
    } else {

      try {
        SearchEnabledEvent(data).then(
          (res) => {
            setEvent_list(res.result);
            setIsLoading(false);
          }
        );
      } catch (error) {
        console.log(error)
      }
    }
  }

  const getList_Event = () => {
    setIsLoading(true);
    setIsFilter(false)
    try {
      getAllApproximateEvents().then(
        (res) => {
          setEvent_list(res.result);
          getNumberOfEventCancled(res.result);
          setIsLoading(false);
        }
      );
    } catch (error) {
      console.log(error)
      setIsLoading(false);
    }
  }

  const getNumberOfEventCancled = (list) => {
    let j = 0;
    for (let i = 0; i < list.length; i++) {
      if (!list[i].cancelled) {
        j++;
      }
    }
    setEventNumber(j);
  }
  return (
    <View style={styles.container}>
      <HomeNavBar onPressLoop={handleFilter} route={route} navigation={navigation} />
      {isFilter && <TouchableOpacity style={styles.filterBar} onPress={() => { getList_Event(); setIsFilter(false) }}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <Text style={{ color: Colors.placeholder }}>Annuler </Text>
          <FilterIcon />
        </View>
        <Indicator />
      </TouchableOpacity>}

      <Filter modalVisible={isFilterVisible} handleModal={handleFilter} filterPress={(data) => { filter_Event(data), setIsFilter(true) }} mine={false} isPassed={null} />
      {event_list.length != 0 && <ScrollView
        contentContainerStyle={styles.scrollView}
        style={styles.scroll}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }>

        {event_list.map((item, id) => (
          !item.cancelled &&
          <Event data={item} key={id} refresh={getList_Event} id={profil.id} navigation={navigation} username={profil.username} type={0} />

        ))}

      </ScrollView>}
      {eventNumber == 0 &&
        <View style={styles.noEvent_container}>
          {isLoading && <ActivityIndicator style={styles.ActivityIndicator} size="large" color={Colors.Orange} animating={isLoading} />}
          {!isLoading && <>
            <Text style={styles.NoEvent_text}>
              C'est calme pas d'évènements
            </Text>
          </>}
        </View>}
    </View>
  )
}

this the component event

import React, { useState } from 'react';
import { StyleSheet, View, Text, Dimensions, Image, TouchableOpacity, Platform } from "react-native";
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { Colors } from '../core/Colors';

import { apiUrl } from '../../config.json';
import moment from "moment";


//services
import { AddAttedance, DeleteAttedance } from '../services/Attendance.service';
import { AddLike, DeleteLike } from '../services/like.service';
import { AddFollowing, DeleteFollowind } from '../services/Following.service';
import { CancelEvent } from '../services/Event.service';
//icons
import Money from '../assets/Money.svg';
import Pencil from '../assets/pencil.svg';
import Trash from '../assets/trash.svg';
import Signaler from '../assets/signaler.svg';
//Component 
import SignalEvent from './SignaleEvent';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const imageHeight = windowHeight - 317;
const imageIos = windowHeight - 380;
export default function Event({ data, refresh, id, navigation, username, type }) {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const handleModal = () => setIsModalVisible(() => !isModalVisible);
    const [open, setOpen] = useState(false)
    const [openSignale, setOpenSignale] = useState(false)
   

    return (
        <View style={styles.container}>
            {type == 0 &&
                <View style={styles.header}>
                    <TouchableOpacity style={styles.part1} onPress={() => {
                        if (data?.publisherId != id) { navigation.navigate('ProfilOrganisateur', { userId: data?.publisherId }) } else {
                            navigation.navigate('Profil')
                        }
                    }}>
                        {data.publisherPhotoPath &&
                            <Image style={styles.image} source={{ uri: `${apiUrl}${data?.publisherPhotoPath}` }} />}
                        {!data.publisherPhotoPath &&
                            <Image style={styles.image} source={(require('../assets/default-user.png'))} />}
                        <View>
                            <Text style={styles.Name_Text}>{data?.firstname} {data?.lastname}</Text>
                            <Text style={styles.Date_Text}>{createDate}</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={styles.part2} >
                        {data?.publisherId != id && !data?.isFollower &&
                            <TouchableOpacity>
                                <Text style={styles.orange_Text} onPress={abonner}>S'abonner</Text>
                            </TouchableOpacity>
                        }
                        {data?.publisherId != id && data?.isFollower &&
                            <TouchableOpacity>
                                <Text style={styles.orange_Text} onPress={desabonner}>Désabonner</Text>
                            </TouchableOpacity>
                        }
                        {openSignale &&
                            <TouchableOpacity style={styles.signale} onPress={() => { setOpenSignale(false), handleModal() }}>
                                <Signaler width={15} height={15} style={{ marginRight: 5 }} />
                                <Text>Signaler</Text>
                            </TouchableOpacity>
                        }
                        {data?.publisherId != id &&

                            <TouchableOpacity onPress={() => setOpenSignale(!openSignale)}>

                                <FontAwesome5 name='ellipsis-v' size={20} style={styles.icon} color={Colors.Gray} />
                            </TouchableOpacity>}
                    </View>
                </View>}
            <View style={styles.body}>
                <Image style={styles.event_image} source={{ uri: `${apiUrl}${data?.principalPhotoPath}` }} />
                <View style={styles.card}>
                    <View style={styles.card_header}>
                        {data?.publisherId != id && data.cancelled == false &&
                            <TouchableOpacity style={styles.orange_Button} >
                                {!data?.userValidate && !data?.userWaitValidate && <Text style={styles.white_text} onPress={() => { if (!data?.isPublic) { navigation.navigate('contacteCreateur', { title: "Votre message à l'organisateur", placeholder: "Ecrire un mot à l'oraganisateur, cela augmentera votre chance d'etre accepter à l'évènement ...", send: (msg, navigation) => { Participate(msg, navigation) } }) } else { Participate() } }}> Participer</Text>}
                                {data?.userValidate && <Text style={styles.white_text} onPress={DeleteParticipate}>Ne plus Participer</Text>}
                                {data?.userWaitValidate && <Text style={styles.white_text} onPress={DeleteParticipate}>Demande envoyée</Text>}

                            </TouchableOpacity>}
                        {data?.publisherId == id && data?.cancelled == false &&
                            <TouchableOpacity style={styles.orange_Button} onPress={() => gererEvent()} >
                                <Text style={styles.white_text} > Gérer évènement
                                </Text>

                            </TouchableOpacity>}
                        {data?.cancelled == true &&
                            <TouchableOpacity style={styles.orange_Button} >
                                <Text style={styles.white_text} > Evenement annuler</Text>

                            </TouchableOpacity>}
                        <View style={styles.Info_container}>
                            <View style={styles.payment}>
                                <Money style={styles.icon_money}></Money>
                                {data?.offreTarifaire && <Text style={styles.gray_text}>Gratuit</Text>}
                                {!data?.offreTarifaire && <Text style={styles.gray_text}>Payant</Text>}
                            </View>
                            <TouchableOpacity style={styles.heart} onPress={like_event}>
                                {data?.ownUserLike && <FontAwesome5 name='heart' style={styles.icon_heart} size={15} solid color={Colors.Orange} />}
                                {!data?.ownUserLike && <FontAwesome5 name='heart' style={styles.icon_heart} size={15} regular color={Colors.Orange} />}
                                <Text style={styles.gray_text}>{data.like}</Text>
                            </TouchableOpacity>
                            {type == 0 &&
                                <TouchableOpacity style={styles.info} onPress={() => { navigation.navigate('Event_Details', { eventId: data?.eventId, publisherId: data?.publisherId, refresh: refresh }) }}>
                                    <FontAwesome5 name='chevron-right' size={15} light color={Colors.Gray} />
                                    <Text style={[styles.gray_text, { fontWeight: 'bold' }]}>Info</Text>
                                </TouchableOpacity>}
                            {type == 1 && !data.cancelled &&
                                <>
                                    {open &&

                                        <TouchableOpacity style={styles.action_container}>
                                            <View style={styles.action}>
                                                <Pencil />
                                                <Text style={styles.action_text} onPress={() => setOpen(false)}>Modifier</Text>
                                            </View>
                                            <View style={styles.action}>
                                                <Trash />
                                                <Text style={styles.action_text} onPress={() => { navigation.navigate('contacteCreateur', { title: 'Envoyer un message à tous les participants', placeholder: 'Ce message est à envoye à tous les participants', send: (msg, navigation) => { AnnulerEvent(msg, navigation) } }) }}>Annuler</Text>
                                            </View>
                                        </TouchableOpacity>

                                    }
                                    <TouchableOpacity style={styles.info} onPress={() => setOpen(!open)}>
                                        <FontAwesome5 name='ellipsis-h' size={15} light color={Colors.Gray} />

                                    </TouchableOpacity>
                                </>
                            }

                        </View>

                    </View>
                    <View style={styles.card_body}>
                        <View style={styles.first}>
                            <Text style={styles.event_title}>
                                {data.name}
                            </Text>
                            {data.isPublic && <TouchableOpacity style={styles.type_button}>
                                <FontAwesome5 name='users' size={10} regular color={Colors.Orange} />
                                <Text style={styles.type_text}>Public</Text>
                            </TouchableOpacity>}
                            {!data.isPublic && <TouchableOpacity style={styles.type_button}>
                                <FontAwesome5 name='lock' size={10} regular color={Colors.Orange} />
                                <Text style={styles.type_text}>Privé</Text>
                            </TouchableOpacity>}
                        </View>
                        <View style={styles.second}>
                            <View style={styles.adress}>
                                <FontAwesome5 name='map-marker-alt' size={15} light color={Colors.Gray} />
                                <Text style={styles.adress_text}>{data.address.city} {data.address.country}</Text>
                            </View>
                            <View style={styles.date}>
                                <FontAwesome5 name='calendar-minus' size={15} regular color={Colors.Gray} />
                                <Text style={styles.adress_text}>{startDate}</Text>
                            </View>
                        </View>
                        <TouchableOpacity style={styles.theard} onPress={() => { if (data.nbValidatedAttendances != 0) navigation.navigate('List_participants', { eventId: data.eventId, event_name: data.name }) }}>
                            <Text style={styles.participation_text}> {data.nbValidatedAttendances} Participants</Text>
                        </TouchableOpacity>
                    </View>
                    <SignalEvent modalVisible={isModalVisible} handleModal={handleModal} id={data.eventId} />
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: windowWidth,
        marginTop: 10,
    },
    image: {
        height: 50,
        width: 50,
        marginLeft: 15,
        marginRight: 15,
        borderRadius: 30
    },
    header: {
        height: 60,
        width: windowWidth,
        flexDirection: 'row',

    },
    part1: {
        flexDirection: 'row',
        marginTop: 5,
        flex: 2
    },
    part2: {
        flexDirection: 'row',
        position: 'relative'
    },
    icon: {
        padding: 15,
    },
    orange_Text: {
        paddingTop: 15,
        fontSize: 12,
        fontStyle: 'normal',
        fontWeight: 'bold',
        color: Colors.Orange
    },
    Name_Text: {
        paddingTop: 5,
        fontSize: 15,
        color: Colors.Gray
    },
    Date_Text: {
        fontSize: 10,
        color: Colors.Gray
    },
    body: {
        width: windowWidth,
    },
    event_image: {
        width: windowWidth,
        height: Platform.OS === 'ios' ? imageIos : imageHeight,
    },
    card: {
        backgroundColor: 'white',
        flex: 1,
        marginTop: -5,
        borderTopEndRadius: 10,

        borderTopLeftRadius: 10,
        paddingTop: 7,
        paddingLeft: 15,
        paddingEnd: 15,
    },
    card_header: {
        flexDirection: 'row',
        height: 25,
    },
    orange_Button: {
        borderRadius: 15,
        backgroundColor: Colors.Orange,
        height: 25,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: 'center',
        justifyContent: 'center',
    },
    white_text: {
        color: 'white',
        fontSize: 12,
        fontWeight: 'bold'
    },
    Info_container: {
        flex: 4,
        flexDirection: 'row',
        marginLeft: 45,
        height: 25,
        alignItems: 'center'
    },
    icon_money: {
        height: 15,
        width: 12,
    },
    gray_text: {
        color: Colors.Gray,
        fontSize: 14,
        marginLeft: 7,
        marginRight: 5
    },
    icon_heart: {
        marginLeft: 25,
    },
    info: {
        flexDirection: 'row-reverse',
        flex: 2,
        alignItems: 'center',
        position: 'relative'
    },
    action_container: {
        position: 'absolute',
        backgroundColor: 'white',
        width: 150,
        overflow: 'hidden',
        borderColor: '#999',
        elevation: 4,
        borderRadius: 15,
        padding: 5,
        paddingLeft: 10,
        paddingRight: 10,
        left: 55,
        top: 15,
        zIndex: 2,

    },
    action: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10

    },
    action_text: {
        fontSize: 18,
        color: Colors.Second_gray,
        marginLeft: 15
    },
    payment: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 2,
    },
    heart: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 2,
    },
    first: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 10
    },
    event_title: {
        fontSize: 20,
        fontWeight: '500',
    },
    type_button: {
        paddingLeft: 7,
        paddingRight: 12,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        backgroundColor: Colors.Second_orange,
        borderRadius: 15,
        height: 23,
        width: 70,
    },
    type_text: {
        color: Colors.Orange,
        fontSize: 11,
    },
    second: {
        flexDirection: 'row',
    },
    adress: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    date: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    adress_text: {
        fontSize: 14,
        color: Colors.Gray,
        marginLeft: 5,
    },
    theard: {
        flexDirection: 'row',
        marginLeft: 3,
        marginTop: 10,
        alignItems: 'center',
        marginBottom: 30
    },
    avatar: {
        marginLeft: -9,
    },
    participation_text: {
        color: Colors.Gray,
        marginLeft: -5
    },
    signale: {
        padding: 5,
        position: 'absolute',
        backgroundColor: 'white',
        zIndex: 1,
        borderColor: Colors.placeholder,
        borderWidth: 1,
        borderRadius: 3,
        top: 10,
        left: -10,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    }


});

i didn't find why my app crash in this screen



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source