CODEWITHSUNDEEP
react-native
Shury
Shury

Reputation: 578

React Native shadow left and right only

I'm having a hard time setting some shadow only for the left and right part of a view like this: imgur

I've been trying to work out the properties on react-native-shadow-generator website but to no success. Anyone knows how / if this is possible to be achieved in react-native?

Upvotes: 0

Views: 1745

Answers (1)

serene
serene

Reputation: 1646

You can do like this:

   return (
      <View style={styles.mainContainer}>
      <View  elevation={5} style={styles.boxStyle}>
        <Text>Box 1</Text>
      </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
 mainContainer: {
    backgroundColor: '#ebebeb',
    padding: 10,
    height : height
  },
  boxStyle: {
    backgroundColor: '#fff',
    alignItem: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
    marginLeft: 30,
    marginTop: 15,
    width: 120,
    height: 120,
    padding: 12,
    borderRadius: 8,
    shadowColor: "00000",
    shadowOpacity: 0.9,
    shadowRadius: 4,
    shadowOffset: {
      height: 2,
      width: 2
    }
  }
});

Upvotes: 2

Related Questions