Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

shadow props doesn't work with <Image>

See original GitHub issue

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
    Memory: 2.78 GB / 20.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    Yarn: 1.16.0 - ~/.nvm/versions/node/v12.4.0/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.4.0/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.0
      System Images: android-27 | Intel x86 Atom_64, android-28 | Intel x86 Atom_64, android-29 | Intel x86 Atom_64
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.0 => 0.60.0

Steps To Reproduce

init with v0.60
add shadow props to <Image/>

Describe what you expected to happen:

Snack, code example, or link to a repository:

Issue Analytics

State:
Created 4 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

3reactions

yozmancommented, Jul 17, 2019

@RobinCsl thanks for your answer, after add overflow: 'visible' shadow is work well but borderRadius is broke, if I remove overflow: 'visible' shadow not work borderRadius is well

1reaction

xi1570-krupeshanadkatcommented, Oct 17, 2020

@dulmandakh Demo Code :

import React, { Component } from 'react'
import { StyleSheet, Text, View, AppRegistry, Image } from 'react-native'

class FlexboxExamples extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.img} source={{uri: 'https://image.freepik.com/free-vector/isometric-hiring-process_52683-44138.jpg'}} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch'
  },
  img: {
    height: 240,
    resizeMode: 'cover',
    borderBottomLeftRadius: 16,
    borderBottomRightRadius: 16,
    shadowColor: '#202020',
    shadowOffset: {width: 0, height: 0},
    shadowRadius: 5,
    overflow: "visible"
  },
})

export default FlexboxExamples;

I just created project with CRNA and replaced content with above in App.js file. Note : Shadow properties doesn’t show up on <Image> element unless I give overflow: "visible" And If i add overflow in style then Border Radius properties doesn’t work. This is bug with <Image> element & still present, kindly reopen the issue 😃