React-native-navigation: [V2] TopBar with LargeTitle + ScrollView

[Purii]

Issue Description

Large Title is not shown when opening the screen.
After scrolling up the title becomes visible.

| Screen opened | Scrolled up |
| :-----------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
| | |

Steps to Reproduce / Code Snippets / Screenshots

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  Dimensions,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
export default class Screen2 extends Component<Props> {
  static options(passProps) {
    return {
      bottomTab: {
        text: "Screen 2"
      },
      topBar: {
        title: {
          text: "Screen 2"
        },
        visible: true,
        animate: true,
        largeTitle: {
          visible: true
        }
      }
    };
  }

  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
    minHeight: Dimensions.get("window").height * 2
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

---

Environment

• React Native Navigation version: 2.2.5
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator > Debug

[Purii]

Needed second screen to demonstrate because of https://github.com/wix/react-native-navigation/issues/3429.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[Purii]

This issue still occurs

[jinshin1013]

This issue it still relevant.

[nbolender]

+1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[ericschaal]

+1

[julianklumpers]

Here is a quick workaround.

<ScrollView ref={ref => ref.scrollTo({x: 0, y: -10})}>

or

<ScrollView ref={ref => (this.view = ref)}>

and then in componentDidMount:

componentDidMount() {
    If(this.view) {
        this.view.scrollTo({ x: 0, y: -10})
    }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[hahtml]

bump

[cesarm16]

This issue still occurs.

[hammadj]

Still happens

[Findiglay]

+1