React navigation ImageBackground displaying white screen

Question

Update: Its my AppNavigator thats causing the problem, if I remove it, it displays the background. How can I use ImageBackground with my AppNavigator:

const config = {
    initialRouteName: "Home",
    contentOptions: {
        activeTintColor: "#e91e63",
        itemsContainerStyle: {
            // opacity: 1
        },
        iconContainerStyle: {
            // opacity: 1
        },
        itemStyle: {
            flexDirection: "row-reverse"
        }
    },
    drawerWidth: 300,
    drawerPosition: "right",
    drawerBackgroundColor: "transperent"
};

const withHeader = (
    screen: Function,
    routeName: string,
    Header
): StackNavigator =>
    createStackNavigator({
        [routeName]: {
            screen,
            navigationOptions: ({ navigation, routeName, props }) => ({
                header: props => <Header {...props} />,
                title: routeName,
                headerMode: "screen",
                layoutPreset: "right",
                cardStyle: { backgroundColor: "transperent" }
            })
        }
    });

const routes = {
    Home: {
        screen: withHeader(HomeScreen, "Home", BasicHeader)
    },
    Links: {
        screen: withHeader(LinksScreen, "Links", DrawerHeader)
    },
    Settings: {
        screen: withHeader(SettingsScreen, "Settings", DrawerHeader)
    },
    VideoEpisodes: {
        screen: withHeader(VideoEpisodesScreen, "Video Episodes", DrawerHeader)
    },
    VideoPlayer: {
        screen: withHeader(VideoPlayerScreen, "Video Player", DrawerHeader)
    },
    TestYourself: {
        screen: withHeader(TestYourselfScreen, "Test Yourself", DrawerHeader)
    },
    MyResults: {
        screen: withHeader(MyResultsScreen, "My Results", DrawerHeader)
    },
    BookmarkedVideos: {
        screen: withHeader(
            BookmarkedVideosScreen,
            "Bookmarked Videos",
            DrawerHeader
        )
    },
    Search: {
        screen: withHeader(SearchScreen, "Search", DrawerHeader)
    },
    About: {
        screen: withHeader(AboutScreen, "About", DrawerHeader)
    }
};

const AppNavigator = createDrawerNavigator(routes, config);

export default createAppContainer(AppNavigator);

Do you see the background image if you remove everything that's inside your ```ImageBackground``` component? — Jono, May 24 '19 at 10:41
It happened with me too, I converted the jpg image to png. don't know why, it works with jpg as well. — Ankush Rishi, May 24 '19 at 11:35
Still no luck, works I remove everything inside `ImageBackground` - how can I get transparent screens? — Bomber, May 25 '19 at 18:33

score 0 · Answer 1 · answered May 24 '19 at 11:23

ImageBackground component has a props called resizeMode.It has these options ('cover', 'contain', 'stretch', 'repeat', 'center') please try the below code with different options and check if your requirement fullfils.

export default class App extends React.Component {   render() {
    return (
      <ImageBackground
        source={require("./assets/images/TC_background.jpg")}
        style={styles.container}
        resizeMode= "stretch"
      >
        {Platform.OS === "ios" && <StatusBar barStyle="default" />}
        <Provider store={store}>
          <AppNavigator />
        </Provider>
      </ImageBackground>
    );   } }

const styles = StyleSheet.create({   container: {
    flex: 1,
    fontFamily: "lato-regular",
    width: "100%",
    height: "100%" 
} });

React navigation ImageBackground displaying white screen

1 Answers1

Linked