Padding Issues

[cancan101]

The padding on the top seems to change on subsequent routes:
initial:

second:

<ExNavigator
    ref="navDevice"
    style={{flex: 1, paddingTop: 65}}
    initialRoute={{
        getTitle() {return 'Devices'; },
        getSceneClass() {return DeviceList; },
        renderRightButton(navigator) {
            return (
              <TouchableOpacity
                touchRetentionOffset={ExNavigator.Styles.barButtonTouchRetentionOffset}
                onPress={() => {that.goToAddDevice();}}
                style={ExNavigator.Styles.barRightButton}>
                <Text style={ExNavigator.Styles.barRightButtonText}>+</Text>
              </TouchableOpacity>
            );
        }
    }}
/>

and then I wire up goToAddDevice to push the same route:

    goToAddDevice(){
        const that = this;
        const nextRoute={
            getTitle() {return 'Devices'; },
            getSceneClass() {return DeviceList; },
            renderRightButton(navigator) {
                return (
                  <TouchableOpacity
                    touchRetentionOffset={ExNavigator.Styles.barButtonTouchRetentionOffset}
                    onPress={() => {that.goToAddDevice();}}
                    style={ExNavigator.Styles.barRightButton}>
                    <Text style={ExNavigator.Styles.barRightButtonText}>+</Text>
                  </TouchableOpacity>
                );
            }
        };
        this.refs.navDevice.push(nextRoute);
    }

[ide]

I think it's something to do with how React Native handles content offsets, which are almost always a pain in the butt. I actually encountered this in one of our apps yesterday but didn't investigate further... can you try setting automaticallyAdjustContentInsets={false} on your ScrollView?

[cancan101]

automaticallyAdjustContentInsets={false} did work (it is actually a ListView rather than a ScrollView).

Reading the docs though, I am not sure why this flag works:

Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar.

What is being (improperly) adjusted for?

[ide]

It's supposed to be smart and adjust content insets to make way for native UINavigationControllers and UITabBarControllers but often ends up being confusing. It's simpler to set the height of the navbar/tabbar and top/bottom inset yourself. In this case I think it's trying to add 20px to the top inset to make way for the status bar. My recommended solution is just to add the 20px yourself to start with, and later write a tiny native module that listens to changes to the status bar frame, sends those events to JS, and then have your app code change the top padding of your scroll bar accordingly (haven't actually done this last part myself since even Apple doesn't handle status bar changes sometimes lol).

(FYI ListViews wrap ScrollViews and pass many of its props down.)

[cancan101]

What confused me is why the auto-adjustment applies on the initial route but not on subsequent routes. Especially since we are not using NavigatorIOS, I would think that RN should see the same native controls in both cases.

I did find this project: https://github.com/brentvatne/react-native-status-bar-size

though I am confused because even though I don't use that project / respond to changes in the size of the status bar, when I toggle "in-call status bar", the padding looks ok:

[cancan101]

@ide The problem with setting automaticallyAdjustContentInsets={false} is that the bottom of the ListView is then cutoff by a tab bar:

[ide]

I recommend giving the ListView a bottom inset or bottom padding manually. Not sure what ExNavigator can do here. The best handling of insets I've seen is Apple's layout guides and it's a kind of narrow-minded API like a lot of Apple APIs so I don't think we want to take that approach (and would require patching React Native, plus coming up with a way to make it work on Android). So my suggestion is to adjust the insets yourself.

[cancan101]

I don't really understand why the first route on the ExNavigator has issues but subsequent routes do not.