I am not getting any errors thrown at me so I believe it is acknowledging the image location. However I can't see them, it's been giving me a warm time. I am just trying to load the first five images at the moment
Here Is my JSON File that my cards are getting there information from:
'''code
const TrailData = [
[
{
id: 1,
name: "Brockenhurst and the Tall Trees Trail Circular",
location : "New Forest National Park",
difficulty: "Moderate",
length: 9.60,
estimated: "3h 36m",
distanceAway: 3.50,
latitude: 50.8225,
longitude: -1.5714,
imgUrl: require("./app/assets/Lyndhurst Hill and Swan Green Circular.jpeg")
},
{
"id": 2,
"name": "Lyndhurst Hill and Swan Green Circular",
"location" : "New Forest National Park",
"difficulty": "Moderate",
"length": 6.40,
"estimated": "2h 37m",
"distanceAway": 3.20,
"latitude": 50.8779,
"longitude": -1.5762,
"imgUrl":require("./app/assets/Lyndhurst Hill and Swan Green Circular.jpeg")
},
{
"id": 3,
"name": "Brockenhurst Village Walk",
"location" : "New Forest National Park",
"difficulty": "Moderate",
"length": 5.10,
"estimated": "2h 37m",
"distanceAway": 3.7,
"latitude": 50.8190,
"longitude": -1.5737,
"imgUrl": require("./app/assets/Lyndhurst Hill and Swan Green Circular.jpeg")
},
{
"id": 4,
"name": "Durdle Door",
"location" : "Dorset Area of Outstanding Natrual Beauty",
"difficulty": "Moderate",
"length": 2.60,
"estimated": "2h 37m",
"distanceAway": 5,
"latitude": 50.6210,
"longitude": -2.2723,
"imgUrl": require("./app/assets/Lyndhurst Hill and Swan Green Circular.jpeg")
},
{
"id": 5,
"name": "Tall Tress Trail Circular",
"location" : "New Forest National Park",
"difficulty": "Easy",
"length": 2.00,
"estimated": "2h 37m",
"distanceAway": 3.50,
"latitude": 50.8226,
"longitude": -1.5731,
"imgUrl": require("./app/assets/Lyndhurst Hill and Swan Green Circular.jpeg")
},
{
"id": 6,
"name": "Hengistbury Head Coastal Walk",
"location" : "Bournemouth",
"difficulty": "Easy",
"length": 4.50,
"estimated": "1h 30m",
"distanceAway": 2.50,
"latitude": 50.7200,
"longitude": -1.7469
},
{
"id": 7,
"name": "Studland Beach and Nature Reserve",
"location" : "Bournemouth",
"difficulty": "Easy",
"length": 7.80,
"estimated": "2h 12m",
"distanceAway": 6.10,
"latitude": 50.6482,
"longitude": -1.9567
},
{
"id": 8,
"name": "Avon Heath Country Park",
"location" : "Bournemouth",
"difficulty": "Easy",
"length": 3.20,
"estimated": "1h 15m",
"distanceAway": 8.30,
"latitude": 50.8141,
"longitude": -1.9133
},
{
"id": 9,
"name": "Christchurch Harbour and Mudeford Quay",
"location" : "Bournemouth",
"difficulty": "Easy",
"length": 5.00,
"estimated": "1h 45m",
"distanceAway": 5.80,
"latitude": 50.7335,
"longitude": -1.7579
},
{
"id": 10,
"name": "Turk's Lane Nature Reserve",
"location" : "Bournemouth",
"difficulty": "Easy",
"length": 2.70,
"estimated": "1h 10m",
"distanceAway": 7.20,
"latitude": 50.7697,
"longitude": -1.8735
}
],
[
{
"id": 11,
"name": "The Lepe Loop",
"location" : "Bournemouth",
"difficulty": "Moderate",
"length": 6.20,
"estimated": "2h 15m",
"distanceAway": 11.30,
"latitude": 50.7924,
"longitude": -1.3137
},
{
"id": 12,
"name": "Keyhaven Nature Reserve",
"location" : "Bournemouth",
"difficulty": "Easy",
"length": 3.50,
"estimated": "1h 20m",
"distanceAway": 13.50,
"latitude": 50.7214,
"longitude": -1.5643
},
{
"id": 13,
"name": "Highcliffe Castle to Mudeford Quay",
"location" : "Bournemouth",
"difficulty": "Moderate",
"length": 8.00,
"estimated": "2h 30m",
"distanceAway": 8.00,
"latitude": 50.7358,
"longitude": -1.7325
},
{
"id": 14,
"name": "Bournemouth Seafront Promenade",
"location" : "Bournemouth",
"difficulty": "Easy",
"length": 2.60,
"estimated": "1h 00m",
"distanceAway": 0.50,
"latitude": 50.7193,
"longitude": -1.8755
},
{
"id": 15,
"name": "Mudeford to Highcliffe",
"location" : "Bournemouth",
"difficulty": "Easy",
"length": 4.00,
"estimated": "1h 15m",
"distanceAway": 4.00,
"latitude": 50.7439,
"longitude": -1.7409
}
]
]
export default TrailData;'''
This is where I am creating my cards and populating the information
import React, { useState, useEffect, useRef } from 'react';
import { View, Text, StyleSheet, Dimensions,Image } from 'react-native';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import colours from '../../colours';
//import TrailData from '../../TrailData.json';
import TrailData from '../../TrailData';
export const SLIDER_WIDTH = Dimensions.get('window').width + 30
export const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.7)
export const ITEM_HEIGHT = 200
//Remember to reference the package I installed to create this carousel
const MainCarousel = (props) => {
const [activeSlide, setActiveSlide] = useState(0);
const carouselRef = useRef(null);
const renderCard = ({item}) => (
<View style={styles.card}>
<Image
source={item.imgUrl}
style={styles.image}
/>
<Text style={styles.title}>{item.name}</Text>
<View>
<Text>{item.location}</Text>
<Text>Difficulty: {item.difficulty}</Text>
<Text>Est: {item.estimated}</Text>
<Text> {props.milesOrkm ? `${item.length} mi long` : `${(item.length * 1.60934).toFixed(2)} km long`} </Text>
<Text>{props.milesOrkm ? `${item.distanceAway} mi away` : `${(item.distanceAway * 1.60934).toFixed(2)} km away`}</Text>
</View>
</View>
);
/*
useEffect (() =>{
const interval = setInterval (() => {
setActiveSlide((prev) => (prev + 1) % props.TrailData.length);
},5000);
return () => clearInterval(interval);
}, []);
*/
useEffect(() => {
carouselRef.current.startAutoplay();
}, []);
return (
<View style={styles.container}>
<Carousel
data={props.TrailData}
renderItem={renderCard}
sliderWidth={SLIDER_WIDTH}
itemWidth={ITEM_WIDTH}
itemHeight={ITEM_HEIGHT}
sliderHeight={ITEM_HEIGHT}
onSnapToItem={(index) => setActiveSlide (index)}
activeSlideAlignment="start"
firstItem={activeSlide}
autoplay={true}
enableMomentum={false}
lockScrollWhileSnapping={true}
autoplayDelay={1000}
autoplayInterval={3000}
ref={carouselRef}
/>
<Pagination
dotsLength={props.TrailData.length}
activeDotIndex={activeSlide}
containerStyle={{marginTop: -30}}// If I feel like changes this later I will
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: colours.black
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
paddingLeft: '2%',
justifyContent: 'flex-start',
alignItems: 'center',
},
card: {
flex: 1,
backgroundColor: '#F9F9F9',
padding: 10,
borderRadius: 5,
width: ITEM_WIDTH,
paddingBottom: 40,
alignItems: 'flex-start',
// Adjust this value as needed
overflow: 'hidden', // This will hide any overflowing content
},
image: {
alignItems: 'center',
width: ITEM_WIDTH,
height: 200,
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 5
},
cardText : {
textAlign: 'left'
}
})
export default MainCarousel;Finally this where they are being rendered I apologise for the large blocks I just didn't want it to look like I missed any imports
import{View, Text, StyleSheet} from 'react-native';
import React, {useState} from 'react';
import { useNavigation } from '@react-navigation/native';
import SearchBar from '../../components/SearchBar';
import MainCarousel from '../../components/MainCarousel';
import SubCarousel from '../../components/SubCarousels';
import colours from '../../../colours';
import MetricSwitch from '../../components/MetricSwitch';
import TrailData from '../../../TrailData';
import { ScrollView, GestureHandlerRootView } from 'react-native-gesture-handler';
const Explore = () => {
const topCarousel = TrailData[0].slice(0, 5);
const youMightLike = TrailData[0].slice(5,11);
const bikeTrails = TrailData[1].slice(0,5);
const [displayInMiles, setDisplayInMiles] = useState(false);
const toggleUnit = () => {
setDisplayInMiles(prev => !prev)
}
const navigation = useNavigation()
return (
<GestureHandlerRootView style={styles.container} >
<View style={styles.container}>
<ScrollView>
<Text style={styles.screenHeaders}>Hi User..</Text>
<View style={styles.topElementsContainer}>
<SearchBar/>
<View style={styles.MetricSwitch}>
<MetricSwitch toggleUnit={toggleUnit}/>
</View>
</View>
<View style={styles.topPageCarousel}>
<MainCarousel
milesOrkm={displayInMiles}
TrailData={topCarousel}
/>
</View>
<Text style={styles.screenHeaders}>You might Like..</Text>
<View style={styles.subCarousels}>
<SubCarousel
milesOrkm={displayInMiles}
TrailData={youMightLike}
/>
</View>
<Text style={styles.screenHeaders}>For Cyclist..</Text>
<View style={styles.subCarousels}>
<SubCarousel
milesOrkm={displayInMiles}
TrailData={bikeTrails}
/>
</View>
</ScrollView>
</View>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:colours.offWhite,
},
topElementsContainer : {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start'
},
topPageCarousel : {
//flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
},
subCarousels : {
//flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
},
screenHeaders: {
fontWeight: 'bold',
fontSize: 30,
flexDirection: 'column'
},
MetricSwitch: {
paddingTop: '3%'
}
});
export default Explore;[![Just in case the way my project is setup is important][1]][1] [1]: https://i.stack.imgur.com/ejjoR.png
I would really appreciate the help.