CODEWITHSUNDEEP
androidioscssreactjsreact-native
jSutcliffe90
jSutcliffe90

Reputation: 323

React native box shadow solution for images

I am trying to add styling to different images based upon their touched status. I am struggling to find a solution that works for both android and ios that adds a border shadow to the images. On web I used box-shadow to do this, but that option doesnt work on RN. So far I have tried elevation (not sure if I'm using this correctly as it doesn't seem to do much?) and shadowColor but neither is doing what I need it to

import React, { Component } from 'react';
import { TouchableWithoutFeedback, Image, Alert } from 'react-native';
import { View, Text } from 'native-base';

class Answer extends Component {

  render() {
    const { option, onClickCallback, isSelected, isBlurred } = this.props;

    const {
      cssUnSelected,
      cssSelected,
      cssBlurred,
      image
    } = styles;
    let mode = 'contain';

    let cssSelection = cssUnSelected;
    if (isSelected) {
      cssSelection = cssSelected;
    }
    if (isBlurred) {
      cssSelection = cssBlurred;
    }

    return (
      <View style={cssSelection}>
        <TouchableWithoutFeedback onPress={onClickCallback}>
          <Image source={require('../../assets/imgs/draw90.png')}
            resizeMode={mode}
            style={image} />
        </TouchableWithoutFeedback>
      </View>
    )
  }
}

const styles = {
  cssSelected: {
    borderRadius: 100,
    elevation: 90,
    shadowColor: "green"
  },
  cssUnSelected: {
    borderRadius: 100,
    elevation: 90,
    shadowColor: "blue"
  },
  cssBlurred: {
    elevation: 10,
    borderRadius: 100,
    opacity: 0.5,
    shadowColor: "red"
  },
  image: {
    flex: 1,
    marginLeft: "1%",
    marginRight: "1%",
    maxWidth: 90
  }
}

export default Answer;

Upvotes: 0

Views: 8551

Answers (2)

Ehsan Sarshar
Ehsan Sarshar

Reputation: 3221

Just wrap your <Image> Component inside a <View> Component. and style the <View> Instead of <Image>

Upvotes: 1

Ravi Raj
Ravi Raj

Reputation: 6687

You are missing few things like backgroundColor for the view which is required for shadows to show for various reasons. Moreover you need to provide other shadow style props like shadowOffset, shadowRadius other than shadow color for rendering shadows in IOS (because default values could be 0 or null or anything).

For Android sadly you don't have any customization as of react-native v0.45, you can only provide elevation style prop which adds drop shadow at the bottom of the view for android version lollipop and above (you can't provide offset, shadow color or radius etc).

Below is an small working example

import React, { Component } from 'react';
import { View, StyleSheet,Platform,Button } from 'react-native';

export default class App extends Component {
  state = {
    isSelected: false
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={this.state.isSelected ? styles.boxSelected : styles.boxUnselected} ></View>
        <Button title='toggle select' onPress={() => this.setState({isSelected: !this.state.isSelected}) } />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  boxSelected: {
    width:100,
    height:100,
    backgroundColor:'blue',
    borderRadius:10,
    ...Platform.select({
      ios: {
        shadowColor: 'rgba(0,0,0, .7)',
        shadowOffset: { height:0, width: 0 },
        shadowOpacity: 1,
        shadowRadius: 5,
      },
      android: {
        elevation: 5
      },
    }),
  },
  boxUnselected: {
    width:100,
    height:100,
    backgroundColor:'blue',
    borderRadius:10,
  }
});

snack demo - https://snack.expo.io/r1fcX6_vb

Hope you get an idea...

Upvotes: 3

Related Questions