1

I Have screen contain an image and I want to take the full-size screen with header?

I just use position: "absolute" but it's not working to wrap the header, and I can't use header: null because I want the back button to appear!

so how can I handle this?

what I get

bg

what I want

bg2

Thanks in advance.

DevAS
  • 807
  • 2
  • 15
  • 41
  • How about `position: fixed; top: 0; left: 0` ? – Yuan-Hao Chiang Sep 24 '19 at 01:50
  • 1
    position in react-native can't take "Fixed" as the value just "relative | absolute" @Yuan-HaoChiang – DevAS Sep 24 '19 at 01:58
  • 1
    Possible duplicate of [What's the best way to add a full screen background image in React Native](https://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native) – joyBlanks Sep 24 '19 at 02:13

3 Answers3

5

You can make header transparent for a specific screen by adding property headertransparent

Try this

 static navigationOptions = {
    headerTransparent: true,
  };

Complete Sample code

import React from "react";
import { View, Dimensions, Image } from "react-native";
import { createAppContainer, createStackNavigator } from "react-navigation";
import { Text } from "react-native";

const { width } = Dimensions.get("window");

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: "Home"
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text
          style={{ padding: 20 }}
          onPress={() => this.props.navigation.navigate("Detail")}
        >
          Send To Detail
        </Text>
      </View>
    );
  }
}

class DetailScreen extends React.Component {
  static navigationOptions = {
    headerTransparent: true,
    headerTintColor: "#fff"
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Image
          style={{ width: width, height: 400 }}
          source={{
            uri:
              "https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=2048x2048",
            cache: "force-cache"
          }}
        />
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  Detail: {
    screen: DetailScreen
  }
});

export default createAppContainer(AppNavigator);

App Demo

enter image description here

Mehran Khan
  • 3,616
  • 1
  • 13
  • 10
  • Great!, But when i wrap this Image in it does not take the full size, That's mean header transparent not deal with safearea? – DevAS Sep 28 '19 at 23:14
  • @DevAS , You should not use Safearea . React Navigation header take care of surface area . You should start your screen from simple view – Mehran Khan Sep 29 '19 at 07:09
1

use this styling in header { position: 'absolute', zIndex: 100, top: 0, left: 0, right: 0, elevation: 0, shadowOpacity: 0, borderBottomWidth: 0 }

Ubaid Iqbal
  • 19
  • 4
0

You need hide the header, if you are using react navigation, you can add the navigationOptions for add attributes for hide the header, like these lines.

static navigationOptions = {
    headerShown: false
  };
uescamilla
  • 47
  • 5