[ListView] wrapped by NavigatorIOS contentInsets inconsistency -- somehow linked to translucency of the titlebar  #2151

Activity

1. shlomiatar commented on Jul 29, 2015

   

   shlomiatar

   on Jul 29, 2015

   Contributor

   More actions

   Hmm.
   Maybe you should try to set the automaticallyAdjustContentInsets prop on your ListView to false?
   We had a few issues with lists padding and turning it off helped:

   <ListView  automaticallyAdjustContentInsets={false} />
2. jaygarcia commented on Jul 29, 2015

   

   jaygarcia

   on Jul 29, 2015

   ContributorAuthor

   More actions

   @schlomiatar, I will give that a go. I still think it's a bug since it doesn't work properly. :(
3. jaygarcia commented on Jul 30, 2015

   

   jaygarcia

   on Jul 30, 2015

   ContributorAuthor

   More actions

   @shlomiatar , no dice. It actually makes things really bad.
   
4. jaygarcia

   changed the title [-][ListView] positioning issue after layout changes[/-] [+][ListView] positioning issue after layout changes (contentInsets related?)[/+] on Jul 30, 2015
5. jaygarcia commented on Jul 30, 2015

   

   jaygarcia

   on Jul 30, 2015

   ContributorAuthor

   More actions

   Another weirdness: Changing translucent : false from default true fixes this issue!

   
6. jaygarcia

   changed the title [-][ListView] positioning issue after layout changes (contentInsets related?)[/-] [+][ListView] contentInsets inconsistency -- somehow linked to translucency of the titlebar [/+] on Jul 30, 2015
7. jaygarcia commented on Jul 31, 2015

   

   jaygarcia

   on Jul 31, 2015

   ContributorAuthor

   More actions

   So it seems that translucent : false prevents you from scrolling to the bottom. D:

   

   👍React with 👍1Reacted by Yan Zer0
8. jaygarcia commented on Aug 5, 2015

   

   jaygarcia

   on Aug 5, 2015

   ContributorAuthor

   More actions

   Turns out that this is some type of layout bug with Navigator IOS and child items.

   In an iPhone 6, the only way to resolve some of these issues is with fudging things around.

   1. Turn off translucent as detailed above.
   2. wrap the ListView with another view, whose height is window.height - 60px

               <View style={{height: window.height - 60, backgroundColor : '#0000FF'}}>
                   <ListView 
                       style={styles.listView} 
                       dataSource={this.state.dataSource} 
                       initialListSize={30} 
                       pageSize={30} 
                       scrollRenderAheadDistance={50} 
                       renderRow={this._renderRow}
                   />
               </View>
   

   The demo below is an example of how this is resolved with wrapping the list view.

   
9. jaygarcia

   changed the title [-][ListView] contentInsets inconsistency -- somehow linked to translucency of the titlebar [/-] [+][ListView] wrapped by NavigatorIOS contentInsets inconsistency -- somehow linked to translucency of the titlebar [/+] on Aug 5, 2015
10. alvaromb commented on Sep 7, 2015

    

    alvaromb

    on Sep 7, 2015

    Contributor

    More actions

    Sorry for the off-topic @jaygarcia, but how do you managed to use NavigatorIOS inside a modal component?
11. christopherdro commented on Sep 13, 2015

    

    christopherdro

    on Sep 13, 2015

    Contributor

    More actions

    I think it's important to note the difference of behavior when using ListView with NavigatorIOS specifically.

    Here's a sample from 0.11.0-rc that shows you don't need to make any adjustments to the ListView to get the content to line up properly, with either translucent set to true or false. https://rnplay.org/apps/WF7zAg

    For others who are having similar issues but are NOT using NavigatorIOS then your going to have add automaticallyAdjustContentInsets={false} to your ListView. See #1779

    @alvaromb You could check out the UIExplorer demo included on the repo. I think this should help.

    @ide @brentvatne
12. jaygarcia commented on Sep 17, 2015

    

    jaygarcia

    on Sep 17, 2015

    ContributorAuthor

    More actions

    @christopherdro , thanks. I'll look to upgrade RN versions soon. I do so very cautiously because things keep changing causing breaks in my app :)
13. jaygarcia commented on Oct 20, 2015

    

    jaygarcia

    on Oct 20, 2015

    ContributorAuthor

    More actions

    Closing this.
14. jaygarcia

    closed this as completedon Oct 20, 2015
15. react

    locked as resolved and limited conversation to collaborators on Jul 22, 2018
16. react-native-bot

    added

    Resolution: LockedThis issue was locked by the bot.This issue was locked by the bot.

    on Jul 22, 2018