Creating a UI with box shadow in react native

You will have to use different style props for iOS and Android.

Android

It's very simple for android, just use the elevation style prop (See docs) . An example:

boxWithShadow: {
    elevation: 5
}

iOS

In iOS you have more flexibility, use the Shadow props (See docs). An example:

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 1,  
}

Summary

In summary, to get box shadow for both platforms, use both sets of style props:

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5
}

Attention: Do not use overflow: 'hidden';, in iOS all of the shadows disappear by this property.

Hey, Look it's Done Now !

const styles = StyleSheet.create({
    shadow: {  
      borderColor:'yourchoice', // if you need 
      borderWidth:1,
      overflow: 'hidden',
      shadowColor: 'yourchoice',
      shadowRadius: 10,
      shadowOpacity: 1,
    }
});

Keep in mind the shadow's props are only available for IOS.