CODEWITHSUNDEEP
react-native
JaRoMaster
JaRoMaster

Reputation: 179

How to create a shadow in react-native on android?

I tried to add a shadow to a View in my project, but I can't figure out why its not working as expected. The shadow only appears at the bottom and not at the sides and does not fade out:

<View
    style={{
      width: '100%',
      padding: 8,
      elevation: 20,
      backgroundColor: 'white',
      shadowColor: 'green',
      margin: 10,
    }}>
    <TextInput
      style={{
        borderWidth: 1,
        borderRadius: 5,
        width: '70%',
        borderColor: colors.createWorkout,
        backgroundColor: colors.primary,
      }}
      placeholder={'Title'}
    />
  </View>

As suggested in many other questions I am using elevation because I'm on android, but it doesn't seem to work correctly here...

Edit: The View is inside a ScollView with padding, somehow the shadow doesn't apper in the padding. If I put it in a View instead of a ScrollView it works just fine

enter image description here

Upvotes: 0

Views: 408

Answers (3)

Bala Vigness
Bala Vigness

Reputation: 457

I would recommend you to use react-native-cardview package.You can see much better results. Give it a try maybe this can help you.

import React, { Component } from 'react';
import {
  View,
  ScrollView,
  TextInput,
} from 'react-native';
import CardView from 'react-native-cardview';
import styles from './styles';

export default class Signup extends Component {

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: colors.whiteColor }}>
        <ScrollView contentContainerStyle={styles.signupContainer}>
            <View style={styles.signupInputs}>
              <CardView
                style={styles.cardStyle}
                cardElevation={2}
                cardMaxElevation={2}
                cornerRadius={5}
              >
                <TextInput
                  underlineColorAndroid="transparent"
                  style={[styles.signupInput, styles.commonsignupStyle]}
                  placeholder="Nom *"
                  placeholderTextColor={colors.primaryColor}
                />
              </CardView>
              <CardView
                style={styles.cardStyle}
                cardElevation={2}
                cardMaxElevation={2}
                cornerRadius={5}
              >
                <TextInput
                  underlineColorAndroid="transparent"
                  style={[styles.signupInput, styles.commonsignupStyle]}
                  placeholder="Prénom *"
                  placeholderTextColor={colors.primaryColor}
                />
              </CardView>
            </View>
        </ScrollView>
      </View>
    );
  }
}
Check this out

Upvotes: 0

JaRoMaster
JaRoMaster

Reputation: 179

I fixed it by using contentContainerStyle instead of style for the padding on the ScrollView parent.

Upvotes: 1

Abe
Abe

Reputation: 5508

On Android, the shadow is constrained to the size of the parent view. Make sure the direct parent of the element is large enough to hold the complete shadow. This related question has more about the Android shadow behavior: Elevation shadow is clipped

Upvotes: 1

Related Questions