Very slowly perfermance when there is some ListItem in one page. #759

Symous · 2017-04-20T09:28:39Z

Hi ,there are some ListItem(about 6-7) in one page of my program(Android Platform),And I found that when I click a button to enter this page(with some ListItem),it will have a 1-3 scends delay before I totally enter the page, And the switch animation is not smooth enough too.

And after that I have made a custom ListItem component of myself and replace the ListItem of nativebase,when I test to press a button to enter this page again.it work much better,but the switch animation is still not smooth.

So,it prove that the ListItem component of nativebase is not "perfect" enougn.and I aslo have run the demo app of native base, it also slowly when we open a page when there is ListItem exist.

Do you have any idea about that and how to solve this.It's an urgency for me. Thank you!

cyclops24 · 2017-05-06T08:13:45Z

+1 I have performance issue too. 😞

SupriyaKalghatgi · 2017-05-29T07:59:54Z

#625

Jasbir23 · 2017-06-08T07:52:57Z

Hi @Symous @cyclops24 , We tried replicating what you suggested but did not encounter any problems. Some more information might help like are you using images in your ListItems. Also, attach some code snippets or GIF's to make this clearer.

Symous · 2017-06-08T12:11:36Z

@Jasbir23 Hi, in my app I have about 7 - 8 of the below ListItem in one page.

<ListItem icon>
        <Left>
          <Button style={{ backgroundColor: '#FD3C2D' }} onPress={()=>{alert(oo.id);}}>
            <Icon active name="notifications" />
          </Button>
        </Left>
        <Body>
          <Text>Notifications</Text>
        </Body>
        <Right>
          {(Platform.OS === 'ios') && <Icon active name="arrow-forward" />}
        </Right>
      </ListItem>

// some similar ListItem here...

and everytime I enter this page, the perfermance is just so bad. :-)

Jasbir23 · 2017-06-09T06:16:08Z

@Symous I need a little more than that. Like, versions of RN and NB. What navigation are you using. Also a GIF showing the performance problem will help us solve this quicker.
Thanks :-)

mnlbox · 2017-07-16T09:14:34Z

@Jasbir23 please see #1024 for see more detail about this bug.
@Symous Are you find any working solution about this or stop using NativeBase List component?

Symous · 2017-07-21T02:30:13Z

@Jasbir23 Hi,sorry for the delay.

this is the version information
React-Native : 0.45.1,
Native-Base:2.1.2
navaigation: react-native-router-flux : 3.38.0 (Also test with react-navigation,and turned out same result)

In fact I have replace the ListItem with a custom component just like it. what I can say is that ListItem works not fluently enough, the animation when we enter a page with some ListItem perform so slowly,,,

Symous · 2017-07-21T02:33:46Z

@mnlbox Hi,I guess the best way for now is that create a similar custom component to replace ListItem....

sebasgarcep · 2017-08-12T03:50:06Z

@Symous I used to have perf issues with react-native-router-flux. Could you try using react-navigation instead?

Symous · 2017-08-15T05:40:43Z

@sebasgarcep actually, I have test it with react-navigation when I found the issue ,but the result is still not
smooth enough... :(

sebasgarcep · 2017-08-15T16:35:09Z

@Symous Are you running production builds? The difference in performance is huge.

Akshg · 2017-09-11T19:43:00Z

@Symous I have a work around for this problem. Check out this blog post https://medium.com/@akash_gupta/react-native-how-settimout-saved-my-life-803346bf18a5 if this helps.
You can use the deferred rendering of the component in which you are using ListItem as suggested on the blog.

Symous · 2017-09-13T01:22:23Z

@sebasgarcep not yet, I just running in the develop mode, will try that later, thanks.

sebasgarcep · 2017-09-13T15:40:43Z

@Akshg What about using InteractionManager instead of setTimeout? Have you tried that?

Akshg · 2017-09-13T17:36:01Z

@sebasgarcep yes i tried InteractionManager but it didn't help. I used like it is shown here https://github.com/brentvatne/run-after-interactions-exp/blob/master/main.js

ksrawat · 2017-09-21T03:09:50Z

@Akshg @sebasgarcep @Symous

I tried using native ListView alongwith 'ListItem' from 'react-native-elements'. And this fixed my lagging and it works pretty awsm. Following is the working code snippet.

<ListView
        style={styles.container}
        dataSource={this.state.dataSource}
        renderRow={(rowdata) => 
          <ListItem
                roundAvatar
                title={`${rowdata.name.first} ${rowdata.name.last}`}
                subtitle={rowdata.email}
                avatar={{ uri: rowdata.picture.thumbnail }}
                containerStyle={{ borderBottomWidth: 0 }}
                rightIcon={{ name: 'phone', type: 'font-awesome', color: '#f50', raised: true}}
                onPressRightIcon={this.callfunction}
              />
        }
        renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
        renderHeader={() => <Header />}
        renderFooter={() => <Footer />}
        renderSectionHeader={(sectionData) => <SectionHeader {...sectionData} />}
/>

Symous · 2017-09-21T03:12:59Z

@ksrawat so,we need to download 'react-native-elements' to our app?

ksrawat · 2017-09-21T17:02:52Z

@Symous yes u need to install 'react-native-elements'
https://react-native-training.github.io/react-native-elements/

try to use it with native Listview.

sebasgarcep · 2017-09-21T21:52:34Z

@ksrawat If things work flawlessly in react-native-elements, then there is a performance issue in this library that is worth investigating. I hope I had the time. Maybe someone else?

SupriyaKalghatgi · 2017-11-08T06:44:26Z

NativeBase List will be deprecated, very soon this will be documented
So please use React Native's FlatList in place of it
You can use ListItem for the necessary styling

akhil-ga · 2017-11-08T10:52:00Z

FlatList with ListItem

SupriyaKalghatgi · 2018-01-31T11:00:47Z

I have opened this issue on the docs repo here: #65
Since we split the docs and the source into separate repos.

SupriyaKalghatgi added performance high priority labels May 23, 2017

SupriyaKalghatgi assigned Jasbir23 May 29, 2017

SupriyaKalghatgi added the 2 label May 29, 2017

Jasbir23 added the awaiting response label Jun 8, 2017

mnlbox mentioned this issue Jul 9, 2017

[BUG] List item onPress fired with a loooooong delay (after 3 or 4 second) #1024

Closed

SupriyaKalghatgi added need doc and removed 2 performance labels Nov 8, 2017

SupriyaKalghatgi assigned SupriyaKalghatgi and unassigned Jasbir23 Nov 8, 2017

SupriyaKalghatgi mentioned this issue Nov 8, 2017

ListItem button onPress slow performance #662

Closed

SupriyaKalghatgi assigned akhil-ga and unassigned SupriyaKalghatgi Nov 8, 2017

SupriyaKalghatgi mentioned this issue Jan 31, 2018

Very slowly performance when there is some ListItem in one page GeekyAnts/native-base-docs#65

Closed

SupriyaKalghatgi closed this as completed Jan 31, 2018

SupriyaKalghatgi mentioned this issue Jan 31, 2018

List Item is not rendering properly when I am trying to render them dynamically #1493

Closed

fgiobergia mentioned this issue May 25, 2018

[#157838213] select payment method pagopa/io-app#167

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Very slowly perfermance when there is some ListItem in one page. #759

Very slowly perfermance when there is some ListItem in one page. #759

Symous commented Apr 20, 2017

cyclops24 commented May 6, 2017

SupriyaKalghatgi commented May 29, 2017

Jasbir23 commented Jun 8, 2017

Symous commented Jun 8, 2017

Jasbir23 commented Jun 9, 2017

mnlbox commented Jul 16, 2017 •

edited

Symous commented Jul 21, 2017

Symous commented Jul 21, 2017

sebasgarcep commented Aug 12, 2017

Symous commented Aug 15, 2017 •

edited

sebasgarcep commented Aug 15, 2017

Akshg commented Sep 11, 2017 •

edited

Symous commented Sep 13, 2017

sebasgarcep commented Sep 13, 2017

Akshg commented Sep 13, 2017 •

edited

ksrawat commented Sep 21, 2017 •

edited

Symous commented Sep 21, 2017

ksrawat commented Sep 21, 2017

sebasgarcep commented Sep 21, 2017

SupriyaKalghatgi commented Nov 8, 2017

akhil-ga commented Nov 8, 2017

SupriyaKalghatgi commented Jan 31, 2018

Very slowly perfermance when there is some ListItem in one page. #759

Very slowly perfermance when there is some ListItem in one page. #759

Comments

Symous commented Apr 20, 2017

cyclops24 commented May 6, 2017

SupriyaKalghatgi commented May 29, 2017

Jasbir23 commented Jun 8, 2017

Symous commented Jun 8, 2017

Jasbir23 commented Jun 9, 2017

mnlbox commented Jul 16, 2017 • edited

Symous commented Jul 21, 2017

Symous commented Jul 21, 2017

sebasgarcep commented Aug 12, 2017

Symous commented Aug 15, 2017 • edited

sebasgarcep commented Aug 15, 2017

Akshg commented Sep 11, 2017 • edited

Symous commented Sep 13, 2017

sebasgarcep commented Sep 13, 2017

Akshg commented Sep 13, 2017 • edited

ksrawat commented Sep 21, 2017 • edited

Symous commented Sep 21, 2017

ksrawat commented Sep 21, 2017

sebasgarcep commented Sep 21, 2017

SupriyaKalghatgi commented Nov 8, 2017

akhil-ga commented Nov 8, 2017

SupriyaKalghatgi commented Jan 31, 2018

mnlbox commented Jul 16, 2017 •

edited

Symous commented Aug 15, 2017 •

edited

Akshg commented Sep 11, 2017 •

edited

Akshg commented Sep 13, 2017 •

edited

ksrawat commented Sep 21, 2017 •

edited