How do I make a View with borderRadius transparent?-CodePudding

I have a <KeyboardAvoidingView />, to which I added borderRadius on the top left and right. I want it at the bottom of the screen. This <KeyboardAvoidingView /> is on top of a <FlatList />. However adding rounded borders leaves a gray shadow. The only way I managed to make them disappear and be transparent the way I wish (so you can see the <FlatList /> behind), was to use position: "absolute", but then its no longer a keyboard avoiding View.

const StoreItems = ({route}) => {
  const stores = useStores();
  const [store, setStore] = useState(null);

  useEffect(() => {
    setStore(stores[route.params.storeId]);
  });

  const styles = StyleSheet.create({
    flatList: {
      backgroundColor: 'blue',
    },
    view: {
      height: 60,
      borderRadius: 40,
      backgroundColor: 'green',
    },
  });


    return (
      <View style={{height: '100%'}}>
        <FlatList
          data={store.items}
          renderItem={item => {
            return <ListItem item={item} />;
          }}
          keyExtractor={item => item.id}
          style={styles.flatList}></FlatList>
        <KeyboardAvoidingView style={styles.view} />
      </View>
    );
};

The gray shadows left by the View

CodePudding user response：

You can set FlatList‘s container view backgroundColor (sample).