0

I just started a new project with a standard expo typescript and wanted to use the SafeAreaProvider/SafeAreaView from react-native-safe-area-context. When I do this and enter a component to render with an image; it shows double (renders twice).

I tried a console log and swas that it was rerendered 3 times, How can I prevent this from happening?

*

App.tsx

import { StatusBar } from "expo-status-bar";
import React from "react";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

import useCachedResources from "./hooks/useCachedResources";
import useColorScheme from "./hooks/useColorScheme";
import Navigation from "./navigation";
import HomeScreen from "./screens/HomeScreen/HomeScreen";

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
          <HomeScreen />
          <Navigation colorScheme={colorScheme} />
          <StatusBar />
        </SafeAreaView>
      </SafeAreaProvider>
    );
  }
}

HomeScreen.tsx

import * as React from "react";
import { Image } from "react-native";

import { Text, View } from "../../components/Themed";
import styles from "./styles";

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={{
          uri:
            "https://www.homewallmurals.co.uk/ekmps/shops/allwallpapers/images/captain-marvel-higher-further-faster-61x91-5cm-movie-posters-31607-1-p.jpg",
        }}
      ></Image>
    </View>
  );
};

export default HomeScreen;
thatguywholearns
  • 41
  • 1
  • possibly explains one re-render: https://github.com/facebook/react-native/issues/19377. you're also using a navigator here, which measures layout on mount and could account for another. try to narrow it down further to just rendering an image at the root and so on to get an understanding of which components are causing it – brentvatne May 06 '21 at 22:00
  • Two renders are caused by SafeAreaView component. Try removing it and see the result. If you would still want to make your app safe in terms of visible area, then you can use SafeAreaInsetsContext.Consumer which will render you app only once – Bravo Sep 07 '21 at 08:40

0 Answers0