Custom component error in preview

Get Help
1 
import React, { useState } from 'react'
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native'

const LiftAvailableTimePicker = (props) => {
	const { liftName } = props;

	const days = [
		{ label: 'Monday', value: 'mon' },
		{ label: 'Tuesday', value: 'tue' },
		{ label: 'Wednesday', value: 'wed' },
		{ label: 'Thursday', value: 'thu' },
		{ label: 'Friday', value: 'fri' },
		{ label: 'Saturday', value: 'sat' },
		{ label: 'Sunday', value: 'sun' },
	]

	const [activeDay, setActiveDay] = useState("mon");

	return (
		<View style={styles.wrapper}>
			<Text style={styles.title}>Project Delivery booking builder</Text>
			<Text style={styles.subTitle}>{`Which Days of the Week are bookings available for (${liftName})`}</Text>
			<View style={styles.daysWrapper}>
				{
					days.map((day, idx) => (
						<View style={styles.buttonWrapper}>
							<TouchableOpacity
								key={idx}
								style={{
									border: '1px solid #214CB5',
									borderRadius: 4,
									backgroundColor: activeDay === day.value ? '#214CB5' : '#fff',
									padding: "4px",
								}}
								onPress={() => setActiveDay(day.value)}
							>
								<Text style={{ color: activeDay === day.value ? '#fff' : '#214CB5', textAlign: "center", textTransform: "uppercase" }}>{day.label}</Text>
							</TouchableOpacity>
						</View>
					))
				}
			</View>
		</View>
	)
}

const styles = StyleSheet.create({
	wrapper: {
		alignItems: "start",
	},
	title: {
		color: "#214CB5",
		fontSize: 16,
		fontWeight: 700,
		textAlign: "start",
		marginBottom: 8,
	},
	subTitle: {
		color: "#214CB5",
		fontSize: 14,
		fontWeight: 700,
		textAlign: "start",
		marginBottom: 8,
	},
	button: {
		borderRadius: 4,
		backgroundColor: "red",
	},
	buttonText: {
		color: "#fff",
		alignItems: "center",
	},
	buttonWrapper: {
		width: `${100 / 3}%`,
		padding: 4,
	},
	daysWrapper: {
		flexDirection: "row",
		alignItems: "center",
		flexWrap: "wrap",
	}
})

export default LiftAvailableTimePicker

In the Adalo builder, it’s okay but in preview I am getting error

Script error.
at handleError (webpack://protonRuntime.lift-available-time-picker/./node_modules/webpack-dev-server/client/overlay.js?:627:58)
at eval (webpack://protonRuntime.lift-available-time-picker/./node_modules/webpack-dev-server/client/overlay.js?:646:7)
at r (https://previewer-assets.adalo.com/static/js/main.b84709d9.js:2:627709)

And onPress doesn’t work, too.

What’s the reason?

2

Please check your styles, those styles are not compatible with react native

3

Can you please point me which part is wrong exactly?

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.