javascript - Function execution is not in order react native -

i using react-navigation navigating through screens. have following button tag onpress property if pressed, navigate called , should go downloading screen. after that, call, generatereports() function, passing callback function.

<button transparent onpress={() => {           navigate('downloading')           generatereports(() => navigate('home'))         }}>  export const generatereports = (callback) => {   generatereportstable(callback) }  export const generatereportstable = (callback) => {   let currentyear = new date(new date().getfullyear(), 0, 1);   let organizations = realm.objects('organization')   let tickets = realm.objects('ticket')   let currentyeartickets = tickets.filtered('created_at > $0', new  date(currentyear).gettime())    for(organization of organizations) {     let currentorganizationtickets = []     console.log(organization.name)     for(ticket of currentyeartickets) {       if(ticket.organization_id === organization.id) {          currentorganizationtickets.push(ticket)       }     }     console.log(currentorganizationtickets)   }   callback() } 

however, when run code, , button pressed, app hangs until process of generatereports finishes , navigating. missing? need navigate first, execute generatereports()