Skip to content

[V2] TopBar with LargeTitle + ScrollView #4475

@Purii

Description

@Purii

Issue Description

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

Screen opened Scrolled up
initially afterscrolling

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions