CODEWITHSUNDEEP
androidreact-native
salam3224
salam3224

Reputation: 31

react native: view not shows in android

I have a header which contain component. This header should have shadow in android and iOS. it's work on iOS but not show anything in android.

class Toolbar extends Component {

  render() {
    return (
      <View style={[styles.toolBar, this.props.style]}>
        {this.props.children}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  toolBar: {
    zIndex: 1,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: topBarHeight,
    backgroundColor: colors.base,
    elevation: 5,
    shadowOpacity: 0.3,
    shadowRadius: 1,
    shadowOffset: {
      height: 2,
      width: 0
    }
  }
});

Upvotes: 2

Views: 1026

Answers (2)

Meysam Izadmehr
Meysam Izadmehr

Reputation: 3262

you should not use zIndex and elevation in one style, if you do the view not shown. set zIndex to zero for android.

zIndex: (Platform.OS == 'ios') ? 1 : 0

Upvotes: 0

max23_
max23_

Reputation: 6689

As stated in the documentation, Shadow Props (shadowColor, shadowOffset, shadowOpacity and shadowRadius) only work in iOS.

Upvotes: 1

Related Questions