How to add a static background image for screens in Material Top Tab Navigator?

Question

I have created two tabs with createMaterialTopTabNavigator from react-navigation. I like to have a single background image for two tabs.

The current behaviour is that when I swipe from tab1 to tab2, the image is also transitioned, but I like to have the background image static when transitioning from tab1 to tab2, and only the contents of the tab to transition when swiped. I have tried wrapping the TabNavigator inside the ImageBackground component, but that is of no use.

score 3 · Answer 1 · answered Jul 06 '20 at 21:23

I think you can use one of the following solutions:

Style the tabs to have a transparent background and set the background image on a <View> above the navigator. You can find details about styling cards in the React Navigation docs here.
A second option, and the more elegant one I think, is to use a dedicated library for managing transitions in React Navigation. There are a few out there but I personally have used Fluid Transitions and I loved it. If you decide to use this library you can set your background image inside your StackNavigator View. You will need to add a shared prop and you'll be done :)

Sorry for late reply, thanks for you solutions, but both of those didn't work for me. First Solution only works for stack navigators, createMaterialTopTabNavigator doesn't have that option. Also for second solution, I think fluid transitions only supports upto react navigation v3, but I am using react navigation v5. The last commit was 15 months ago — Sriteja Sugoor, Jul 16 '20 at 16:00

score 1 · Accepted Answer · answered Jul 08 '20 at 20:07

here is the demo: https://snack.expo.io/@nomi9995/e05080

the better way to use react-native-tab-view and wrap TabView within ImageBackground

yarn add react-native-tab-view

import React, { Component } from "react";
import {
  Text,
  StyleSheet,
  View,
  SafeAreaView,
  ImageBackground,
  Dimensions,
} from "react-native";
import { TabView, SceneMap } from "react-native-tab-view";
const width = Dimensions.get("window").width;

function FirstRoute() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>FirstRoute!</Text>
    </View>
  );
}

function SecondRoute() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>SecondRoute!</Text>
    </View>
  );
}

export default class App extends Component {
  state = {
    index: 0,
    routes: [
      { key: "first", title: "First" },
      { key: "second", title: "Second" },
    ],
  };
  render() {
    const { index, routes } = this.state;
    const renderScene = SceneMap({
      first: FirstRoute,
      second: SecondRoute,
    });
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <ImageBackground
          style={{ flex: 1, width: width }}
          source={{
            uri:
              "https://firebasestorage.googleapis.com/v0/b/ielts-preps.appspot.com/o/1592920135765?alt=media&token=ec911583-06f9-4315-b66c-cf47de120e85",
          }}
        >
          <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={(i) => this.setState({ index: i })}
            tabBarPosition="bottom"
          />
        </ImageBackground>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({});

Sorry for the late reply. Thanks!! this solved my problem – Sriteja Sugoor Jul 16 '20 at 18:05 — Sriteja Sugoor, Jul 16 '20 at 18:05

How to add a static background image for screens in Material Top Tab Navigator?

2 Answers2