├── assets ├── red.jpg ├── blue.jpg ├── cathy.jpg ├── face.jpg ├── green.jpg ├── icon.png ├── james.jpg ├── paul.jpg ├── splash.png └── yellow.jpg ├── babel.config.js ├── .expo-shared └── assets.json ├── .gitignore ├── README.md ├── app.json ├── package.json └── App.js /assets/red.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/red.jpg -------------------------------------------------------------------------------- /assets/blue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/blue.jpg -------------------------------------------------------------------------------- /assets/cathy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/cathy.jpg -------------------------------------------------------------------------------- /assets/face.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/face.jpg -------------------------------------------------------------------------------- /assets/green.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/green.jpg -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/james.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/james.jpg -------------------------------------------------------------------------------- /assets/paul.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/paul.jpg -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/splash.png -------------------------------------------------------------------------------- /assets/yellow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkhan13/artsy/HEAD/assets/yellow.jpg -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true, 3 | "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true 4 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | web-report/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # artsy 2 | 3 | 1.Please click clone or download button 4 | 5 | 2.Once you have the project cd into the project root folder 6 | 7 | 3. Then npm install to install dependencies 8 | 9 | 4. Once done write expo start on your terminal on your root folder to start the app 10 | 11 | 5. That's it ! 12 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "artsy", 4 | "slug": "artsy", 5 | "privacy": "public", 6 | "sdkVersion": "36.0.0", 7 | "platforms": [ 8 | "ios", 9 | "android", 10 | "web" 11 | ], 12 | "version": "1.0.0", 13 | "orientation": "portrait", 14 | "icon": "./assets/icon.png", 15 | "splash": { 16 | "image": "./assets/splash.png", 17 | "resizeMode": "contain", 18 | "backgroundColor": "#ffffff" 19 | }, 20 | "updates": { 21 | "fallbackToCacheTimeout": 0 22 | }, 23 | "assetBundlePatterns": [ 24 | "**/*" 25 | ], 26 | "ios": { 27 | "supportsTablet": true 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "expo": "~36.0.0", 12 | "expo-linear-gradient": "^8.1.0", 13 | "react": "~16.9.0", 14 | "react-dom": "~16.9.0", 15 | "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", 16 | "react-native-snap-carousel": "^3.8.4", 17 | "react-native-web": "~0.11.7" 18 | }, 19 | "devDependencies": { 20 | "babel-preset-expo": "~8.0.0", 21 | "@babel/core": "^7.0.0" 22 | }, 23 | "private": true 24 | } 25 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet,SafeAreaView,ScrollView,StatusBar,Image,ImageBackground 6 | } from "react-native"; 7 | 8 | import Caraousel from 'react-native-snap-carousel' 9 | 10 | import face from './assets/face.jpg' 11 | 12 | import yellow from "./assets/yellow.jpg"; 13 | import blue from "./assets/blue.jpg"; 14 | import red from "./assets/red.jpg"; 15 | import green from "./assets/green.jpg"; 16 | 17 | import james from "./assets/james.jpg"; 18 | import cathy from "./assets/cathy.jpg"; 19 | import paul from "./assets/paul.jpg"; 20 | 21 | class App extends Component { 22 | state={ 23 | categories:[ 24 | { 25 | id:1, 26 | name:"cari cature" 27 | }, 28 | { 29 | id:2, 30 | name:"sketch" 31 | }, 32 | { 33 | id:3, 34 | name:"painting" 35 | }, 36 | { 37 | id:4, 38 | name:"color" 39 | }, 40 | ], 41 | cards: [ 42 | { 43 | image: yellow, 44 | id: 1, 45 | title: "walking like a king down the hallways" 46 | }, 47 | { 48 | image: blue, 49 | id: 2, 50 | title: "blue oil paint" 51 | }, 52 | { 53 | image: green, 54 | id: 3, 55 | title: "green artist paint" 56 | }, 57 | { 58 | image: red, 59 | id: 4, 60 | title: "red blood" 61 | } 62 | ], 63 | 64 | artists: [ 65 | { 66 | image: james, 67 | id: 1, 68 | skills: "Blend, Sketch, PS", 69 | name: "JAMES" 70 | }, 71 | { 72 | image: cathy, 73 | id: 2, 74 | skills: "Brush", 75 | name: "CATHY" 76 | }, 77 | { 78 | image: paul, 79 | id: 3, 80 | skills: "Illustrator artist", 81 | name: "PAUL" 82 | } 83 | ] 84 | } 85 | 86 | _renderItem({item,index}){ 87 | return( 88 | 89 | 90 | 91 | 92 | 93 | ) 94 | } 95 | 96 | render() { 97 | 98 | return ( 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | ARTSY 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | { 117 | this.state.categories.map(category=>( 118 | 119 | {category.name} 120 | 121 | )) 122 | } 123 | 124 | 125 | 126 | 127 | 128 | 129 | {this._carousel=c}} 131 | renderItem={this._renderItem} 132 | sliderWidth={350} 133 | itemWidth={350} 134 | layout={"stack"} 135 | data={this.state.cards} 136 | /> 137 | 138 | 139 | 140 | 141 | 148 | {this.state.artists.map(artist => ( 149 | 150 | 160 | 161 | 162 | 172 | 179 | 180 | {artist.name} 181 | 182 | 183 | {artist.skills} 184 | 185 | 186 | 187 | 188 | 189 | 199 | 206 | Check 207 | 208 | 209 | 210 | 211 | 212 | ))} 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | ); 221 | } 222 | } 223 | export default App; 224 | 225 | const styles = StyleSheet.create({ 226 | container: { 227 | flex: 1, 228 | alignItems: 'center', 229 | justifyContent: 'center' 230 | }, 231 | categoryBox:{ 232 | height:28, 233 | width:89, 234 | borderWidth:0.7, 235 | borderColor:"#2c2c2e", 236 | borderRadius:10, 237 | alignItems:'center', 238 | justifyContent:'center', 239 | marginRight:10 240 | 241 | 242 | }, 243 | image:{ 244 | width:292, 245 | height:411, 246 | borderRadius:15 247 | } 248 | }); --------------------------------------------------------------------------------