I'm using react-swipeable-views along with MUI to create a tabs component, however no matter what I do I can't get it to actually swipe.
I followed the docs and it seems like it should.
The relevant code is below, no errors in the console, the actual tabs themselves work they just won't swipe.
const HomeTabs = () => {
const [tabIndex, setTabIndex] = useState(0);
const [countries, setCountries] = useState([]);
const [error, setError] = useState(null);
const theme = useTheme();
const extraSmall = useMediaQuery(theme.breakpoints.only('xs'));
const small = useMediaQuery(theme.breakpoints.only('sm'));
const medium = useMediaQuery(theme.breakpoints.only('md'));
const large = useMediaQuery(theme.breakpoints.only('lg'));
const extraLarge = useMediaQuery(theme.breakpoints.only('xl'));
useEffect(() => {
const controller = new AbortController();
getCountries({signal: controller.signal});
controller.abort()
}, []);
async function getCountries() {
//setLoading(true)
try {
const res = await CountriesService.getAllCountries();
// const res = await axios.get(url + '/country/getAll')
setCountries(res.data);
//setLoading(false)
} catch (err) {
setError(err.response.data);
//setLoading(false)
}
}
const handleTabChange = (event, newTabIndex) => {
setTabIndex(newTabIndex);
};
const styles = {
slide: {
padding: 1,
minHeight: 100,
width: '40vw',
overflow: 'visible',
},
slide1: {
width: "25vw", height: "15vw", backgroundColor: '#F1F0E9', borderRadius: '10px',
},
slide2: {
width: "25vw", height: "100", backgroundColor: '#F1F0E9', borderRadius: '10px'
},
slide3: {
width: "25vw", height: "100", backgroundColor: '#F1F0E9', borderRadius: '10px',
},
};
return (
<>
<Box>
{extraSmall && <Box elevation={3} marginTop={'12em'}>
<Tabs value={tabIndex} variant="fullWidth" styles={{elevation: '12', textColor: '#4F8129'}} onChange={handleTabChange}>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faGlobe }/>} label="Countries"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMapLocationDot }/>} label="Cities"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMonument }/>} label="Landmarks"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonHiking }/>}label="Outdoors"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faUtensils }/>} label="Food"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonSkiing }/>} label="Activities"/>
</Tabs>
</Box>
}
{small && <Box elevation={3} marginTop={'-2em'}>
<SwipeableViews dir={theme.direction}>
<Tabs value={tabIndex} onChange={handleTabChange} scrollButtons variant="fullWidth" style={{elevation: '12', textColor: '#4F8129'}}>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faGlobe }/>} label="Countries"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMapLocationDot }/>} label="Cities"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMonument }/>} label="Landmarks"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonHiking }/>} label="Outdoors"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faUtensils }/>} label="Food"/>
<Tab style={{width: "10px", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonSkiing }/>} label="Activities"/>
</Tabs>
</SwipeableViews>
</Box>
}
{medium && <Box maxWidth={'200em'} elevation={3}>
<Tabs value={tabIndex} onChange={handleTabChange} styles={{elevation: '12', textColor: '#4F8129'}} scrollButtons variant="scrollable">
<Tab style={{width: "12em", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faGlobe }/>} label="Countries"/>
<Tab style={{width: "12em", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMapLocationDot }/>} label="Cities"/>
<Tab style={{width: "12em", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMonument }/>} label="Landmarks"/>
<Tab style={{width: "12em", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonHiking }/>} label="Outdoors"/>
<Tab style={{width: "12em", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faUtensils }/>} label="Food"/>
<Tab style={{width: "12em", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonSkiing }/>} label="Activities"/>
</Tabs>
</Box>}
{large && <Box maxWidth={'200em'} elevation={3}>
<Tabs value={tabIndex} onChange={handleTabChange} centered styles={{elevation: '12', textColor: '#4F8129'}}>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faGlobe }/>} label="Countries"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMapLocationDot }/>} label="Cities"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMonument }/>} label="Landmarks"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonHiking }/>} label="Outdoors"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faUtensils }/>} label="Food"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonSkiing }/>} label="Activities"/>
</Tabs>
</Box>}
{extraLarge && <Box maxWidth={'1550px'} elevation={3}>
<Tabs value={tabIndex} onChange={handleTabChange} centered styles={{elevation: '12', textColor: '#4F8129'}}>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faGlobe }/>} label="Countries"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMapLocationDot }/>} label="Cities"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#F1F0E9', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faMonument }/>} label="Landmarks"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonHiking }/>} label="Outdoors"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faUtensils }/>} label="Food"/>
<Tab style={{width: "200px", height: "100px", backgroundColor: '#FCFBF3', borderRadius: '10px'}} icon={<FontAwesomeIcon icon={faPersonSkiing }/>} label="Activities"/>
</Tabs>
</Box>}
<Box sx={{ padding: 2 }}>
<SwipeableViews enableMouseEvents index={tabIndex} onChangeIndex={handleTabChange} dir={theme.direction}>
{/* {countries.length && */}
<Box index={0} >
<CountryTabsDisplay countries={countries}/>
</Box>
{/* } */}
<Box index={1}>
<CityTabsDisplay />
</Box>
<Box index={2}>
<LandmarkTabsDisplay />
</Box>
<Box index={3} >
<OutdoorTabsDisplay />
</Box>
<Box index={4} >
<FoodTabsDisplay />
</Box>
<Box index={5}>
<ActivityTabsDisplay />
</Box>
</SwipeableViews>
</Box>
</Box>
</>
)
}
Any help is greatly appreciated!
I tried changing placements of the swipeable views component, I tried changing index values and styles. I tried wrapping the actual tabs themselves but that breaks all the functionality.
