Skip to content

Commit

Permalink
changed to image carousel
Browse files Browse the repository at this point in the history
  • Loading branch information
@MONKE-source
MONKE-source committed Apr 28, 2024
1 parent 1b2e39b commit 095bac0
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 129 deletions.
190 changes: 61 additions & 129 deletions Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,53 @@ import Svg, {Circle, Path, Line, G} from 'react-native-svg';
import LinearGradient from 'react-native-linear-gradient';
import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
import { Dimensions } from 'react-native';
import AnimatedGallery from "@akumzy/react-native-animated-gallery"
import Carousel from 'react-native-reanimated-carousel';
import { PinchGestureHandler, State } from 'react-native-gesture-handler';





const Layout = ({navigation}) => {
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get("window").height;
const images = [
{
id: 1,
url: require("./assets/layoutPics/Level1.png")
},
{
id: 2,
url: require("./assets/layoutPics/Level2.png")
},
{
id: 3,
url: require("./assets/layoutPics/Level3.png")
},
{
id: 4,
url: require("./assets/layoutPics/Level4.png")
},
{
id: 5,
url: require("./assets/layoutPics/Level5.png")
},
];

const carouselItems = images.map((image) => ({
id: image.id,
image: image.url,
}));


return (
<View style={styles.container}>
<ImageBackground
source={require('./assets/background.png')}
style={styles.imageBackground}
resizeMode="cover">
<SafeAreaView style={{flex: 1}}>
<ScrollView>
<View style={{marginTop: '5%'}} />
<View>
<View style={styles.topSidebar}>
Expand All @@ -51,135 +85,33 @@ const Layout = ({navigation}) => {
</TouchableOpacity>
</View>
</View>
<View style={{
alignItems: 'center',
justifyContent: 'center',
marginTop: 40,}}>
<View style={{ height: windowHeight * 0.4, marginTop:'10%'}}
>
<ReactNativeZoomableView
style={{
flexShrink: 0,
borderRadius: 20,
backgroundColor: '#D9D9D9',
alignItems: 'center',
justifyContent: 'center',
height: windowHeight * 0.4,
width: windowWidth * 0.9}}
maxZoom={2.5}
minZoom={1}
zoomStep={0.5}
initialZoom={1}
panEnabled={true}
centerOn={{ zoom: 1, x: 0, y: 0 }}
>
<Image
source={require('./assets/layoutPics/Level1.png')}
resizeMode='contain'
style={{width:windowWidth * 0.9, height: windowHeight *0.4}}
/>
</ReactNativeZoomableView>
</View>
<View style={{ height: windowHeight * 0.4, marginTop:'10%'}}
>
<ReactNativeZoomableView
style={{
flexShrink: 0,
borderRadius: 20,
backgroundColor: '#D9D9D9',
alignItems: 'center',
justifyContent: 'center',
height: windowHeight * 0.4,
width: windowWidth * 0.9}}
maxZoom={2.5}
minZoom={1}
zoomStep={0.5}
initialZoom={1}
panEnabled={true}
centerOn={{ zoom: 1, x: 0, y: 0 }}
>
<Image
source={require('./assets/layoutPics/Level1.png')}
resizeMode='contain'
style={{width:windowWidth * 0.9, height: windowHeight *0.4}}
/>
</ReactNativeZoomableView>
</View>
<View style={{ height: windowHeight * 0.4, marginTop:'10%'}}
>
<ReactNativeZoomableView
style={{
flexShrink: 0,
borderRadius: 20,
backgroundColor: '#D9D9D9',
alignItems: 'center',
justifyContent: 'center',
height: windowHeight * 0.4,
width: windowWidth * 0.9}}
maxZoom={2.5}
minZoom={1}
zoomStep={0.5}
initialZoom={1}
panEnabled={true}
centerOn={{ zoom: 1, x: 0, y: 0 }}
>
<Image
source={require('./assets/layoutPics/Level1.png')}
resizeMode='contain'
style={{width:windowWidth * 0.9, height: windowHeight *0.4}}
/>
</ReactNativeZoomableView>
</View>
<View style={{ height: windowHeight * 0.4, marginTop:'10%'}}
>
<ReactNativeZoomableView
style={{
flexShrink: 0,
borderRadius: 20,
backgroundColor: '#D9D9D9',
alignItems: 'center',
justifyContent: 'center',
height: windowHeight * 0.4,
width: windowWidth * 0.9}}
maxZoom={2.5}
minZoom={1}
zoomStep={0.5}
initialZoom={1}
panEnabled={true}
centerOn={{ zoom: 1, x: 0, y: 0 }}
>
<Image
source={require('./assets/layoutPics/Level1.png')}
resizeMode='contain'
style={{width:windowWidth * 0.9, height: windowHeight *0.4}}
/>
</ReactNativeZoomableView>
</View>
<View style={{ height: windowHeight * 0.3, marginTop:'10%'}}
>
<ReactNativeZoomableView
style={{
flexShrink: 0,
alignItems: 'center',
justifyContent: 'center',
height: windowHeight * 0.4,
width: windowWidth * 0.9}}
maxZoom={2.5}
minZoom={1}
zoomStep={0.5}
initialZoom={1}
panEnabled={true}
centerOn={{ zoom: 1, x: 0, y: 0 }}
>
<Image
source={require('./assets/layoutPics/Level5.png')}
resizeMode='contain'
style={{width:windowWidth * 0.9, height: windowHeight *0.4}}
/>
</ReactNativeZoomableView>
</View>
<View style={{ flex: 1, marginTop:'35%' }}>

<Carousel
loop
width={windowWidth}
height={windowWidth / 2}
autoPlay={false}
data={carouselItems}
scrollAnimationDuration={1000}
onSnapToItem={(index) => console.log('current index:', index)}

renderItem={({ item }) => (
<View
style={{
flex: 1,
justifyContent: 'center',
}}
>
<Image
source={item.image}
style={{ width: '100%', height: '100%' }}
resizeMode="contain"
/>
</View>
)}
/>
</View>
</ScrollView>
</SafeAreaView>
</ImageBackground>
</View>
Expand Down
21 changes: 21 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"test": "jest"
},
"dependencies": {
"@akumzy/react-native-animated-gallery": "^1.2.1",
"@notifee/react-native": "^7.8.2",
"@openspacelabs/react-native-zoomable-view": "^2.1.6",
"@react-native-async-storage/async-storage": "^1.22.3",
Expand All @@ -34,6 +35,7 @@
"react-native-permissions": "^4.1.4",
"react-native-qrcode-scanner": "^1.5.5",
"react-native-reanimated": "^3.8.1",
"react-native-reanimated-carousel": "^3.5.1",
"react-native-responsive-fontsize": "^0.5.1",
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.29.0",
Expand Down

0 comments on commit 095bac0

Please sign in to comment.