CODEWITHSUNDEEP
react-native
GeraltDieSocke
GeraltDieSocke

Reputation: 1618

White flickering when changing pages using an Image Background in React-native

The Problem

I have a Stack Navigator. When I switch from Page A to Page B (who uses the same ImageBackground component the next screen appears instantly but without the background Image. Only after about 1 - 2 seconds is it appearing. I use a background image (just a complex gradient which you can't do with react-native, so I exported it as image) for every page on my app. So I created a component called Container that just exports an ImageBackground with the passed in Background image. It looks like this:

const BackgroundImageContainer = styled.ImageBackground`
  justify-content: space-between;
  flex: 1;
`;

const Container = ({children}) => (
  <BackgroundImageContainer
    source={require('../assets/Background.png')}
    style={{flex: 1, width: null, height: null}}>
    {children}
  </BackgroundImageContainer>
);

I also have a tab bar and when I switch to different tabs the screen "flashes white" because I see the white background for a sec and then it shows the actual Background Image.

I think it has something to do with loading time of the image (although it's just 160KB). How do I load this image when the app starts and then "caches" it so it's available to all components "instantly" ?

Upvotes: 2

Views: 5658

Answers (1)

Abdeen
Abdeen

Reputation: 932

Have a look at this, it should help you sort out image caching.

Hope this Helps!

Upvotes: 2

Related Questions