How to set elevation to React Native's Modal

241 Views Asked by At

I need to set elevation to React Native's Modal Component. However, elevation must be applied to View (Not Modal).

So, I tried below code, but not works.

How to add shadow to Modal in Android?

import React from 'react';
import {
  Modal,
  SafeAreaView,
  StyleSheet,
  View
} from 'react-native';

export const HelpModal = (props: any) => {
  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={props.visible}>
      <SafeAreaView style={styles.safeAreaView}>
        <View style={{height: 200, width: 200, backgroundColor: 'red', shadowColor: 'green', elevation: 5}} />
      </SafeAreaView>
    </Modal>
  );
};

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    alignItems: 'center',
  },
});
1

There are 1 best solutions below

0
kabakaba On

react-native-shadow-2 works fine for me. This libarry uses svg instead of elevation.