I'm working on a React Native app where I need to conditionally display a "/hr" suffix to a payable amount based on whether an hourly rate is applied. The booking details are passed into my component via props, and I expect to display the suffix if booking.rate_per_hour is greater than 0. However, even though logging confirms that booking.rate_per_hour is greater than 0, the "/hr" text never shows up when using the conditional. But it works if I remove conditional check.
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Bold,
}}
>
{settings.symbol}{" "}
{payDetails.payableAmount
? parseFloat(payDetails.payableAmount).toFixed(
settings.decimal
)
: 0.0} {/* --- Added this conditional check (line to append "/hr") --- */}
{booking.rate_per_hour > 0 ? "/hr" : ""}
</Text>
) : (
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Bold,
}}
>
{payDetails.payableAmount
? parseFloat(payDetails.payableAmount).toFixed(
settings.decimal
)
: 0.0}{" "}
{settings.symbol} {/* --- Same conditional check here --- */}
{booking.rate_per_hour > 0 ? "/hr" : ""}
</Text>
Full Code
import {
StyleSheet,
View,
Dimensions,
Text,
TouchableOpacity,
ScrollView,
Modal,
Alert,
ActivityIndicator,
Platform
} from 'react-native';
import { Header } from 'react-native-elements';
import { colors } from '../common/theme';
var { width, height } = Dimensions.get('window');
import { PromoComp } from "../components";
import i18n from 'i18n-js';
import { useSelector,useDispatch } from 'react-redux';
import { api } from 'common';
import { MAIN_COLOR, appConsts } from '../common/sharedFunctions';
import { CommonActions } from '@react-navigation/native';
import { MaterialIcons } from '@expo/vector-icons';
import { fonts } from '../common/font';
const hasNotch = Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS && ((height === 780 || width === 780) || (height === 812 || width === 812) || (height === 844 || width === 844) || (height === 852 || width === 852) || (height === 896 || width === 896) || (height === 926 || width === 926) || (height === 932 || width === 932))
export default function PaymentDetails(props) {
const {
updateBooking,
cancelBooking,
editPromo,
} = api;
const dispatch = useDispatch();
const auth = useSelector(state => state.auth);
const settings = useSelector(state => state.settingsdata.settings);
const providers = useSelector(state => state.paymentmethods.providers);
const { booking } = props.route.params;
const [promodalVisible, setPromodalVisible] = useState(false);
const { t } = i18n;
const isRTL = i18n.locale.indexOf('he') === 0 || i18n.locale.indexOf('ar') === 0;
const [profile,setProfile] = useState();
const [isLoading,setIsLoading] = useState();
useEffect(() => {
if (auth.profile && auth.profile.uid) {
setProfile(auth.profile);
} else {
setProfile(null);
}
}, [auth.profile]);
const [payDetails, setPayDetails] = useState({
amount: booking.trip_cost, // Always show normal trip cost in 'amount'
discount: booking.discount ? booking.discount : 0,
usedWalletMoney: booking.payment_mode === 'wallet' ? booking.trip_cost : 0,
promo_applied: booking.promo_applied ? booking.promo_applied : false,
promo_details: booking.promo_details ? booking.promo_details : null,
// Apply if-logic for payableAmount (Show per-hour rate if per KM rate is 0)
payableAmount: (booking.rate_per_unit_distance === 0 && booking.rate_per_hour > 0)
? booking.rate_per_hour // If per KM rate is 0, use hourly rate
: (booking.payableAmount ? booking.payableAmount : booking.trip_cost) // Otherwise, use calculated amount
// Show note only if rate per KM is applied
,note: (booking.rate_per_unit_distance > 0)
? "Note: The fare estimates are calculated automatically by our system. If you have unusual items such as heavy units, extraordinary packages, or special handling requirements, please send an image to 0424 952 022, including your first and last name, to receive an exact estimate. (This does not apply to normal items moving; only applicable for special service rates.) "
: null // No note if hourly rate is used
});
const promoModal = () => {
return (
<Modal
animationType="none"
visible={promodalVisible}
onRequestClose={() => {
setPromodalVisible(false);
}}
>
<Header
backgroundColor={MAIN_COLOR}
centerComponent={
<Text style={styles.headerTitleStyle}>{t("your_promo")}</Text>
}
containerStyle={[
styles.headerStyle,
{ height: hasNotch ? 85 : null, backgroundColor: MAIN_COLOR },
]}
innerContainerStyles={{ marginLeft: 10, marginRight: 10 }}
/>
<PromoComp
onPressButton={(item, index) => {
selectCoupon(item, index);
}}
></PromoComp>
<TouchableOpacity
onPress={() => {
setPromodalVisible(false);
}}
style={styles.vew3}
>
<Text style={[styles.emailStyle, { color: colors.WHITE }]}>
{t("cancel")}
</Text>
</TouchableOpacity>
</Modal>
);
};
return (
<View style={styles.mainView}>
<ScrollView
showsVerticalScrollIndicator={false}
style={styles.scrollStyle}
>
<View style={{ flex: 1, flexDirection: "column" }}>
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 20,
paddingRight: 20,
marginBottom: 4,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 22,
fontFamily:fonts.Medium,
}}
>
{t("bill_details")}
</Text>
{profile &&
profile.usertype == "customer" &&
(booking.status == "PAYMENT_PENDING" ||
booking.status == "PENDING" ||
booking.status == "NEW") ? (
payDetails.promo_applied ? (
<TouchableOpacity
onPress={() => {
removePromo();
}}
>
<Text
style={{
color: "red",
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 14,
fontFamily:fonts.Medium,
}}
>
{t("remove_promo")}
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => {
openPromoModal();
}}
>
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 14,
fontFamily:fonts.Medium,
}}
>
{t("apply_promo")}
</Text>
</TouchableOpacity>
)
) : null}
</View>
{profile && profile.usertype == "driver" ? (
<View style={{ flex: 1, paddingLeft: 25, paddingRight: 25 }}>
<View
style={[
styles.location,
{ flexDirection: isRTL ? "row-reverse" : "row" },
]}
>
{booking && booking.trip_start_time ? (
<View>
<Text
style={[
styles.timeStyle,
{ textAlign: isRTL ? "right" : "left" },
]}
>
{booking.trip_start_time}
</Text>
</View>
) : null}
{booking && booking.pickup ? (
<View
style={[
styles.address,
isRTL
? { flexDirection: "row-reverse", marginRight: 6 }
: { flexDirection: "row", marginLeft: 6 },
]}
>
<View style={styles.greenDot} />
<Text
style={[
styles.adressStyle,
isRTL
? { marginRight: 6, textAlign: "right" }
: { marginLeft: 6, textAlign: "left" },
]}
>
{booking.pickup.add}
</Text>
</View>
) : null}
</View>
{booking && booking.waypoints && booking.waypoints.length > 0 ?
booking.waypoints.map((point, index) => {
return (
<View key={"key" + index} style={[styles.location, isRTL?{flexDirection:'row-reverse'}:{flexDirection:'row'}, {justifyContent: 'center', alignItems:'center'}]}>
<View>
<MaterialIcons name="multiple-stop" size={32} color={colors.SECONDARY}/>
</View>
<View style={[styles.address, isRTL?{flexDirection:'row-reverse', marginRight:65}:{flexDirection:'row', marginLeft:6}]}>
<Text numberOfLines={2} style={[styles.adressStyle, isRTL?{marginRight:6, textAlign:'right'}:{marginLeft:6, textAlign:'left'}]}>{point.add}</Text>
</View>
</View>
)
})
: null}
<View
style={[
styles.location,
{ flexDirection: isRTL ? "row-reverse" : "row" },
]}
>
{booking && booking.trip_end_time ? (
<View>
<Text
style={[
styles.timeStyle,
{ textAlign: isRTL ? "right" : "left" },
]}
>
{booking.trip_end_time}
</Text>
</View>
) : null}
{booking && booking.drop ? (
<View
style={[
styles.address,
isRTL
? { flexDirection: "row-reverse", marginRight: 6 }
: { flexDirection: "row", marginLeft: 6 },
]}
>
<View style={styles.redDot} />
<Text
style={[
styles.adressStyle,
isRTL
? { marginRight: 6, textAlign: "right" }
: { marginLeft: 6, textAlign: "left" },
]}
>
{booking.drop.add}
</Text>
</View>
) : null}
</View>
</View>
) : null}
{profile && profile.usertype == "driver" ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{t("distance")}
</Text>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{(booking && booking.distance ? booking.distance : "0") +
" " +
(settings && settings.convert_to_mile ? t("mile") : t("km"))}
</Text>
</View>
) : null}
{profile && profile.usertype == "driver" ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{t("total_time")}
</Text>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{(booking && booking.total_trip_time
? parseFloat(booking.total_trip_time / 60).toFixed(1)
: "0") +
" " +
t("mins")}
</Text>
</View>
) : null}
{profile && profile.usertype == "driver" ? (
<View
style={{
borderWidth: 0.5,
borderRadius: 1,
marginBottom: 20,
}}
></View>
) : null}
{profile ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{profile.usertype == "customer"
? t("your_fare")
: t("total_fare")}
</Text>
{settings.swipe_symbol === false ? (
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{settings.symbol}{" "}
{parseFloat(payDetails.amount).toFixed(settings.decimal)}
</Text>
) : (
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{parseFloat(payDetails.amount).toFixed(settings.decimal)}{" "}
{settings.symbol}
</Text>
)}
</View>
) : null}
{profile ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{t("promo_discount")}
</Text>
{settings.swipe_symbol === false ? (
<Text
style={{
color: colors.DULL_RED,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{isRTL ? null : "-"} {settings.symbol}{" "}
{payDetails
? payDetails.discount
? parseFloat(payDetails.discount).toFixed(
settings.decimal
)
: "0.00"
: "0.00"}{" "}
{isRTL ? "-" : null}
</Text>
) : (
<Text
style={{
color: colors.DULL_RED,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{isRTL ? null : "-"}{" "}
{payDetails
? payDetails.discount
? parseFloat(payDetails.discount).toFixed(
settings.decimal
)
: "0.00"
: "0.00"}{" "}
{settings.symbol} {isRTL ? "-" : null}
</Text>
)}
</View>
) : null}
{profile ? (
<View
style={{
borderWidth: 0.5,
borderRadius: 1,
}}
></View>
) : null}
{profile ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Medium,
}}
>
{t("payable_ammount")}
</Text>
{settings.swipe_symbol === false ? (
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Bold,
}}
>
{settings.symbol}{" "}
{payDetails.payableAmount
? parseFloat(payDetails.payableAmount).toFixed(
settings.decimal
)
: 0.0} {/* --- Add this conditional check (line to append "/hr") --- */}
{booking.rate_per_hour > 0 ? "/hr" : ""}
</Text>
) : (
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Bold,
}}
>
{payDetails.payableAmount
? parseFloat(payDetails.payableAmount).toFixed(
settings.decimal
)
: 0.0}{" "}
{settings.symbol} {/* --- Same conditional check here if swipe_symbol is true --- */}
{booking.rate_per_hour > 0 ? "/hr" : ""}
</Text>
)}
</View>
) : null}
</View>
});```
I'm working on a React Native app where I need to conditionally display a "/hr" suffix to a payable amount based on whether an hourly rate is applied. The booking details are passed into my component via props, and I expect to display the suffix if booking.rate_per_hour is greater than 0. However, even though logging confirms that booking.rate_per_hour is greater than 0, the "/hr" text never shows up when using the conditional. But it works if I remove conditional check.
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Bold,
}}
>
{settings.symbol}{" "}
{payDetails.payableAmount
? parseFloat(payDetails.payableAmount).toFixed(
settings.decimal
)
: 0.0} {/* --- Added this conditional check (line to append "/hr") --- */}
{booking.rate_per_hour > 0 ? "/hr" : ""}
</Text>
) : (
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Bold,
}}
>
{payDetails.payableAmount
? parseFloat(payDetails.payableAmount).toFixed(
settings.decimal
)
: 0.0}{" "}
{settings.symbol} {/* --- Same conditional check here --- */}
{booking.rate_per_hour > 0 ? "/hr" : ""}
</Text>
Full Code
import {
StyleSheet,
View,
Dimensions,
Text,
TouchableOpacity,
ScrollView,
Modal,
Alert,
ActivityIndicator,
Platform
} from 'react-native';
import { Header } from 'react-native-elements';
import { colors } from '../common/theme';
var { width, height } = Dimensions.get('window');
import { PromoComp } from "../components";
import i18n from 'i18n-js';
import { useSelector,useDispatch } from 'react-redux';
import { api } from 'common';
import { MAIN_COLOR, appConsts } from '../common/sharedFunctions';
import { CommonActions } from '@react-navigation/native';
import { MaterialIcons } from '@expo/vector-icons';
import { fonts } from '../common/font';
const hasNotch = Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS && ((height === 780 || width === 780) || (height === 812 || width === 812) || (height === 844 || width === 844) || (height === 852 || width === 852) || (height === 896 || width === 896) || (height === 926 || width === 926) || (height === 932 || width === 932))
export default function PaymentDetails(props) {
const {
updateBooking,
cancelBooking,
editPromo,
} = api;
const dispatch = useDispatch();
const auth = useSelector(state => state.auth);
const settings = useSelector(state => state.settingsdata.settings);
const providers = useSelector(state => state.paymentmethods.providers);
const { booking } = props.route.params;
const [promodalVisible, setPromodalVisible] = useState(false);
const { t } = i18n;
const isRTL = i18n.locale.indexOf('he') === 0 || i18n.locale.indexOf('ar') === 0;
const [profile,setProfile] = useState();
const [isLoading,setIsLoading] = useState();
useEffect(() => {
if (auth.profile && auth.profile.uid) {
setProfile(auth.profile);
} else {
setProfile(null);
}
}, [auth.profile]);
const [payDetails, setPayDetails] = useState({
amount: booking.trip_cost, // Always show normal trip cost in 'amount'
discount: booking.discount ? booking.discount : 0,
usedWalletMoney: booking.payment_mode === 'wallet' ? booking.trip_cost : 0,
promo_applied: booking.promo_applied ? booking.promo_applied : false,
promo_details: booking.promo_details ? booking.promo_details : null,
// Apply if-logic for payableAmount (Show per-hour rate if per KM rate is 0)
payableAmount: (booking.rate_per_unit_distance === 0 && booking.rate_per_hour > 0)
? booking.rate_per_hour // If per KM rate is 0, use hourly rate
: (booking.payableAmount ? booking.payableAmount : booking.trip_cost) // Otherwise, use calculated amount
// Show note only if rate per KM is applied
,note: (booking.rate_per_unit_distance > 0)
? "Note: The fare estimates are calculated automatically by our system. If you have unusual items such as heavy units, extraordinary packages, or special handling requirements, please send an image to 0424 952 022, including your first and last name, to receive an exact estimate. (This does not apply to normal items moving; only applicable for special service rates.) "
: null // No note if hourly rate is used
});
const promoModal = () => {
return (
<Modal
animationType="none"
visible={promodalVisible}
onRequestClose={() => {
setPromodalVisible(false);
}}
>
<Header
backgroundColor={MAIN_COLOR}
centerComponent={
<Text style={styles.headerTitleStyle}>{t("your_promo")}</Text>
}
containerStyle={[
styles.headerStyle,
{ height: hasNotch ? 85 : null, backgroundColor: MAIN_COLOR },
]}
innerContainerStyles={{ marginLeft: 10, marginRight: 10 }}
/>
<PromoComp
onPressButton={(item, index) => {
selectCoupon(item, index);
}}
></PromoComp>
<TouchableOpacity
onPress={() => {
setPromodalVisible(false);
}}
style={styles.vew3}
>
<Text style={[styles.emailStyle, { color: colors.WHITE }]}>
{t("cancel")}
</Text>
</TouchableOpacity>
</Modal>
);
};
return (
<View style={styles.mainView}>
<ScrollView
showsVerticalScrollIndicator={false}
style={styles.scrollStyle}
>
<View style={{ flex: 1, flexDirection: "column" }}>
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 20,
paddingRight: 20,
marginBottom: 4,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 22,
fontFamily:fonts.Medium,
}}
>
{t("bill_details")}
</Text>
{profile &&
profile.usertype == "customer" &&
(booking.status == "PAYMENT_PENDING" ||
booking.status == "PENDING" ||
booking.status == "NEW") ? (
payDetails.promo_applied ? (
<TouchableOpacity
onPress={() => {
removePromo();
}}
>
<Text
style={{
color: "red",
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 14,
fontFamily:fonts.Medium,
}}
>
{t("remove_promo")}
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => {
openPromoModal();
}}
>
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 14,
fontFamily:fonts.Medium,
}}
>
{t("apply_promo")}
</Text>
</TouchableOpacity>
)
) : null}
</View>
{profile && profile.usertype == "driver" ? (
<View style={{ flex: 1, paddingLeft: 25, paddingRight: 25 }}>
<View
style={[
styles.location,
{ flexDirection: isRTL ? "row-reverse" : "row" },
]}
>
{booking && booking.trip_start_time ? (
<View>
<Text
style={[
styles.timeStyle,
{ textAlign: isRTL ? "right" : "left" },
]}
>
{booking.trip_start_time}
</Text>
</View>
) : null}
{booking && booking.pickup ? (
<View
style={[
styles.address,
isRTL
? { flexDirection: "row-reverse", marginRight: 6 }
: { flexDirection: "row", marginLeft: 6 },
]}
>
<View style={styles.greenDot} />
<Text
style={[
styles.adressStyle,
isRTL
? { marginRight: 6, textAlign: "right" }
: { marginLeft: 6, textAlign: "left" },
]}
>
{booking.pickup.add}
</Text>
</View>
) : null}
</View>
{booking && booking.waypoints && booking.waypoints.length > 0 ?
booking.waypoints.map((point, index) => {
return (
<View key={"key" + index} style={[styles.location, isRTL?{flexDirection:'row-reverse'}:{flexDirection:'row'}, {justifyContent: 'center', alignItems:'center'}]}>
<View>
<MaterialIcons name="multiple-stop" size={32} color={colors.SECONDARY}/>
</View>
<View style={[styles.address, isRTL?{flexDirection:'row-reverse', marginRight:65}:{flexDirection:'row', marginLeft:6}]}>
<Text numberOfLines={2} style={[styles.adressStyle, isRTL?{marginRight:6, textAlign:'right'}:{marginLeft:6, textAlign:'left'}]}>{point.add}</Text>
</View>
</View>
)
})
: null}
<View
style={[
styles.location,
{ flexDirection: isRTL ? "row-reverse" : "row" },
]}
>
{booking && booking.trip_end_time ? (
<View>
<Text
style={[
styles.timeStyle,
{ textAlign: isRTL ? "right" : "left" },
]}
>
{booking.trip_end_time}
</Text>
</View>
) : null}
{booking && booking.drop ? (
<View
style={[
styles.address,
isRTL
? { flexDirection: "row-reverse", marginRight: 6 }
: { flexDirection: "row", marginLeft: 6 },
]}
>
<View style={styles.redDot} />
<Text
style={[
styles.adressStyle,
isRTL
? { marginRight: 6, textAlign: "right" }
: { marginLeft: 6, textAlign: "left" },
]}
>
{booking.drop.add}
</Text>
</View>
) : null}
</View>
</View>
) : null}
{profile && profile.usertype == "driver" ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{t("distance")}
</Text>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{(booking && booking.distance ? booking.distance : "0") +
" " +
(settings && settings.convert_to_mile ? t("mile") : t("km"))}
</Text>
</View>
) : null}
{profile && profile.usertype == "driver" ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{t("total_time")}
</Text>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{(booking && booking.total_trip_time
? parseFloat(booking.total_trip_time / 60).toFixed(1)
: "0") +
" " +
t("mins")}
</Text>
</View>
) : null}
{profile && profile.usertype == "driver" ? (
<View
style={{
borderWidth: 0.5,
borderRadius: 1,
marginBottom: 20,
}}
></View>
) : null}
{profile ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{profile.usertype == "customer"
? t("your_fare")
: t("total_fare")}
</Text>
{settings.swipe_symbol === false ? (
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{settings.symbol}{" "}
{parseFloat(payDetails.amount).toFixed(settings.decimal)}
</Text>
) : (
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{parseFloat(payDetails.amount).toFixed(settings.decimal)}{" "}
{settings.symbol}
</Text>
)}
</View>
) : null}
{profile ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.BLACK,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{t("promo_discount")}
</Text>
{settings.swipe_symbol === false ? (
<Text
style={{
color: colors.DULL_RED,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{isRTL ? null : "-"} {settings.symbol}{" "}
{payDetails
? payDetails.discount
? parseFloat(payDetails.discount).toFixed(
settings.decimal
)
: "0.00"
: "0.00"}{" "}
{isRTL ? "-" : null}
</Text>
) : (
<Text
style={{
color: colors.DULL_RED,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 16,
fontFamily: fonts.Regular,
}}
>
{isRTL ? null : "-"}{" "}
{payDetails
? payDetails.discount
? parseFloat(payDetails.discount).toFixed(
settings.decimal
)
: "0.00"
: "0.00"}{" "}
{settings.symbol} {isRTL ? "-" : null}
</Text>
)}
</View>
) : null}
{profile ? (
<View
style={{
borderWidth: 0.5,
borderRadius: 1,
}}
></View>
) : null}
{profile ? (
<View
style={{
flex: 1,
flexDirection: isRTL ? "row-reverse" : "row",
justifyContent: "space-between",
paddingLeft: 25,
paddingRight: 25,
}}
>
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Medium,
}}
>
{t("payable_ammount")}
</Text>
{settings.swipe_symbol === false ? (
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Bold,
}}
>
{settings.symbol}{" "}
{payDetails.payableAmount
? parseFloat(payDetails.payableAmount).toFixed(
settings.decimal
)
: 0.0} {/* --- Add this conditional check (line to append "/hr") --- */}
{booking.rate_per_hour > 0 ? "/hr" : ""}
</Text>
) : (
<Text
style={{
color: colors.START_TRIP,
textAlign: isRTL ? "right" : "left",
lineHeight: 45,
fontSize: 24,
fontFamily: fonts.Bold,
}}
>
{payDetails.payableAmount
? parseFloat(payDetails.payableAmount).toFixed(
settings.decimal
)
: 0.0}{" "}
{settings.symbol} {/* --- Same conditional check here if swipe_symbol is true --- */}
{booking.rate_per_hour > 0 ? "/hr" : ""}
</Text>
)}
</View>
) : null}
</View>
});```
1 Answer
Reset to default 0Here if you booking.rate_per_hour is undefined or null or 0 it will not display "/hr" so firstly check if the booking.rate_per_hour get proper value or not
Additionally, see whether the component renders first and the booking receives the value; if so, it will take an undefined value, so you'll need to render that field again to get the proper output