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

CodePudding user response：

Hi i hope it works for you

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

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

CodePudding user response：

VerticalScrollItem's style is perfect maybe there is something wrong with flatlist's style. Check the style of FlatList.

CodePudding user response：

Try to use the following solutions, 1). Give the borderRadius to imageStyle prop of ImageBackground instead of style. 2). Take the view instead of ImageBackground, And put the image with absolute position with full height and width of ImageBackground and apply to use imageStyle aslo here