Very slow in android #158

Im-Goutham · 2018-05-17T12:07:46Z

modal taking 2 or 3 seconds to open in Android, while in ios it is very fast.

<Modal isVisible={this.state.showModal} animationIn='slideInUp' backdropColor='black' backdropOpacity='0.20' animationInTiming={0} style={styles.bottomModal} onSwipe={() => this.setState({showModal: false})} onBackdropPress={() => this.setState({showModal: false})} > <View style={styles.modalContent}> <List itemDivider={false}> <ListItem icon noBorder style={{borderBottomWidth: 0}}> <Left> <Icon name="ios-camera"/> </Left> <Body> <Text>Upload from camera</Text> </Body> </ListItem> </List> </View> </Modal> </View>

The text was updated successfully, but these errors were encountered:

mmazzarolo · 2018-05-17T13:40:05Z

Android is slower when not build in release mode.
Try creating a release apk and see if it works correctly there.

Im-Goutham · 2018-05-18T07:21:52Z

@mmazzarolo Yes it is fast in release apk.

waqaramjad · 2019-12-17T09:49:15Z

still facing slow issue

ChinmayDeyUI · 2020-01-20T11:32:48Z

After release Apk the performance still slow

yestay90 · 2020-03-20T11:15:35Z

after release the lag when opening modal still exists.

michaelVictoriaDev · 2020-06-01T02:41:39Z

Still feel lag in android :/

maximusnikulin · 2020-06-03T15:37:03Z

same here

adamsolomon1986 · 2020-06-08T19:14:30Z

lag still exists on Android with RN > .61

murat0 · 2020-06-10T11:05:41Z

Same here

aryatama · 2020-07-02T19:01:08Z

Same here

murat0 · 2020-07-05T05:21:07Z

If you are referring to this slowness being as long as 2-3 seconds, it's most likely related to async content keeping the modal from showing up. It might get a bit confusing because even if your content loading code is placed within ComponentDidMount it can still block the Modal from showing smoothly. I would suggest using an ActivityIndicator along with an isLoading prop and not showing anything at the initial state other than the Modal wrapper itself.

this.state = { isLoading: true }

componentDidMount() { setTimeout(() => this.setState({isLoading: false}), 1000); } // load content here

<Modal visible={isVisible}.....> { !isLoading ? // show your stuff : <ActivityIndicator ... /> }

P.S You also need to wrap the Modal itself with the isVisible prop so that it un-mounts and resets once you dismiss it, resetting the state too. Otherwise it stays mounted.

HelKyle · 2020-07-09T08:11:36Z

In my case, it works correctly after stopping debug js remotely.

cglacet · 2020-09-23T18:25:30Z

@HelKyle Wow, ok. Same for me, but it's still a bit slow.

Here some versions I'm using:

{
   "react-native": "0.62.2",
   "react-dom": "^16.13.1",
   "react": "^16.13.1",
   "react-native-reanimated": "^1.9.0",
}

I tried this on a physical device (one plus).

cglacet · 2020-09-24T17:12:58Z

Here you have a code example that totally screw with the animations on android when debugging (with React Native Debugger) if you want to test it:

import React, { useState } from "react";
import { Button, Text, View, StyleSheet } from "react-native";
import Modal from "react-native-modal";

function MyModal(props) {
  return (
    <Modal
      backdropOpacity={1}
      swipeDirection={"down"}
      onSwipeComplete={props.onRequestClose}
      isVisible={props.isVisible}
    >
      <View style={styles.modalView}>
        <View style={styles.formView}>{props.children}</View>
      </View>
    </Modal>
  );
}

function ModalTester() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="Show modal" onPress={toggleModal} />
      <MyModal isVisible={isModalVisible} onRequestClose={toggleModal}>
        <View style={{ flex: 1 }}>
          <Text>Hello!</Text>
          <Button title="Hide modal" onPress={toggleModal} />
        </View>
      </MyModal>
    </View>
  );
}

const styles = StyleSheet.create({
  modalView: {
    flex: 1,
  },
  modalBackground: {
    flex: 1
  },
  modalBackgroundContent: {
    flex: 1
  },
  formView: {
    flex: 1,
    width: "100%",
    backgroundColor: "white"
  }
});

export default class App extends React.Component {
  render() {
    return <ModalTester />;
  }
}

For those who can't experience the problem, here is how it looks like. When showing the modal :

Press the "show modal" -> The modal just appear at its final position after approximately .5s in (no animation at all)

When closing it:

Tap "hide modal" -> Everything but the hello view + hide modal button disappear (no animation), count 1s before these two also disappear without animation
Swipe down just a little (< threshold) -> the modal freezes here for ~ .5s then slide back up in a few steps each separated by ~ .5s which gives a total of around 2s animation to fully get back to its original position.
Swipe down past the threshold distance -> the modal freezes too, but then disappear without any animation.

On the other hand, while swiping (before releasing) all animations are very smooth (sliding and opacity decreasing for the "backdrop").

With more complex examples (for example including a calendar) even without the debugger the modal is stuttering on close (freezes for a few frames in half way through the animation). This second issue doesn't seems to appear with the native driver option.

wsfung2008 · 2021-11-24T03:53:38Z

i solved it by adding the following prop
useNativeDriver={true}

https://stackoverflow.com/questions/61127422/react-native-modal-time-delay-and-jerky-animation

binitgurzu · 2021-12-29T08:56:34Z

still looking for solutions +1

dvijeniii05 · 2022-01-03T15:51:08Z

I have the same issue.
Currently got useNativeDriver={true} but the modal appearance is still slow

gabrielporcher · 2022-04-08T18:44:29Z

I'm currently using modals in 2 different projects.
An older app, with :
"react": "16.13.1",
"react-native": "0.63.2"
and which uses class components.

In my another newer app I'm using :
"react": "17.0.2",
"react-native": "0.67.2",
And using functional components

In my old app the modal opens very quickly and smoothly.
In my newest app, the modal is taking a while to open, and often with slow animations

I can't understand the reason for this, since in the newest app I'm using more efficient versions and approaches

PS: I tested the same code in both apps, and the old app is much faster to open the modal

HyopeR · 2022-05-18T14:44:52Z

I think this topic should be reopened. Because there really seems to be a slowness problem on the android platform.

    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-modal": "^13.0.1",

ancyrweb · 2022-05-18T17:58:13Z

If this is a problem linked to RN itself, then the issue should be opened there.
Can you provide a repro ?

robin3317 · 2022-12-30T04:41:42Z

In my case, it works correctly after stopping debug js remotely.

Me too.

sajiro · 2023-03-13T05:39:25Z

DId you guys manage to fixed this? i have the same issue its super delay and no animation. when closing the background is going out first then the content after 1 sec i think.

dvijeniii05 · 2023-03-13T11:04:18Z

DId you guys manage to fixed this? i have the same issue its super delay and no animation. when closing the background is going out first then the content after 1 sec i think.

Nope, but found out that it was faster on real device than on emulator so it worked out well for me

sajiro · 2023-03-15T16:47:30Z

faster, but still laggy

mmazzarolo added the invalid label May 17, 2018

mmazzarolo closed this as completed May 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Very slow in android #158

Very slow in android #158

Im-Goutham commented May 17, 2018 •

edited

mmazzarolo commented May 17, 2018

Im-Goutham commented May 18, 2018

waqaramjad commented Dec 17, 2019

ChinmayDeyUI commented Jan 20, 2020

yestay90 commented Mar 20, 2020

michaelVictoriaDev commented Jun 1, 2020

maximusnikulin commented Jun 3, 2020

adamsolomon1986 commented Jun 8, 2020

murat0 commented Jun 10, 2020

aryatama commented Jul 2, 2020

murat0 commented Jul 5, 2020 •

edited

HelKyle commented Jul 9, 2020

cglacet commented Sep 23, 2020 •

edited

cglacet commented Sep 24, 2020 •

edited

wsfung2008 commented Nov 24, 2021

binitgurzu commented Dec 29, 2021

dvijeniii05 commented Jan 3, 2022

gabrielporcher commented Apr 8, 2022

HyopeR commented May 18, 2022

ancyrweb commented May 18, 2022

robin3317 commented Dec 30, 2022

sajiro commented Mar 13, 2023

dvijeniii05 commented Mar 13, 2023

sajiro commented Mar 15, 2023

Very slow in android #158

Very slow in android #158

Comments

Im-Goutham commented May 17, 2018 • edited

mmazzarolo commented May 17, 2018

Im-Goutham commented May 18, 2018

waqaramjad commented Dec 17, 2019

ChinmayDeyUI commented Jan 20, 2020

yestay90 commented Mar 20, 2020

michaelVictoriaDev commented Jun 1, 2020

maximusnikulin commented Jun 3, 2020

adamsolomon1986 commented Jun 8, 2020

murat0 commented Jun 10, 2020

aryatama commented Jul 2, 2020

murat0 commented Jul 5, 2020 • edited

HelKyle commented Jul 9, 2020

cglacet commented Sep 23, 2020 • edited

cglacet commented Sep 24, 2020 • edited

wsfung2008 commented Nov 24, 2021

binitgurzu commented Dec 29, 2021

dvijeniii05 commented Jan 3, 2022

gabrielporcher commented Apr 8, 2022

HyopeR commented May 18, 2022

ancyrweb commented May 18, 2022

robin3317 commented Dec 30, 2022

sajiro commented Mar 13, 2023

dvijeniii05 commented Mar 13, 2023

sajiro commented Mar 15, 2023

Im-Goutham commented May 17, 2018 •

edited

murat0 commented Jul 5, 2020 •

edited

cglacet commented Sep 23, 2020 •

edited

cglacet commented Sep 24, 2020 •

edited