I set a backgroundImage to a url and it displays properly in the web view but when I try to view it on my Android phone (since it's meant to be an app), the backgroundImage somehow doesn't display? It just shows a white screen. I'm not sure why this happens only when viewing on my phone. I have tried downloading the image and using require to access it from my source folder but it still only displays for the web view and doesn't display for my phone. I am using expo.dev to view on my phone. I am using props to assign the image data for the backgroundImage.

const data = [
  { title: "Joe's Gelato",
    tagline: "Dessert, Ice cream, £££",
    eta: "10-30",
    imgUri: ("https://images.unsplash.com/photo-1572307230741-453859592dce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=800")
  }
];

function HomeScreen({ navigation }) {

  const HomescreenCell = (props) => (
    <Cell
      {...props}

      onPress={() => navigation.navigate('Menu')}

      cellContentView={
        <View style={{ flex: 1, backgroundImage: `url("${props.imgUri}")`, backgroundSize: "cover" }}>
          <View>
            <Text style={{
              fontWeight: "bold",
              fontFamily: "Trebuchet MS",
              color: "#FFC613"
            }}>
            {props.title}
            </Text>
            <Text style={{
              fontFamily: "Noto Sans",
              color: "#FFF2D8"
            }}>
            {props.tagline}
            </Text>
          </View>
        </View>
      }
    />
  )
  return (
    <ScrollView>
       {
         <View>
           <TableView>
              <Section header="HomeScreen" hideSeparator="true" separatorTintColor="#ccc">
                {data.map((item, index) =>
                    <HomescreenCell key = {item.title}
                      title= {item.title}
                      tagline= {item.tagline}
                      eta= {item.eta}
                      imgUri= {item.imgUri}
                    />
                )}
              </Section>
           </TableView>
         </View>
       }
    </ScrollView>
  );
}

CodePudding user response：

I don' think backgroundImage View Style Prop is supported on react-native. At least I could not find it listed in this doc. Try using ImageBackground instead