Bottom borderRadius not showing in React Native view

Question

I am currently trying out React Native for the first time and wanted to make a quick restaurant review app to try it out.

Currently I have the issue that for my restaurant cards it's not showing the bottom border radius, this while I do use an overflow of "hidden".

The code of the card

import { StyleSheet, Text, View, ImageBackground } from "react-native";
import React from "react";
import img from "../../assets/img.jpg";

const VerticalScrollItem = (props) => {
  const { name, description, rating } = props.props;
  return (
    <View style={styles.container}>
      <ImageBackground
        source={img}
        resizeMode="cover"
        style={styles.background}
      >
        <View style={styles.titlebox}>
          <Text style={styles.title}>{name}</Text>
        </View>
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderBottomLeftRadius: 7,
    borderBottomRightRadius: 7,
    borderTopLeftRadius: 7,
    borderTopRightRadius: 7,
    overflow: "hidden",
    width: 200,
    height: 300,
    marginRight: 10,
  },
  background: {
    height: "100%",
    padding: 10,
    borderBottomLeftRadius: 7,
    borderBottomRightRadius: 7,
    borderTopLeftRadius: 7,
    borderTopRightRadius: 7,
  },
  titlebox: {
    width: "100%",
    padding: 5,
    backgroundColor: "white",
    opacity: 0.9,
    borderRadius: 2,
  },
  title: {
    fontWeight: "600",
    opacity: 1,
  },
});

export default VerticalScrollItem;

The code of the parent component:

import { StyleSheet, Text, View, ScrollView, Button } from "react-native";
import React, { useEffect, useState } from "react";
import VerticalScrollItem from "./VerticalScrollItem";

// Firebase imports
import { db } from "../../firebase/firebase-config";
import { getDocs, collection, doc } from "firebase/firestore";

const VerticalScrollItems = (props) => {
  const [data, setData] = useState([]);
  const searchRef = props.variant.toLowerCase();

  //Get data from Firebase

  useEffect(() => {
    const getData = async () => {
      //Reference to the collection depending on what row the components is coupled, (see props.collection for the desired col)
      const dataRef = collection(db, searchRef);
      try {
        const newData = await getDocs(dataRef);
        newData.forEach((doc) => {
          const response = doc.data();
          setData((prevState) => [...prevState, response]);
        });
      } catch (err) {
        console.error(err);
      }
    };
    getData();
  }, []);

  return (
    <View style={styles.container}>
      <View
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexDirection: "row",
        }}
      >
        <Text style={styles.title}>{props.variant}</Text>
        <Text style={styles.link}>Show more</Text>
      </View>
      <ScrollView
        style={styles.sv}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
      >
        {/* If there is not data in the array return loading, has to be replaced for a spinner */}
        {data.length ? (
          data.map((item, i) => <VerticalScrollItem key={i} props={item} />)
        ) : (
          <Text>Loading...</Text>
        )}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  sv: {
    flexDirection: "row",
    flex: 1,
  },
  title: {
    fontSize: 24,
    marginVertical: 5,
    fontWeight: "600",
    color: "#2f3840",
  },
  link: {
    color: "#e6933c",
    textDecorationLine: "underline",
  },
});

export default VerticalScrollItems;

Here is an image in Expo ran on my phone:

And this is when loaded in a browser which does seem to load correctly:

Hope someone has a solution for this.

Thanks, Tom

Answer 1

Hi i hope it works for you

 container: {
  borderRadius:7,
  overflow: "hidden",
  width: 200,
  marginRight: 10,
 },

background: {
  padding: 10,
  borderRadius:7,
  height: 300,
},