How can I avoid having duplicate keys or nested ternarys when setting my style? I need to change the margin for ios and certain iPhones.
import DeviceInfo from 'react-native-device-info';
const devices = ['iPhone 12', 'iPhone 12 Pro', 'iPhone 12 Pro Max'];
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingHorizontal: 20,
paddingTop: 10,
marginBottom: Platform.OS === "ios" ? 10 : 0;,
marginBottom: devices.includes(DeviceInfo.getModel()) ? 30 : 0
},
>Solution :
How about this.
marginBottom: (Platform.OS === "ios" && 10) || (devices.includes(DeviceInfo.getModel() && 30 ) || 0;
It may not perfectly fit what you want, but with a little modification it should be possible.