├── .buckconfig ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .watchmanconfig ├── App.tsx ├── LICENSE ├── README.md ├── __tests__ └── App-test.tsx ├── _prettierrc.js ├── android ├── app │ ├── _BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ └── AndroidManifest.xml │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── assets │ │ └── fonts │ │ │ ├── AntDesign.ttf │ │ │ ├── Entypo.ttf │ │ │ ├── EvilIcons.ttf │ │ │ ├── Feather.ttf │ │ │ ├── FontAwesome.ttf │ │ │ ├── FontAwesome5_Brands.ttf │ │ │ ├── FontAwesome5_Regular.ttf │ │ │ ├── FontAwesome5_Solid.ttf │ │ │ ├── Fontisto.ttf │ │ │ ├── Foundation.ttf │ │ │ ├── Ionicons.ttf │ │ │ ├── MaterialCommunityIcons.ttf │ │ │ ├── MaterialIcons.ttf │ │ │ ├── Octicons.ttf │ │ │ ├── Roboto.ttf │ │ │ ├── Roboto_medium.ttf │ │ │ ├── SimpleLineIcons.ttf │ │ │ ├── Zocial.ttf │ │ │ └── rubicon-icon-font.ttf │ │ ├── java │ │ └── com │ │ │ └── instagramclone │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios ├── InstagramClone-tvOS │ └── Info.plist ├── InstagramClone-tvOSTests │ └── Info.plist ├── InstagramClone.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ ├── InstagramClone-tvOS.xcscheme │ │ └── InstagramClone.xcscheme ├── InstagramClone.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ ├── IDEWorkspaceChecks.plist │ │ └── WorkspaceSettings.xcsettings ├── InstagramClone │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Base.lproj │ │ └── LaunchScreen.xib │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ ├── Contents.json │ │ └── insta.imageset │ │ │ ├── Contents.json │ │ │ └── insta.jpeg │ ├── Info.plist │ └── main.m ├── InstagramCloneTests │ ├── Info.plist │ └── InstagramCloneTests.m ├── Podfile └── Podfile.lock ├── metro.config.js ├── package-lock.json ├── package.json ├── src ├── assets │ ├── images │ │ ├── add.png │ │ ├── camera.png │ │ ├── camera_take.jpg │ │ ├── chevron_left.png │ │ ├── close.png │ │ ├── collection.png │ │ ├── comment.png │ │ ├── direct.png │ │ ├── heart.jpg │ │ ├── heart_red.png │ │ ├── home.png │ │ ├── ic1.png │ │ ├── ic10.png │ │ ├── ic11.png │ │ ├── ic2.png │ │ ├── ic3.png │ │ ├── ic4.png │ │ ├── ic5.png │ │ ├── ic6.png │ │ ├── ic7.png │ │ ├── ic8.png │ │ ├── ic_camera_front_white.jpg │ │ ├── ic_camera_front_white.png │ │ ├── ic_camera_front_white@2x.png │ │ ├── ic_camera_front_white@3x.png │ │ ├── ic_camera_rear_white.png │ │ ├── ic_camera_rear_white@2x.png │ │ ├── ic_camera_rear_white@3x.png │ │ ├── ic_flash_auto_white.png │ │ ├── ic_flash_auto_white@2x.png │ │ ├── ic_flash_auto_white@3x.png │ │ ├── ic_flash_off_white.png │ │ ├── ic_flash_off_white@2x.png │ │ ├── ic_flash_off_white@3x.png │ │ ├── ic_flash_on_white.png │ │ ├── ic_flash_on_white@2x.png │ │ ├── ic_flash_on_white@3x.png │ │ ├── ic_photo_camera_36pt.png │ │ ├── ic_photo_camera_36pt@2x.png │ │ ├── ic_photo_camera_36pt@3x.png │ │ ├── ic_stop_36pt.png │ │ ├── ic_stop_36pt@2x.png │ │ ├── ic_stop_36pt@3x.png │ │ ├── ic_videocam_36pt.png │ │ ├── ic_videocam_36pt@2x.png │ │ ├── ic_videocam_36pt@3x.png │ │ ├── insta.jpeg │ │ ├── insta.png │ │ ├── live.png │ │ ├── logo.png │ │ ├── plus.png │ │ ├── post1.png │ │ ├── post2.png │ │ ├── post3.png │ │ ├── post4.png │ │ ├── post5.png │ │ ├── post6.png │ │ ├── post7.png │ │ ├── post8.png │ │ ├── post9.png │ │ ├── search.png │ │ ├── tv.png │ │ ├── up.png │ │ └── user.png │ └── svg │ │ ├── camera.svg │ │ ├── camera_black.svg │ │ ├── collection.svg │ │ ├── comment.svg │ │ ├── direct.svg │ │ ├── edit.svg │ │ ├── heart_red.svg │ │ ├── home.svg │ │ ├── list.svg │ │ ├── live.svg │ │ ├── location.svg │ │ ├── logo_text.svg │ │ ├── more.svg │ │ ├── picture.svg │ │ ├── play.svg │ │ ├── play_video.svg │ │ ├── plus.svg │ │ ├── share.svg │ │ └── thumb-up.svg ├── components │ ├── GalleryView │ │ ├── GalleryView.tsx │ │ └── styles.ts │ ├── StorySlide │ │ ├── SlideHearder │ │ │ └── SlideHeader.tsx │ │ ├── SlideItem │ │ │ └── SlideItem.tsx │ │ ├── SlideView │ │ │ └── SlideView.tsx │ │ └── StoriesData │ │ │ └── StoriesData.tsx │ ├── avatarInput │ │ ├── index.tsx │ │ └── styles.ts │ ├── cameraRollPicker │ │ ├── ImageItem.tsx │ │ ├── circle-check.png │ │ ├── index.tsx │ │ └── styles.ts │ ├── cameraView │ │ ├── CameraView.tsx │ │ └── styles.ts │ ├── card │ │ └── CardComponent.tsx │ ├── commentItem │ │ ├── index.tsx │ │ └── styles.ts │ ├── favoriteItem │ │ ├── index.tsx │ │ └── styles.ts │ ├── nestedCell │ │ └── index.tsx │ ├── postItems │ │ ├── PostItem │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ └── index.tsx │ ├── searchTag │ │ ├── index.tsx │ │ └── styles.ts │ ├── separator │ │ └── index.tsx │ ├── storyItems │ │ ├── index.tsx │ │ └── storyItem │ │ │ ├── index.tsx │ │ │ └── styles.ts │ └── toolbar │ │ └── index.tsx ├── containers │ └── Aux │ │ └── index.tsx ├── navigation │ ├── home.tsx │ └── navigation.tsx ├── screens │ ├── Add │ │ ├── index.tsx │ │ └── styles.ts │ ├── Comments │ │ ├── index.tsx │ │ └── styles.ts │ ├── Detail │ │ ├── index.tsx │ │ └── styles.ts │ ├── Favorite │ │ └── index.tsx │ ├── Home │ │ ├── index.tsx │ │ └── styles.ts │ ├── Intro │ │ ├── index.tsx │ │ └── styles.ts │ ├── Profile │ │ └── index.tsx │ ├── Root │ │ ├── index.tsx │ │ └── styles.ts │ └── Search │ │ ├── index.tsx │ │ └── styles.ts ├── screenshots │ ├── Demo.gif │ ├── Demo1.png │ ├── Demo2.png │ ├── Demo3.png │ ├── Demo4.png │ ├── Demo5.png │ ├── Demo6.png │ ├── Demo7.png │ └── Demo8.png └── utils │ ├── Layout.ts │ ├── datas │ ├── avatars.ts │ ├── emojis.ts │ ├── filers.ts │ ├── follows.ts │ ├── postComments.ts │ ├── postImages.ts │ ├── posts.ts │ ├── stories.ts │ └── tags.ts │ ├── methods.tsx │ └── theme.ts ├── tsconfig.json └── yarn.lock /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # Visual Studio Code 34 | # 35 | .vscode/ 36 | 37 | # node.js 38 | # 39 | node_modules/ 40 | npm-debug.log 41 | yarn-error.log 42 | 43 | # BUCK 44 | buck-out/ 45 | \.buckd/ 46 | *.keystore 47 | !debug.keystore 48 | 49 | # fastlane 50 | # 51 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 52 | # screenshots whenever they are needed. 53 | # For more information about the recommended setup visit: 54 | # https://docs.fastlane.tools/best-practices/source-control/ 55 | 56 | */fastlane/report.xml 57 | */fastlane/Preview.html 58 | */fastlane/screenshots 59 | 60 | # Bundle artifact 61 | *.jsbundle 62 | 63 | # CocoaPods 64 | /ios/Pods/ 65 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AppNavigator from "./src/navigation/navigation"; 3 | 4 | const App = () => { 5 | console.disableYellowBox = true; 6 | return ( 7 | 8 | ); 9 | }; 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pavel Foujeu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 | # InstagramClone 6 | 7 | >A clone of the Instagram app (October 2019) made with React, React-native and Typescript. 8 | 9 | ## Preview 10 | ![App-demo](./src/screenshots/Demo.gif) 11 | 12 | 13 | ## Screen (Home) 14 | ![App-demo](./src/screenshots/Demo1.png) 15 | 16 | ## Screen (Profile) 17 | ![App-demo](./src/screenshots/Demo2.png) 18 | 19 | ## Screen (Gallery) 20 | ![App-demo](./src/screenshots/Demo3.png) 21 | 22 | ## Screen (Camera) 23 | ![App-demo](./src/screenshots/Demo4.png) 24 | 25 | ## Screen (Story) 26 | ![App-demo](./src/screenshots/Demo8.png) 27 | 28 | 29 | ## Screen (Comments) 30 | ![App-demo](./src/screenshots/Demo5.png) 31 | 32 | 33 | ## Screen (Search By Tag) 34 | ![App-demo](./src/screenshots/Demo7.png) 35 | 36 | ## Screen (-#-) 37 | ![App-demo](./src/screenshots/Demo6.png) 38 | 39 | 40 | ### Dependencies 41 | 42 | - React Native (With Typescript) 43 | - Native Base 44 | - React Navigation 45 | - Others (See package.json at the root folder) 46 | 47 | ## Get Started 48 | 49 | #### 1. Clone the Repo 50 | 51 | On the command prompt run the following commands 52 | ```sh 53 | $ git clone https://github.com/Doha26/InstagramClone.git 54 | 55 | $ cd InstagramClone 56 | 57 | $ npm install 58 | 59 | $ grep -rl "s.dependency 'React/Core'" node_modules/ | xargs sed -i '' 's=React/Core=React-Core=g' // To replace React/Core with React-core for all dependencies that use it 60 | 61 | $ cd ios && pod install && cd.. 62 | 63 | $ react-native run-ios 64 | 65 | ``` 66 | 67 | ## Author 68 | 69 | * [Pavel Foujeu](mailto:foujeupavel@gmail.com) 70 | 71 | [![Twitter: Pavel_FFP](https://img.shields.io/twitter/follow/Pavel_FFP?style=social)](https://twitter.com/Pavel_FFP) 72 | [![Linkedin: pavel-foujeu-8a8992142](https://img.shields.io/badge/-Pavel%20Foujeu%20-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/pavel-foujeu-8a8992142/)](https://www.linkedin.com/in/pavel-foujeu-8a8992142/) 73 | [![GitHub Doha26](https://img.shields.io/github/followers/Doha26?label=follow&style=social)](https://github.com/Doha26) 74 | 75 | 76 | ## Done with React-native 77 | 78 | * [MetFlix ](https://github.com/Doha26/MetFlix) 79 | 80 | * [Facebook challenge ](https://github.com/Doha26/Facebook-React-native) 81 | -------------------------------------------------------------------------------- /__tests__/App-test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /_prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.instagramclone", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.instagramclone", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/debug.keystore -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/AntDesign.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/AntDesign.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/Entypo.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/Feather.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Fontisto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/Fontisto.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/Foundation.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/Ionicons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/Octicons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/Roboto.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto_medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/Roboto_medium.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/Zocial.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/rubicon-icon-font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/assets/fonts/rubicon-icon-font.ttf -------------------------------------------------------------------------------- /android/app/src/main/java/com/instagramclone/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.instagramclone; 2 | import com.facebook.react.ReactActivity; 3 | 4 | public class MainActivity extends ReactActivity { 5 | 6 | /** 7 | * Returns the name of the main component registered from JavaScript. This is used to schedule 8 | * rendering of the component. 9 | */ 10 | @Override 11 | protected String getMainComponentName() { 12 | return "InstagramClone"; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/instagramclone/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.instagramclone; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | 6 | import com.RNFetchBlob.RNFetchBlobPackage; 7 | import com.brentvatne.react.ReactVideoPackage; 8 | import com.facebook.react.PackageList; 9 | import com.facebook.react.ReactApplication; 10 | import com.cmcewen.blurview.BlurViewPackage; 11 | import com.facebook.react.shell.MainReactPackage; 12 | import com.oblador.vectoricons.VectorIconsPackage; 13 | import com.reactnativecommunity.cameraroll.CameraRollPackage; 14 | import com.reactnativecommunity.cameraroll.CameraRollPackage; 15 | //import com.lwansbrough.RCTCamera.RCTCameraPackage; 16 | import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; 17 | import com.swmansion.reanimated.ReanimatedPackage; 18 | import com.BV.LinearGradient.LinearGradientPackage; 19 | 20 | import org.reactnative.camera.RNCameraPackage; 21 | 22 | import com.horcrux.svg.SvgPackage; 23 | import com.facebook.react.ReactNativeHost; 24 | import com.facebook.react.ReactPackage; 25 | import com.facebook.soloader.SoLoader; 26 | 27 | import java.lang.reflect.InvocationTargetException; 28 | import java.util.Arrays; 29 | import java.util.List; 30 | 31 | public class MainApplication extends Application implements ReactApplication { 32 | 33 | private final ReactNativeHost mReactNativeHost = 34 | new ReactNativeHost(this) { 35 | @Override 36 | public boolean getUseDeveloperSupport() { 37 | return BuildConfig.DEBUG; 38 | } 39 | 40 | @Override 41 | protected List getPackages() { 42 | 43 | return Arrays.asList( 44 | // Packages that cannot be autolinked yet can be added manually here, for example: 45 | // packages.add(new MyReactNativePackage()); 46 | new MainReactPackage(), 47 | new RNCameraPackage(), 48 | new RNGestureHandlerPackage(), 49 | new VectorIconsPackage(), 50 | new LinearGradientPackage(), 51 | new ReanimatedPackage(), 52 | new RNFetchBlobPackage(), 53 | new SvgPackage(), 54 | new CameraRollPackage(), 55 | new ReactVideoPackage() 56 | ); 57 | 58 | } 59 | 60 | @Override 61 | protected String getJSMainModuleName() { 62 | return "index"; 63 | } 64 | }; 65 | 66 | @Override 67 | public ReactNativeHost getReactNativeHost() { 68 | return mReactNativeHost; 69 | } 70 | 71 | @Override 72 | public void onCreate() { 73 | super.onCreate(); 74 | SoLoader.init(this, /* native exopackage */ false); 75 | initializeFlipper(this); // Remove this line if you don't want Flipper enabled 76 | } 77 | 78 | /** 79 | * Loads Flipper in React Native templates. 80 | * 81 | * @param context 82 | */ 83 | private static void initializeFlipper(Context context) { 84 | if (BuildConfig.DEBUG) { 85 | try { 86 | /* 87 | We use reflection here to pick up the class that initializes Flipper, 88 | since Flipper library is not available in release mode 89 | */ 90 | Class aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper"); 91 | aClass.getMethod("initializeFlipper", Context.class).invoke(null, context); 92 | } catch (ClassNotFoundException e) { 93 | e.printStackTrace(); 94 | } catch (NoSuchMethodException e) { 95 | e.printStackTrace(); 96 | } catch (IllegalAccessException e) { 97 | e.printStackTrace(); 98 | } catch (InvocationTargetException e) { 99 | e.printStackTrace(); 100 | } 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Hello App Display Name 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:3.4.2") 16 | 17 | // NOTE: Do not place your application dependencies here; they belong 18 | // in the individual module build.gradle files 19 | } 20 | } 21 | 22 | allprojects { 23 | repositories { 24 | mavenLocal() 25 | maven { 26 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 27 | url("$rootDir/../node_modules/react-native/android") 28 | } 29 | maven { 30 | // Android JSC is installed from npm 31 | url("$rootDir/../node_modules/jsc-android/dist") 32 | } 33 | 34 | google() 35 | jcenter() 36 | maven { url 'https://jitpack.io' } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useAndroidX=true 21 | android.enableJetifier=true 22 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem http://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 33 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 34 | 35 | @rem Find java.exe 36 | if defined JAVA_HOME goto findJavaFromJavaHome 37 | 38 | set JAVA_EXE=java.exe 39 | %JAVA_EXE% -version >NUL 2>&1 40 | if "%ERRORLEVEL%" == "0" goto init 41 | 42 | echo. 43 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 44 | echo. 45 | echo Please set the JAVA_HOME variable in your environment to match the 46 | echo location of your Java installation. 47 | 48 | goto fail 49 | 50 | :findJavaFromJavaHome 51 | set JAVA_HOME=%JAVA_HOME:"=% 52 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 53 | 54 | if exist "%JAVA_EXE%" goto init 55 | 56 | echo. 57 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 58 | echo. 59 | echo Please set the JAVA_HOME variable in your environment to match the 60 | echo location of your Java installation. 61 | 62 | goto fail 63 | 64 | :init 65 | @rem Get command-line arguments, handling Windows variants 66 | 67 | if not "%OS%" == "Windows_NT" goto win9xME_args 68 | 69 | :win9xME_args 70 | @rem Slurp the command line arguments. 71 | set CMD_LINE_ARGS= 72 | set _SKIP=2 73 | 74 | :win9xME_args_slurp 75 | if "x%~1" == "x" goto execute 76 | 77 | set CMD_LINE_ARGS=%* 78 | 79 | :execute 80 | @rem Setup the command line 81 | 82 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 83 | 84 | @rem Execute Gradle 85 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 86 | 87 | :end 88 | @rem End local scope for the variables with windows NT shell 89 | if "%ERRORLEVEL%"=="0" goto mainEnd 90 | 91 | :fail 92 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 93 | rem the _cmd.exe /c_ return code! 94 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 95 | exit /b 1 96 | 97 | :mainEnd 98 | if "%OS%"=="Windows_NT" endlocal 99 | 100 | :omega 101 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'InstagramClone' 2 | include ':@react-native-community_blur' 3 | project(':@react-native-community_blur').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/blur/android') 4 | include ':@react-native-community_cameraroll' 5 | project(':@react-native-community_cameraroll').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/cameraroll/android') 6 | include ':react-native-camera' 7 | project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android') 8 | include ':react-native-gesture-handler' 9 | project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android') 10 | include ':react-native-reanimated' 11 | project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android') 12 | include ':react-native-linear-gradient' 13 | project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android') 14 | include ':react-native-svg' 15 | project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android') 16 | include ':react-native-video' 17 | project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer') 18 | 19 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 20 | include ':app' 21 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "InstagramClone", 3 | "displayName": "InstagramClone" 4 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | plugins:[ 4 | ["module-resolver", 5 | { 6 | alias: { 7 | "~": "./src" 8 | } 9 | } 10 | ], 11 | ] 12 | }; 13 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /ios/InstagramClone-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSExceptionDomains 28 | 29 | localhost 30 | 31 | NSExceptionAllowsInsecureHTTPLoads 32 | 33 | 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | UILaunchStoryboardName 39 | LaunchScreen 40 | UIRequiredDeviceCapabilities 41 | 42 | armv7 43 | 44 | UISupportedInterfaceOrientations 45 | 46 | UIInterfaceOrientationPortrait 47 | UIInterfaceOrientationLandscapeLeft 48 | UIInterfaceOrientationLandscapeRight 49 | 50 | UIViewControllerBasedStatusBarAppearance 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ios/InstagramClone-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/InstagramClone.xcodeproj/xcshareddata/xcschemes/InstagramClone-tvOS.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /ios/InstagramClone.xcodeproj/xcshareddata/xcschemes/InstagramClone.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /ios/InstagramClone.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/InstagramClone.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/InstagramClone.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BuildSystemType 6 | Original 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/InstagramClone/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | @interface AppDelegate : UIResponder 12 | 13 | @property (nonatomic, strong) UIWindow *window; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /ios/InstagramClone/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import "AppDelegate.h" 9 | 10 | #import 11 | #import 12 | #import 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 19 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 20 | moduleName:@"InstagramClone" 21 | initialProperties:nil]; 22 | 23 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 24 | 25 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 26 | UIViewController *rootViewController = [UIViewController new]; 27 | rootViewController.view = rootView; 28 | self.window.rootViewController = rootViewController; 29 | [self.window makeKeyAndVisible]; 30 | return YES; 31 | } 32 | 33 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 34 | { 35 | #if DEBUG 36 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 37 | #else 38 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 39 | #endif 40 | } 41 | 42 | @end 43 | -------------------------------------------------------------------------------- /ios/InstagramClone/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /ios/InstagramClone/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "20x20", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "20x20", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "29x29", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "29x29", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "40x40", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "40x40", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "size" : "60x60", 36 | "scale" : "2x" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "size" : "60x60", 41 | "scale" : "3x" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "size" : "1024x1024", 46 | "scale" : "1x" 47 | } 48 | ], 49 | "info" : { 50 | "version" : 1, 51 | "author" : "xcode" 52 | } 53 | } -------------------------------------------------------------------------------- /ios/InstagramClone/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } -------------------------------------------------------------------------------- /ios/InstagramClone/Images.xcassets/insta.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "insta.jpeg", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x" 11 | }, 12 | { 13 | "idiom" : "universal", 14 | "scale" : "3x" 15 | } 16 | ], 17 | "info" : { 18 | "version" : 1, 19 | "author" : "xcode" 20 | } 21 | } -------------------------------------------------------------------------------- /ios/InstagramClone/Images.xcassets/insta.imageset/insta.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/ios/InstagramClone/Images.xcassets/insta.imageset/insta.jpeg -------------------------------------------------------------------------------- /ios/InstagramClone/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | InstagramClone 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSAllowsArbitraryLoads 30 | 31 | NSExceptionDomains 32 | 33 | localhost 34 | 35 | NSExceptionAllowsInsecureHTTPLoads 36 | 37 | 38 | 39 | 40 | NSLocationWhenInUseUsageDescription 41 | $(PRODUCT_NAME) location use 42 | UIAppFonts 43 | 44 | AntDesign.ttf 45 | Entypo.ttf 46 | EvilIcons.ttf 47 | Feather.ttf 48 | FontAwesome.ttf 49 | FontAwesome5_Brands.ttf 50 | FontAwesome5_Regular.ttf 51 | FontAwesome5_Solid.ttf 52 | Fontisto.ttf 53 | Foundation.ttf 54 | Ionicons.ttf 55 | MaterialCommunityIcons.ttf 56 | MaterialIcons.ttf 57 | Octicons.ttf 58 | Roboto_medium.ttf 59 | Roboto.ttf 60 | rubicon-icon-font.ttf 61 | SimpleLineIcons.ttf 62 | Zocial.ttf 63 | 64 | UILaunchStoryboardName 65 | LaunchScreen 66 | UIRequiredDeviceCapabilities 67 | 68 | armv7 69 | 70 | UISupportedInterfaceOrientations 71 | 72 | UIInterfaceOrientationPortrait 73 | UIInterfaceOrientationLandscapeLeft 74 | UIInterfaceOrientationLandscapeRight 75 | 76 | UIViewControllerBasedStatusBarAppearance 77 | 78 | NSCalendarsUsageDescription 79 | $(PRODUCT_NAME) calendar events 80 | NSRemindersUsageDescription 81 | $(PRODUCT_NAME) reminder use 82 | NSCameraUsageDescription 83 | This app requires to access your photo library to show image on profile and send via chat 84 | NSMicrophoneUsageDescription 85 | This app requires to access your microphone to record video with your voice send via chat 86 | NSPhotoLibraryUsageDescription 87 | This app requires to access your photo library to show image on profile and send via chat 88 | NSContactsUsageDescription 89 | $(PRODUCT_NAME) contact use 90 | NSLocationAlwaysUsageDescription 91 | $(PRODUCT_NAME) location use 92 | 93 | 94 | -------------------------------------------------------------------------------- /ios/InstagramClone/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /ios/InstagramCloneTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/InstagramCloneTests/InstagramCloneTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | #import 12 | #import 13 | 14 | #define TIMEOUT_SECONDS 600 15 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 16 | 17 | @interface InstagramCloneTests : XCTestCase 18 | 19 | @end 20 | 21 | @implementation InstagramCloneTests 22 | 23 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 24 | { 25 | if (test(view)) { 26 | return YES; 27 | } 28 | for (UIView *subview in [view subviews]) { 29 | if ([self findSubviewInView:subview matching:test]) { 30 | return YES; 31 | } 32 | } 33 | return NO; 34 | } 35 | 36 | - (void)testRendersWelcomeScreen 37 | { 38 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 39 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 40 | BOOL foundElement = NO; 41 | 42 | __block NSString *redboxError = nil; 43 | #ifdef DEBUG 44 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 45 | if (level >= RCTLogLevelError) { 46 | redboxError = message; 47 | } 48 | }); 49 | #endif 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | #ifdef DEBUG 64 | RCTSetLogFunction(RCTDefaultLogFunction); 65 | #endif 66 | 67 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 68 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 69 | } 70 | 71 | 72 | @end 73 | -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | platform :ios, '9.0' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | target 'InstagramClone' do 5 | # Pods for InstagramClone 6 | pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector" 7 | pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec" 8 | pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired" 9 | pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety" 10 | pod 'React', :path => '../node_modules/react-native/' 11 | pod 'React-Core', :path => '../node_modules/react-native/' 12 | pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules' 13 | pod 'React-Core/DevSupport', :path => '../node_modules/react-native/' 14 | pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS' 15 | pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation' 16 | pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob' 17 | pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image' 18 | pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS' 19 | pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network' 20 | pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings' 21 | pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text' 22 | pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration' 23 | pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/' 24 | 25 | pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact' 26 | pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi' 27 | pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor' 28 | pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector' 29 | pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon" 30 | pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon" 31 | pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga' 32 | 33 | pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' 34 | pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' 35 | pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' 36 | 37 | 38 | 39 | pod 'RNSVG', :path => '../node_modules/react-native-svg' 40 | 41 | pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient' 42 | 43 | pod 'RNReanimated', :path => '../node_modules/react-native-reanimated' 44 | 45 | pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler' 46 | 47 | 48 | pod 'react-native-camera', :path => '../node_modules/react-native-camera' 49 | 50 | pod 'react-native-cameraroll', :path => '../node_modules/@react-native-community/cameraroll' 51 | 52 | 53 | pod 'react-native-blur', :path => '../node_modules/@react-native-community/blur' 54 | 55 | target 'InstagramCloneTests' do 56 | inherit! :search_paths 57 | # Pods for testing 58 | end 59 | 60 | use_native_modules! 61 | end 62 | 63 | target 'InstagramClone-tvOS' do 64 | # Pods for InstagramClone-tvOS 65 | 66 | target 'InstagramClone-tvOSTests' do 67 | inherit! :search_paths 68 | # Pods for testing 69 | end 70 | 71 | end 72 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "InstagramClone", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest" 10 | }, 11 | "dependencies": { 12 | "@appandflow/masonry-list": "^0.4.0", 13 | "@react-native-community/blur": "^3.3.1", 14 | "@react-native-community/cameraroll": "^1.2.1", 15 | "@types/react-native-fetch-blob": "^0.10.5", 16 | "@types/react-native-modalbox": "^1.4.8", 17 | "deprecated-react-native-listview": "0.0.6", 18 | "linkify-it": "^1.2.4", 19 | "native-base": "^2.13.8", 20 | "react": "16.8.6", 21 | "react-native": "^0.61.1", 22 | "react-native-animatable": "1.3.2", 23 | "react-native-camera": "^3.7.2", 24 | "react-native-elements": "^1.2.0", 25 | "react-native-fetch-blob": "^0.10.8", 26 | "react-native-gesture-handler": "^1.4.1", 27 | "react-native-hyperlink": "0.0.14", 28 | "react-native-image-progress": "^0.6.0", 29 | "react-native-linear-gradient": "^2.5.6", 30 | "react-native-modalbox": "^2.0.0", 31 | "react-native-parallax-scroll-view": "^0.21.3", 32 | "react-native-progress-bar-animated": "^1.0.6", 33 | "react-native-reanimated": "^1.3.0", 34 | "react-native-story": "^0.1.3", 35 | "react-native-svg": "^9.9.4", 36 | "react-native-svg-uri": "^1.2.3", 37 | "react-native-swiper": "^1.5.14", 38 | "react-native-tab-view": "^2.10.0", 39 | "react-native-vector-icons": "^6.6.0", 40 | "react-native-vertical-swipe": "^1.1.1", 41 | "react-native-video": "^5.0.2", 42 | "react-native-view-more-text": "^2.1.0", 43 | "react-navigation": "^4.0.5", 44 | "react-navigation-custom-bottom-tab-component": "^1.1.1", 45 | "react-navigation-stack": "^1.8.0", 46 | "react-navigation-tabs": "^2.5.5" 47 | }, 48 | "devDependencies": { 49 | "@babel/core": "^7.5.0", 50 | "@babel/runtime": "^7.5.0", 51 | "@react-native-community/eslint-config": "^0.0.3", 52 | "@types/jest": "^24.0.18", 53 | "@types/react": "16.8.19", 54 | "@types/react-native": "0.60.15", 55 | "@types/react-test-renderer": "16.8.1", 56 | "babel-jest": "^24.1.0", 57 | "babel-plugin-module-resolver": "^4.0.0", 58 | "jest": "^24.1.0", 59 | "metro-react-native-babel-preset": "^0.51.1", 60 | "react-test-renderer": "16.8.1", 61 | "typescript": "^3.6.3" 62 | }, 63 | "jest": { 64 | "preset": "react-native", 65 | "moduleFileExtensions": [ 66 | "ts", 67 | "tsx", 68 | "js", 69 | "jsx", 70 | "json", 71 | "node" 72 | ] 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/assets/images/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/add.png -------------------------------------------------------------------------------- /src/assets/images/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/camera.png -------------------------------------------------------------------------------- /src/assets/images/camera_take.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/camera_take.jpg -------------------------------------------------------------------------------- /src/assets/images/chevron_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/chevron_left.png -------------------------------------------------------------------------------- /src/assets/images/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/close.png -------------------------------------------------------------------------------- /src/assets/images/collection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/collection.png -------------------------------------------------------------------------------- /src/assets/images/comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/comment.png -------------------------------------------------------------------------------- /src/assets/images/direct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/direct.png -------------------------------------------------------------------------------- /src/assets/images/heart.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/heart.jpg -------------------------------------------------------------------------------- /src/assets/images/heart_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/heart_red.png -------------------------------------------------------------------------------- /src/assets/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/home.png -------------------------------------------------------------------------------- /src/assets/images/ic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic1.png -------------------------------------------------------------------------------- /src/assets/images/ic10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic10.png -------------------------------------------------------------------------------- /src/assets/images/ic11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic11.png -------------------------------------------------------------------------------- /src/assets/images/ic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic2.png -------------------------------------------------------------------------------- /src/assets/images/ic3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic3.png -------------------------------------------------------------------------------- /src/assets/images/ic4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic4.png -------------------------------------------------------------------------------- /src/assets/images/ic5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic5.png -------------------------------------------------------------------------------- /src/assets/images/ic6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic6.png -------------------------------------------------------------------------------- /src/assets/images/ic7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic7.png -------------------------------------------------------------------------------- /src/assets/images/ic8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic8.png -------------------------------------------------------------------------------- /src/assets/images/ic_camera_front_white.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_camera_front_white.jpg -------------------------------------------------------------------------------- /src/assets/images/ic_camera_front_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_camera_front_white.png -------------------------------------------------------------------------------- /src/assets/images/ic_camera_front_white@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_camera_front_white@2x.png -------------------------------------------------------------------------------- /src/assets/images/ic_camera_front_white@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_camera_front_white@3x.png -------------------------------------------------------------------------------- /src/assets/images/ic_camera_rear_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_camera_rear_white.png -------------------------------------------------------------------------------- /src/assets/images/ic_camera_rear_white@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_camera_rear_white@2x.png -------------------------------------------------------------------------------- /src/assets/images/ic_camera_rear_white@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_camera_rear_white@3x.png -------------------------------------------------------------------------------- /src/assets/images/ic_flash_auto_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_flash_auto_white.png -------------------------------------------------------------------------------- /src/assets/images/ic_flash_auto_white@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_flash_auto_white@2x.png -------------------------------------------------------------------------------- /src/assets/images/ic_flash_auto_white@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_flash_auto_white@3x.png -------------------------------------------------------------------------------- /src/assets/images/ic_flash_off_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_flash_off_white.png -------------------------------------------------------------------------------- /src/assets/images/ic_flash_off_white@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_flash_off_white@2x.png -------------------------------------------------------------------------------- /src/assets/images/ic_flash_off_white@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_flash_off_white@3x.png -------------------------------------------------------------------------------- /src/assets/images/ic_flash_on_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_flash_on_white.png -------------------------------------------------------------------------------- /src/assets/images/ic_flash_on_white@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_flash_on_white@2x.png -------------------------------------------------------------------------------- /src/assets/images/ic_flash_on_white@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_flash_on_white@3x.png -------------------------------------------------------------------------------- /src/assets/images/ic_photo_camera_36pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_photo_camera_36pt.png -------------------------------------------------------------------------------- /src/assets/images/ic_photo_camera_36pt@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_photo_camera_36pt@2x.png -------------------------------------------------------------------------------- /src/assets/images/ic_photo_camera_36pt@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_photo_camera_36pt@3x.png -------------------------------------------------------------------------------- /src/assets/images/ic_stop_36pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_stop_36pt.png -------------------------------------------------------------------------------- /src/assets/images/ic_stop_36pt@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_stop_36pt@2x.png -------------------------------------------------------------------------------- /src/assets/images/ic_stop_36pt@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_stop_36pt@3x.png -------------------------------------------------------------------------------- /src/assets/images/ic_videocam_36pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_videocam_36pt.png -------------------------------------------------------------------------------- /src/assets/images/ic_videocam_36pt@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_videocam_36pt@2x.png -------------------------------------------------------------------------------- /src/assets/images/ic_videocam_36pt@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/ic_videocam_36pt@3x.png -------------------------------------------------------------------------------- /src/assets/images/insta.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/insta.jpeg -------------------------------------------------------------------------------- /src/assets/images/insta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/insta.png -------------------------------------------------------------------------------- /src/assets/images/live.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/live.png -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/assets/images/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/plus.png -------------------------------------------------------------------------------- /src/assets/images/post1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/post1.png -------------------------------------------------------------------------------- /src/assets/images/post2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/post2.png -------------------------------------------------------------------------------- /src/assets/images/post3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/post3.png -------------------------------------------------------------------------------- /src/assets/images/post4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/post4.png -------------------------------------------------------------------------------- /src/assets/images/post5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/post5.png -------------------------------------------------------------------------------- /src/assets/images/post6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/post6.png -------------------------------------------------------------------------------- /src/assets/images/post7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/post7.png -------------------------------------------------------------------------------- /src/assets/images/post8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/post8.png -------------------------------------------------------------------------------- /src/assets/images/post9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/post9.png -------------------------------------------------------------------------------- /src/assets/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/search.png -------------------------------------------------------------------------------- /src/assets/images/tv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/tv.png -------------------------------------------------------------------------------- /src/assets/images/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/up.png -------------------------------------------------------------------------------- /src/assets/images/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/assets/images/user.png -------------------------------------------------------------------------------- /src/assets/svg/camera.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/camera_black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/collection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/svg/comment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/svg/direct.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/svg/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/svg/heart_red.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/svg/home.svg: -------------------------------------------------------------------------------- 1 | 3 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/svg/live.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/svg/location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/svg/more.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/picture.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/svg/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/play_video.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 8 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/svg/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/svg/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/svg/thumb-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/GalleryView/GalleryView.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | Text, 5 | Image, Dimensions 6 | } from 'react-native' 7 | import CameraRollPicker from '~/components/cameraRollPicker/index'; 8 | import ParallaxScrollView from 'react-native-parallax-scroll-view'; 9 | import styles from "~/components/GalleryView/styles"; 10 | 11 | export default class GalleryView extends React.PureComponent { 12 | 13 | 14 | constructor(props: any) { 15 | super(props); 16 | this.state = { 17 | galleryImagePath: false, 18 | } 19 | } 20 | 21 | getSelectedImages(image: any, current: any) { 22 | this.setState({galleryImagePath: current.uri}); 23 | } 24 | 25 | render() { 26 | 27 | const {galleryImagePath, photos} = this.state; 28 | return ( 29 | 30 | ( 33 | 34 | 35 | { 36 | galleryImagePath 37 | && 38 | 39 | 40 | } 41 | 42 | 43 | )} 44 | renderFixedHeader={() => 45 | } 47 | parallaxHeaderHeight={350} 48 | stickyHeaderHeight={55} 49 | > 50 | 51 | 63 | 64 | 65 | 66 | ) 67 | } 68 | } 69 | 70 | -------------------------------------------------------------------------------- /src/components/GalleryView/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | backgroundColor: '#F6AE2D', 7 | }, 8 | content: { 9 | marginTop: 15, 10 | height: 50, 11 | flexDirection: 'row', 12 | justifyContent: 'center', 13 | alignItems: 'center', 14 | flexWrap: 'wrap', 15 | }, 16 | text: { 17 | fontSize: 16, 18 | alignItems: 'center', 19 | color: '#fff', 20 | }, 21 | bold: { 22 | fontWeight: 'bold', 23 | }, 24 | info: { 25 | fontSize: 12, 26 | }, 27 | preview: { 28 | flex: 1, 29 | justifyContent: 'flex-end', 30 | alignItems: 'center', 31 | }, 32 | galleryView: {}, 33 | imagePreview: {} 34 | }); 35 | 36 | export default styles; 37 | -------------------------------------------------------------------------------- /src/components/StorySlide/SlideHearder/SlideHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import {View, Image, Text, SafeAreaView, StyleSheet, Dimensions} from "react-native"; 3 | import DEFAULT_AVATAR from "~/assets/images/ic1.png"; 4 | import ProgressBarAnimated from 'react-native-progress-bar-animated' 5 | import {colors} from "~/utils/theme"; 6 | 7 | export default class SlideHeader extends React.PureComponent { 8 | state = { 9 | progressValue: 0 10 | }; 11 | constructor(props: any) { 12 | super(props); 13 | 14 | } 15 | 16 | componentDidMount() { 17 | this.updateLoader(); 18 | } 19 | 20 | updateLoader = () => { 21 | setInterval(() => { 22 | this.setState({progressValue: this.state.progressValue + 2}); 23 | if(this.state.progressValue==118){ 24 | //alert("Fini"); 25 | } 26 | }, 100) 27 | 28 | }; 29 | render() { 30 | // @ts-ignore 31 | const {user} = this.props; 32 | 33 | const progressCustomStyles = { 34 | backgroundColor: colors.white, 35 | borderRadius: 1.5, 36 | height: 3, 37 | }; 38 | return ( 39 | 40 | 41 | 46 | 47 | 52 | {user} 53 | 54 | 55 | 56 | ); 57 | } 58 | } 59 | const styles = StyleSheet.create({ 60 | container: { 61 | flexDirection: "column", 62 | padding: 16 63 | }, 64 | avatarContainer: { 65 | flexDirection: "row", 66 | alignItems: "center", 67 | marginTop: 20 68 | }, 69 | avatar: { 70 | width: 36, 71 | height: 36, 72 | borderRadius: 36 / 2, 73 | marginRight: 16, 74 | }, 75 | username: { 76 | color: "white", 77 | fontSize: 16 78 | } 79 | }); 80 | -------------------------------------------------------------------------------- /src/components/StorySlide/SlideItem/SlideItem.tsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, PureComponent } from "react"; 2 | import {View, Image, Dimensions, StyleSheet} from "react-native"; 3 | import SlideHeader from "~/components/StorySlide/SlideHearder/SlideHeader"; 4 | 5 | export default class SlideItem extends PureComponent { 6 | 7 | 8 | 9 | render() { 10 | // @ts-ignore 11 | const {story: { source, user, avatar, id }, footerComponent} = this.props; 12 | 13 | return ( 14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | {footerComponent && ( 25 | {footerComponent} 26 | )} 27 | 28 | ); 29 | } 30 | } 31 | 32 | const styles = StyleSheet.create({ 33 | container: { 34 | flex: 1, 35 | }, 36 | image: { 37 | ...StyleSheet.absoluteFillObject, 38 | width: null, 39 | height: Dimensions.get("window").height, 40 | }, 41 | footer: { 42 | flexDirection: 'row', 43 | alignItems: 'center', 44 | justifyContent: 'space-between', 45 | padding: 16, 46 | }, 47 | }); 48 | -------------------------------------------------------------------------------- /src/components/StorySlide/SlideView/SlideView.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component, Fragment} from "react"; 2 | import {Dimensions, StyleSheet, TextInput} from "react-native"; 3 | import Modal from "react-native-modalbox"; 4 | 5 | import StoriesData from "~/components/StorySlide/StoriesData/StoriesData"; 6 | 7 | 8 | export default class SlideView extends Component { 9 | constructor(props: any) { 10 | super(props); 11 | this.state = { 12 | isModalOpen: false, 13 | orderedStories: null, 14 | selectedStory: null 15 | }; 16 | } 17 | 18 | // Component Life Cycles 19 | 20 | // Component Functions 21 | _handleStoryItemPress = (item: any, index: any) => { 22 | 23 | // @ts-ignore 24 | const {stories} = this.props; 25 | 26 | this.setState({selectedStory: item}); 27 | 28 | const _stories = Array.from(stories); 29 | 30 | const rest = _stories.splice(index); 31 | const first = _stories; 32 | 33 | const orderedStories = rest.concat(first); 34 | 35 | this.setState({orderedStories}); 36 | this.setState({isModalOpen: true}); 37 | }; 38 | 39 | render() { 40 | 41 | // @ts-ignore 42 | const {isModalOpen, orderedStories, selectedStory} = this.state; 43 | 44 | return ( 45 | 46 | this.setState({isModalOpen: false})} 50 | position="center" 51 | swipeToClose 52 | swipeArea={250} 53 | backButtonClose 54 | > 55 | 63 | } 64 | /> 65 | 66 | 67 | ); 68 | } 69 | } 70 | 71 | const styles = StyleSheet.create({ 72 | storyListContainer: { 73 | marginTop: 50 74 | }, 75 | modal: { 76 | height: Dimensions.get("window").height, 77 | width: Dimensions.get("window").width, 78 | flex: 1 79 | } 80 | }); 81 | -------------------------------------------------------------------------------- /src/components/StorySlide/StoriesData/StoriesData.tsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | import { 3 | StyleSheet, 4 | Animated, 5 | Dimensions, 6 | Platform, 7 | View, 8 | } from "react-native"; 9 | 10 | import SlideItem from "~/components/StorySlide/SlideItem/SlideItem"; 11 | import stories from '~/utils/datas/stories' 12 | 13 | const { width } = Dimensions.get("window"); 14 | const perspective = width; 15 | const angle = Math.atan(perspective / (width / 2)); 16 | const ratio = Platform.OS === "ios" ? 2 : 1.2; 17 | 18 | export default class StoriesData extends PureComponent { 19 | stories:any = []; 20 | 21 | state = { 22 | x: new Animated.Value(0), 23 | ready: true 24 | }; 25 | 26 | constructor(props:any) { 27 | super(props); 28 | const _stories = stories; 29 | this.stories = _stories.map(() => React.createRef()); 30 | } 31 | 32 | async componentDidMount() { 33 | const { x } = this.state; 34 | await x.addListener(() => 35 | this.stories.forEach((story:any, index:any) => { 36 | const offset = index * width; 37 | const inputRange = [offset - width, offset + width]; 38 | const translateX = x 39 | .interpolate({ 40 | inputRange, 41 | outputRange: [width / ratio, -width / ratio], 42 | extrapolate: "clamp" 43 | }).__getValue(); 44 | 45 | const rotateY = x 46 | .interpolate({ 47 | inputRange, 48 | outputRange: [`${angle}rad`, `-${angle}rad`], 49 | extrapolate: "clamp" 50 | }).__getValue(); 51 | 52 | const parsed = parseFloat( 53 | rotateY.substr(0, rotateY.indexOf("rad")), 54 | 10 55 | ); 56 | const alpha = Math.abs(parsed); 57 | const gamma = angle - alpha; 58 | const beta = Math.PI - alpha - gamma; 59 | const w = width / 2 - ((width / 2) * Math.sin(gamma)) / Math.sin(beta); 60 | const translateX2 = parsed > 0 ? w : -w; 61 | 62 | const style = { 63 | transform: [ 64 | { perspective }, 65 | { translateX }, 66 | { rotateY }, 67 | { translateX: translateX2 } 68 | ] 69 | }; 70 | story.current.setNativeProps({ style }); 71 | }) 72 | ); 73 | } 74 | 75 | 76 | render() { 77 | const { x } = this.state; 78 | // @ts-ignore 79 | const {footerComponent } = this.props; 80 | 81 | return ( 82 | 83 | {stories 84 | .map((story:any, i:any) => ( 85 | 90 | 94 | 95 | )) 96 | .reverse()} 97 | 117 | 118 | ); 119 | } 120 | } 121 | const styles = StyleSheet.create({ 122 | container: { 123 | flex: 1, 124 | backgroundColor: "white" 125 | } 126 | }); 127 | -------------------------------------------------------------------------------- /src/components/avatarInput/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | View, 4 | TextInput, TouchableOpacity, KeyboardAvoidingView, 5 | } from "react-native"; 6 | import {Avatar, Text} from "react-native-elements"; 7 | import {colors} from "~/utils/theme"; 8 | import styles from "~/components/avatarInput/styles"; 9 | 10 | export default class AvatarInput extends Component { 11 | 12 | render(){ 13 | return ( 14 | 15 | 16 | 17 | 22 | 23 | 26 | 27 | ❤️ 28 | 29 | 30 | 31 | ); 32 | } 33 | }; 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/components/avatarInput/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | 3 | const styles = StyleSheet.create({ 4 | mainContainer:{ 5 | flex:1, 6 | flexDirection:'row', 7 | height: 40, 8 | borderRadius: 20, 9 | }, 10 | inputZone:{ 11 | flexDirection:'row', 12 | flex:10, 13 | justifyContent: 'center' 14 | }, 15 | avatarStyle:{ 16 | width:20, 17 | height:20, 18 | alignSelf:'center', 19 | borderRadius: 10, 20 | }, 21 | inputStyle:{ 22 | fontSize:13, 23 | fontWeight:"400", 24 | marginLeft:10, padding:3, 25 | flex:6 26 | }, 27 | toggleEmojii:{ 28 | alignContent:'center' 29 | } 30 | }); 31 | export default styles; 32 | -------------------------------------------------------------------------------- /src/components/cameraRollPicker/ImageItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Image, 4 | StyleSheet, 5 | Dimensions, 6 | TouchableOpacity, 7 | } from 'react-native'; 8 | import PropTypes from 'prop-types'; 9 | import styles from "~/components/cameraRollPicker/styles"; 10 | 11 | class ImageItem extends React.PureComponent { 12 | constructor(props:any) { 13 | super(props) 14 | } 15 | 16 | componentWillMount() { 17 | var { width } = Dimensions.get('window'); 18 | var { imageMargin, imagesPerRow, containerWidth } = this.props; 19 | 20 | if (typeof containerWidth != "undefined") { 21 | width = containerWidth; 22 | } 23 | this._imageSize = (width - (imagesPerRow + 1) * imageMargin) / imagesPerRow; 24 | } 25 | 26 | render() { 27 | var { item, selected, selectedMarker, imageMargin } = this.props; 28 | 29 | var marker = selectedMarker ? selectedMarker : 30 | ; 34 | 35 | var image = item.node.image; 36 | 37 | return ( 38 | this._handleClick(image)}> 41 | 44 | {(selected) ? marker : null} 45 | 46 | ); 47 | } 48 | 49 | _handleClick(item:any) { 50 | this.props.onClick(item); 51 | } 52 | } 53 | 54 | ImageItem.defaultProps = { 55 | item: {}, 56 | selected: false, 57 | }; 58 | 59 | ImageItem.propTypes = { 60 | item: PropTypes.object, 61 | selected: PropTypes.bool, 62 | selectedMarker: PropTypes.element, 63 | imageMargin: PropTypes.number, 64 | imagesPerRow: PropTypes.number, 65 | onClick: PropTypes.func, 66 | }; 67 | 68 | export default ImageItem; 69 | -------------------------------------------------------------------------------- /src/components/cameraRollPicker/circle-check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/components/cameraRollPicker/circle-check.png -------------------------------------------------------------------------------- /src/components/cameraRollPicker/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | 3 | const styles = StyleSheet.create({ 4 | marker: { 5 | position: 'absolute', 6 | top: 5, 7 | right: 5, 8 | backgroundColor: 'transparent', 9 | }, 10 | }); 11 | 12 | export default styles; 13 | -------------------------------------------------------------------------------- /src/components/cameraView/styles.ts: -------------------------------------------------------------------------------- 1 | import {Dimensions, StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | flex: 1, 7 | flexDirection: 'row' 8 | }, 9 | preview: { 10 | flex: 1, 11 | justifyContent: 'flex-end', 12 | alignItems: 'center', 13 | width: Dimensions.get("window").width, 14 | height: Dimensions.get("window").height 15 | }, 16 | header: { 17 | height: 50, 18 | backgroundColor: colors.blackFilter70, 19 | flexDirection: 'row', 20 | justifyContent: 'space-between', 21 | alignItems: 'center', 22 | paddingLeft: 10, 23 | paddingRight: 10 24 | }, 25 | cancleBtn: { 26 | padding: 20 27 | }, 28 | doneBtn: { 29 | padding: 20 30 | }, 31 | closeImage: { 32 | height: 30, 33 | width: 30, 34 | }, 35 | imageView: { 36 | paddingTop: 15 37 | }, 38 | image: { 39 | height: 500, 40 | width: null 41 | }, 42 | doneText: { 43 | position: 'absolute', 44 | right: 10, 45 | }, 46 | bottomOverlay: { 47 | position: 'absolute', 48 | right: 0, 49 | left: 0, 50 | backgroundColor: colors.black, 51 | bottom: 0, 52 | flexDirection: 'column', 53 | alignItems: 'stretch', 54 | }, 55 | frontCameraOverlay: { 56 | padding: 10, 57 | flexDirection: 'row', 58 | backgroundColor: colors.transparent, 59 | justifyContent: 'space-between' 60 | }, 61 | buttonOverlay: { 62 | height: 130, 63 | alignItems: 'center', 64 | backgroundColor: colors.black, 65 | justifyContent: 'center' 66 | }, 67 | captureButton: { 68 | paddingLeft: 15, 69 | paddingRight: 15, 70 | marginTop: 20, 71 | }, 72 | typeButton: { 73 | padding: 5, 74 | }, 75 | flashButton: { 76 | padding: 5, 77 | }, 78 | closeBtn: { 79 | height: 25, 80 | width: 25 81 | }, 82 | outerCircle: { 83 | backgroundColor: '#ddd', 84 | height: 80, 85 | width: 80, 86 | borderRadius: 50, 87 | borderWidth: 1, 88 | borderColor: '#ccc' 89 | }, 90 | innerCircle: { 91 | backgroundColor: '#fff', 92 | height: 50, 93 | width: 50, 94 | borderRadius: 50, 95 | margin: 14, 96 | 97 | }, 98 | recOuterCircle: { 99 | backgroundColor: '#ddd', 100 | height: 80, 101 | width: 80, 102 | borderRadius: 50, 103 | borderWidth: 1, 104 | borderColor: '#918b8b' 105 | }, 106 | recInnerCircle: { 107 | backgroundColor: '#e54242', 108 | height: 70, 109 | width: 70, 110 | borderRadius: 50, 111 | margin: 4 112 | }, 113 | previewImage: { 114 | backgroundColor: 'red' 115 | } 116 | }); 117 | 118 | export default styles; 119 | -------------------------------------------------------------------------------- /src/components/card/CardComponent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Image, Text,TouchableOpacity } from 'react-native'; 3 | 4 | import { Card, CardItem, Thumbnail, Body, Left, Right, Button, Icon, Title } from 'native-base'; 5 | 6 | export default class CardCompnent extends React.PureComponent { 7 | render() { 8 | 9 | const { data, onPress } = this.props; 10 | const { image } = JSON.parse(data.json_metadata); 11 | return ( 12 | 13 | 14 | 15 | 16 | 18 | 19 | {data.author} 20 | {new Date(data.created).toDateString()} 21 | 22 | 23 | 24 | { 25 | image && image.length ? 26 | 27 | 28 | 31 | : null 32 | } 33 | 34 | 35 | { data.title } 36 | 37 | {/* { data.body.replace(/\n/g,' ').slice(0, 200) } */} 38 | { data.summary } 39 | 40 | 41 | 42 | 43 | 44 | 48 | 52 | 55 | 56 | 57 | { data.pending_payout_value } 58 | 59 | 60 | 61 | 62 | ); 63 | } 64 | } 65 | 66 | -------------------------------------------------------------------------------- /src/components/commentItem/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {View, StyleSheet, TouchableOpacity} from "react-native"; 3 | import {Avatar, Text} from "react-native-elements"; 4 | import {colors} from "~/utils/theme"; 5 | import styles from "~/components/commentItem/styles"; 6 | 7 | const CommentItem: React.StatelessComponent = (props: any) => { 8 | return ( 9 | 10 | 17 | {props.context !== 'Home' ? 18 | 23 | : null} 24 | @{props.author}{` ${props.message}`} 27 | 28 | 29 | 30 | 7h 31 | { 32 | props.likeCount > 0 ? 12 Likes : null 33 | } 34 | 35 | Reply 36 | 37 | 38 | 39 | { 40 | 41 | props.context != 'Home' && props.canReply ? ( 42 | 43 | 44 | 45 | 51 | Hide replies 56 | 57 | 58 | 59 | 65 | {props.context !== 'Home' ? 66 | 71 | : null} 72 | @{props.author}{` ${props.message}`} 75 | 76 | 77 | 78 | 7h 79 | 12 Likes 80 | 81 | Reply 82 | 83 | 84 | 85 | 86 | 87 | ) : null 88 | } 89 | 90 | 91 | 92 | ); 93 | }; 94 | 95 | export default CommentItem; 96 | -------------------------------------------------------------------------------- /src/components/commentItem/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | 4 | const styles = StyleSheet.create({ 5 | commentRow: { 6 | lineHeight: 20, 7 | fontSize: 14, 8 | color: colors.black, 9 | }, 10 | author: { 11 | fontWeight: 'bold', 12 | color: colors.black 13 | }, 14 | flexStartAligned: { 15 | flex: 1, 16 | justifyContent: 'flex-start', 17 | flexDirection: 'row', 18 | alignItems: 'center' 19 | }, 20 | avatarStyle: { 21 | position: 'absolute', 22 | top: 0, 23 | width: 30, 24 | height: 30, 25 | alignSelf: 'center', 26 | borderRadius: 15, 27 | }, 28 | cardStatsCounter: { 29 | flexDirection: 'row', 30 | marginLeft: 40, 31 | marginTop: 5 32 | }, 33 | hour: { 34 | fontSize: 13, 35 | fontWeight: 'bold', 36 | color: colors.dark_gray, 37 | }, 38 | likes: { 39 | fontSize: 13, 40 | marginLeft: 10, 41 | fontWeight: 'bold', 42 | color: colors.dark_gray 43 | }, 44 | commentCounter: { 45 | fontSize: 13, 46 | marginLeft: 10, 47 | fontWeight: 'bold', 48 | color: colors.dark_gray 49 | }, 50 | replyContainer: { 51 | marginTop: 20, 52 | marginBottom: 20, 53 | marginLeft: 30, 54 | flexDirection: 'row' 55 | } 56 | }); 57 | 58 | export default styles; 59 | -------------------------------------------------------------------------------- /src/components/favoriteItem/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {View,TouchableOpacity, Dimensions} from "react-native"; 3 | import {Avatar, Text} from "react-native-elements"; 4 | import {colors} from "~/utils/theme"; 5 | import { Right, Button} from "native-base"; 6 | import {generateHiperlinkTextWithTime} from "~/utils/methods"; 7 | import styles from "~/components/favoriteItem/styles"; 8 | 9 | const FavoriteItem: React.StatelessComponent = (props: any) => { 10 | const {type, text, time, avatar} = props; 11 | return ( 12 | 13 | 14 | 15 | 22 | 23 | 28 | 29 | {generateHiperlinkTextWithTime( 30 | 32 | {text} 33 | , time 34 | )} 35 | {type !== 'other' ? 36 | 37 | 55 | :null} 56 | 57 | 58 | 59 | ); 60 | }; 61 | 62 | 63 | export default FavoriteItem; 64 | -------------------------------------------------------------------------------- /src/components/favoriteItem/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | 4 | const styles = StyleSheet.create({ 5 | commentRow: { 6 | lineHeight: 20, 7 | fontSize: 14, 8 | color: colors.black, 9 | }, 10 | author: { 11 | fontWeight: 'bold', 12 | color: colors.black 13 | }, 14 | flexStartAligned: { 15 | flex: 1, 16 | justifyContent: 'flex-start', 17 | flexDirection: 'row', 18 | alignItems: 'center' 19 | }, 20 | avatarStyle: { 21 | position: 'absolute', 22 | top: 0, 23 | width: 40, 24 | height: 40, 25 | borderColor: colors.light_gray, 26 | borderWidth: 1, 27 | alignSelf: 'center', 28 | borderRadius: 20, 29 | }, 30 | cardStatsCounter: { 31 | flexDirection: 'row', 32 | marginLeft: 40, 33 | marginTop: 5 34 | }, 35 | hour: { 36 | fontSize: 13, 37 | fontWeight: 'bold', 38 | color: colors.dark_gray, 39 | }, 40 | likes: { 41 | fontSize: 13, 42 | marginLeft: 10, 43 | fontWeight: 'bold', 44 | color: colors.dark_gray 45 | }, 46 | commentCounter: { 47 | fontSize: 13, 48 | marginLeft: 10, 49 | fontWeight: 'bold', 50 | color: colors.dark_gray 51 | }, 52 | replyContainer: { 53 | marginTop: 20, 54 | marginBottom: 20, 55 | marginLeft: 30, 56 | flexDirection: 'row' 57 | } 58 | }); 59 | 60 | export default styles; 61 | -------------------------------------------------------------------------------- /src/components/nestedCell/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {PureComponent} from "react"; 3 | import {View, StyleSheet, TouchableOpacity, Dimensions} from "react-native"; 4 | import {Image} from "react-native-elements"; 5 | import {colors} from "~/utils/theme"; 6 | 7 | 8 | class NestedCell extends PureComponent { 9 | render() { 10 | const {item} = this.props; 11 | return ( 12 | 18 | 19 | 21 | 22 | 23 | ); 24 | } 25 | } 26 | 27 | const styles = StyleSheet.create({ 28 | cell: { 29 | margin: 1, 30 | alignItems: 'center', 31 | justifyContent: 'center', 32 | minHeight: 40, 33 | }, 34 | }); 35 | 36 | export default NestedCell; 37 | -------------------------------------------------------------------------------- /src/components/postItems/PostItem/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | flexDirection: 'column', 7 | borderBottomColor: colors.exlight_gray, 8 | backgroundColor: colors.white, 9 | borderTopColor: colors.exlight_gray, 10 | borderBottomWidth: 1 11 | }, 12 | animatedIcon: { 13 | position: 'absolute', 14 | justifyContent: 'center', 15 | alignItems: 'center', 16 | zIndex: 1200, 17 | borderRadius: 160, 18 | opacity:0 19 | }, 20 | icon: { 21 | paddingHorizontal: 10, 22 | justifyContent: 'center', 23 | alignItems: 'center' 24 | }, 25 | containerProfilePhoto: { 26 | height: 48, 27 | flexDirection: 'column', 28 | width: 48, 29 | borderRadius: 24, 30 | backgroundColor: colors.white, 31 | justifyContent: 'center', 32 | alignItems: 'center' 33 | }, 34 | avatar: { 35 | height: 46, 36 | width: 46, 37 | position: 'relative', 38 | backgroundColor: colors.white, 39 | borderRadius: 23, 40 | zIndex: 100 41 | }, 42 | flexStartAligned: { 43 | flex: 1, 44 | justifyContent: 'flex-start', 45 | alignItems: 'flex-start' 46 | }, 47 | flexEndAligned: { 48 | flexDirection: 'row', 49 | flex: 3, 50 | alignItems: 'center', 51 | justifyContent: 'flex-end' 52 | }, 53 | cardHeader: { 54 | flexDirection: 'row', 55 | padding: 20, 56 | height: 70 57 | }, 58 | statContainer: { 59 | flexDirection: 'column', 60 | flex: 6, 61 | paddingLeft: 10, 62 | alignItems: 'flex-start', 63 | justifyContent: 'center' 64 | }, 65 | cardStatsCounter: { 66 | flexDirection: 'row', 67 | paddingLeft: 15, 68 | paddingRight: 15, 69 | paddingBottom: 15 70 | }, 71 | cardActionContainer: { 72 | flexDirection: 'row', 73 | padding: 15 74 | }, 75 | postAuthor: { 76 | fontSize: 14, 77 | marginLeft: 5, 78 | fontWeight: 'bold' 79 | }, 80 | postTime: { 81 | fontSize: 13, 82 | marginTop: 4, 83 | marginLeft: 5, 84 | color: colors.dark_gray 85 | }, 86 | blueText: { 87 | color: colors.lightBlue 88 | }, 89 | buttonMore: { 90 | alignSelf: 'flex-end', 91 | justifyContent: 'flex-end', 92 | alignContent: 'flex-end', 93 | flexGrow: 1 94 | }, 95 | likeCounter: { 96 | fontSize: 15, 97 | fontWeight: '400', 98 | color: colors.black 99 | }, 100 | viewMoreBtn: { 101 | fontSize: 14, 102 | fontWeight: '600', 103 | marginTop: 4, 104 | color: colors.dark_gray 105 | }, 106 | commentCounter: { 107 | fontSize: 14, 108 | marginLeft: 5, 109 | marginTop: 13, 110 | color: colors.black 111 | } 112 | , 113 | viewMoreText: { 114 | marginRight: 20, 115 | lineHeight: 20, 116 | fontSize: 14, 117 | marginTop: 10, 118 | color: colors.black 119 | }, videoView: { 120 | top: 0, 121 | left: 0, 122 | bottom: 0, 123 | right: 0, 124 | }, 125 | }); 126 | 127 | export default styles; 128 | -------------------------------------------------------------------------------- /src/components/postItems/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {View} from "react-native"; 3 | import PostItem from "./PostItem"; 4 | import posts from "~/utils/datas/posts"; 5 | 6 | const PostItems: React.StatelessComponent = (props: any) => { 7 | return ( 8 | 9 | { 10 | posts.map(post => ( 11 | 16 | )) 17 | } 18 | 19 | ); 20 | }; 21 | export default PostItems; 22 | -------------------------------------------------------------------------------- /src/components/searchTag/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Text, TouchableOpacity, View} from "react-native"; 3 | import {Image} from "react-native-elements"; 4 | import styles from "~/components/searchTag/styles"; 5 | 6 | const SearchTag = (props: any) => ( 7 | 8 | 9 | {props.id == 0 ? 10 | : null} 11 | {props.title} 12 | 13 | 14 | ); 15 | 16 | export default SearchTag; 17 | -------------------------------------------------------------------------------- /src/components/searchTag/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | flexDirection: 'row', 7 | backgroundColor: colors.white, 8 | borderColor: colors.exlight_gray, 9 | borderWidth: 2, 10 | borderRadius: 8, 11 | padding:8, 12 | alignItems: 'center', 13 | justifyContent: 'flex-start', 14 | height:40, 15 | maxHeight:40 16 | }, 17 | tag: { 18 | fontWeight: 'bold' 19 | } 20 | }); 21 | 22 | export default styles; 23 | -------------------------------------------------------------------------------- /src/components/separator/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {View, StyleSheet, Dimensions} from "react-native"; 3 | 4 | const Separator: React.StatelessComponent = () => { 5 | 6 | return ( 7 | 8 | ); 9 | }; 10 | const styles = StyleSheet.create({ 11 | separator: { 12 | height: 1, 13 | width: Dimensions.get('window').width, 14 | backgroundColor: '#D8D8D8', 15 | marginTop:10 16 | } 17 | }); 18 | 19 | export default Separator; 20 | -------------------------------------------------------------------------------- /src/components/storyItems/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {ScrollView, TouchableOpacity, View, StyleSheet} from "react-native"; 3 | import avatars from '~/utils/datas/avatars' 4 | import StoryItem from "./storyItem"; 5 | 6 | 7 | const storyItems: React.StatelessComponent = (props: any) => { 8 | 9 | return ( 10 | 14 | 15 | { 16 | avatars.map(avatar => ( 17 | avatar.id == 0 ? : 19 | 20 | )) 21 | } 22 | 23 | 24 | ); 25 | }; 26 | const styles = StyleSheet.create({ 27 | contactContainerStyle: { 28 | marginRight: 5 29 | }, 30 | }); 31 | export default storyItems; 32 | -------------------------------------------------------------------------------- /src/components/storyItems/storyItem/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {StyleSheet, TouchableOpacity, View , Text} from "react-native"; 3 | import {Avatar} from 'react-native-elements'; 4 | import {colors} from "~/utils/theme"; 5 | import LinearGradient from "react-native-linear-gradient"; 6 | import SvgUri from "react-native-svg-uri"; 7 | import styles from "~/components/storyItems/storyItem/styles"; 8 | 9 | const StoryItem: React.StatelessComponent = (props:any) => { 10 | 11 | return ( 12 | props.isBtnProfile ? 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 24 | {props.title} 25 | 26 | : 27 | 28 | 32 | 33 | 34 | 38 | 39 | 40 | 41 | { 42 | props.isLive ? 43 | 47 | LIVE 48 | 49 | 50 | 51 | : null 52 | } 53 | {props.name} 54 | 55 | 56 | ); 57 | 58 | }; 59 | 60 | export default StoryItem; 61 | -------------------------------------------------------------------------------- /src/components/storyItems/storyItem/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | height: 71, 7 | flexDirection: 'column', 8 | width: 71, 9 | borderRadius: 35.5, 10 | backgroundColor:colors.white, 11 | justifyContent: 'center', 12 | alignItems: 'center' 13 | }, 14 | profileName:{ 15 | marginTop:5, 16 | color: colors.black, 17 | fontWeight: "300", 18 | fontSize: 13, 19 | marginLeft:10 20 | }, 21 | containerProfile: { 22 | height: 76, 23 | flexDirection: 'column', 24 | width: 76, 25 | borderRadius: 38, 26 | backgroundColor:colors.white, 27 | justifyContent: 'center', 28 | alignItems: 'center' 29 | }, 30 | avatar: { 31 | height: 64, 32 | width: 64, 33 | position:'relative', 34 | backgroundColor:colors.white, 35 | borderRadius: 32, 36 | zIndex:100 37 | }, 38 | avatarProfile: { 39 | height: 76, 40 | width: 76, 41 | backgroundColor:colors.white, 42 | borderRadius: 36, 43 | position:'relative', 44 | zIndex:200 45 | }, 46 | btnPlusBg:{ 47 | backgroundColor:colors.white, 48 | width:26, 49 | height:26, 50 | borderRadius:13, 51 | zIndex: 500, 52 | position:'absolute', 53 | alignItems:'center', 54 | justifyContent:'center', 55 | bottom:0, 56 | right:0 57 | }, 58 | btnPlus:{ 59 | width:34, 60 | height:34, 61 | marginLeft:10, 62 | marginTop:10, 63 | }, 64 | btnLive:{ 65 | height: 24, 66 | width: 38, 67 | alignItems: 'center', 68 | borderColor:colors.white, 69 | borderWidth:3, 70 | position:'absolute', 71 | justifyContent: 'center', 72 | borderRadius:6, 73 | padding:4, 74 | bottom: 0, 75 | margin:'auto', 76 | top:-16, 77 | marginLeft:30 78 | 79 | }, 80 | textLive:{ 81 | color:colors.white, 82 | fontSize:10, 83 | fontWeight:'bold' 84 | } 85 | }); 86 | export default styles; 87 | -------------------------------------------------------------------------------- /src/components/toolbar/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {StyleSheet, TouchableOpacity, View} from "react-native"; 3 | import {Image, Text} from "react-native-elements"; 4 | import {Button, Header, Icon, Left, Right, Title, Body} from 'native-base' 5 | import {colors} from "~/utils/theme"; 6 | 7 | const HeaderToolbar: React.StatelessComponent = (props: any) => { 8 | return ( 9 |
10 | 11 | 21 | 22 | 23 | 24 | 25 | {props.context == 'Home' ? 26 | : 27 | {props.context}} 28 | 29 | 30 | 31 | {props.context == 'Home' ? 32 | 33 | : null} 34 | 35 | 36 | 37 | 38 |
39 | 40 | ); 41 | }; 42 | export default HeaderToolbar; 43 | -------------------------------------------------------------------------------- /src/containers/Aux/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | const AuxHOC = (props:any) => props.children; 3 | export default AuxHOC; 4 | -------------------------------------------------------------------------------- /src/navigation/home.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {createBottomTabNavigator} from 'react-navigation-tabs'; 3 | import {Image} from "react-native-elements"; 4 | import Home from "~/screens/Home"; 5 | import Search from "~/screens/Search"; 6 | import Like from "~/screens/Favorite"; 7 | import Profile from "~/screens/Profile"; 8 | import Add from "~/screens/Add"; 9 | 10 | export default (createBottomTabNavigator( 11 | { 12 | Home: { 13 | screen: Home, 14 | navigationOptions: { 15 | tabBarIcon: ({tintColor}) => 17 | } 18 | }, 19 | Search: { 20 | screen: Search, 21 | navigationOptions: { 22 | tabBarIcon: ({tintColor}) => 24 | } 25 | }, 26 | Add: { 27 | screen: Add, 28 | navigationOptions: { 29 | tabBarIcon: ({tintColor}) => 31 | } 32 | }, 33 | Like: { 34 | screen: Like, 35 | navigationOptions: { 36 | tabBarIcon: ({tintColor}) => 38 | } 39 | }, 40 | Profile: { 41 | screen: Profile, 42 | navigationOptions: { 43 | tabBarIcon: ({tintColor}) => 45 | } 46 | } 47 | }, 48 | { 49 | tabBarOptions: { 50 | showLabel: false, 51 | tabStyle: { 52 | padding: 20 53 | }, 54 | }, 55 | initialRouteName: 'Home', 56 | 57 | } 58 | )); 59 | -------------------------------------------------------------------------------- /src/navigation/navigation.tsx: -------------------------------------------------------------------------------- 1 | import {createAppContainer, createSwitchNavigator} from 'react-navigation'; 2 | import {createStackNavigator,} from 'react-navigation-stack'; 3 | import Home from "./home"; 4 | import Intro from "~/screens/Intro"; 5 | import Comments from "~/screens/Comments"; 6 | import PostDetail from "~/screens/Detail"; 7 | import Root from "~/screens/Root"; 8 | 9 | const appStack = createStackNavigator({ 10 | Root: { 11 | screen: Root, 12 | navigationOptions: () => ({ 13 | header: null, 14 | headerBackTitle: null, 15 | }), 16 | 17 | }, 18 | Splash: { 19 | screen: Intro, 20 | navigationOptions: () => ({ 21 | header: null, 22 | headerBackTitle: null 23 | }) 24 | }, 25 | Home: { 26 | screen: Home, 27 | navigationOptions: () => ({ 28 | header: null, 29 | headerBackTitle: null 30 | }) 31 | }, 32 | Comments: { 33 | screen: Comments, 34 | navigationOptions: () => ({ 35 | header: null, 36 | headerBackTitle: null 37 | }) 38 | }, 39 | PostDetail: { 40 | screen: PostDetail, 41 | navigationOptions: () => ({ 42 | header: null, 43 | headerBackTitle: null 44 | }) 45 | } 46 | }, { 47 | initialRouteName: 'Root' 48 | }); 49 | 50 | 51 | // @ts-ignore 52 | export default createAppContainer(createSwitchNavigator( 53 | { 54 | Intro: Intro, 55 | Root: Root, 56 | App: appStack, 57 | }, 58 | { 59 | initialRouteName: 'Intro' 60 | } 61 | )); 62 | -------------------------------------------------------------------------------- /src/screens/Add/styles.ts: -------------------------------------------------------------------------------- 1 | import {Dimensions, StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | 4 | const styles = StyleSheet.create({ 5 | wrapper: {}, 6 | paddingContainer: { 7 | flexDirection: 'column', 8 | padding: 16 9 | }, 10 | btnActions: { 11 | fontWeight: 'bold', 12 | fontSize: 17, 13 | color:colors.white 14 | }, 15 | marginContainer: { 16 | marginTop: 16 17 | }, 18 | modal: { 19 | height: Dimensions.get("window").height, 20 | width: Dimensions.get("window").width, 21 | flex: 1 22 | }, 23 | scene: { 24 | flex: 1, 25 | }, 26 | slide1: { 27 | flex: 1, 28 | justifyContent: 'center', 29 | alignItems: 'center', 30 | backgroundColor: '#9DD6EB' 31 | }, 32 | slide2: { 33 | flex: 1, 34 | justifyContent: 'center', 35 | alignItems: 'center', 36 | backgroundColor: '#97CAE5' 37 | }, 38 | slide3: { 39 | flex: 1, 40 | justifyContent: 'center', 41 | alignItems: 'center', 42 | backgroundColor: '#92BBD9' 43 | }, 44 | }); 45 | export default styles; 46 | -------------------------------------------------------------------------------- /src/screens/Comments/styles.ts: -------------------------------------------------------------------------------- 1 | import {Dimensions, StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | 4 | const styles = StyleSheet.create({ 5 | footer: { 6 | height: 110, 7 | padding: 10, 8 | backgroundColor: colors.white 9 | }, 10 | paddingContainer: { 11 | flexDirection: 'column', 12 | paddingLeft: 20, 13 | paddingRight: 20, 14 | paddingTop: 10 15 | }, 16 | marginContainer: { 17 | marginTop: 16 18 | }, 19 | emoji: { 20 | marginLeft: 10, 21 | fontSize: 19 22 | }, 23 | inputZone: { 24 | flexDirection: 'row', 25 | flex: 10, 26 | justifyContent: 'center', 27 | alignItems: 'center' 28 | }, 29 | avatarStyle: { 30 | width: 45, 31 | height: 45, 32 | alignSelf: 'center', 33 | borderRadius: 22.5, 34 | }, 35 | inputStyle: { 36 | fontSize: 13, 37 | height: 40, 38 | fontWeight: "400", 39 | marginLeft: 10, padding: 3, 40 | paddingLeft: 10, 41 | borderWidth: 1, 42 | borderColor: colors.light_gray, 43 | borderRadius: 20, 44 | flex: 6 45 | }, 46 | scrollView: {}, 47 | spinner:{ 48 | marginLeft: (Dimensions.get("window").width / 2) - 20, 49 | marginTop: 30, 50 | marginRight: 'auto' 51 | }, 52 | commentContainer:{ 53 | paddingLeft: 10, 54 | paddingRight: 10, 55 | paddingTop: 15, 56 | paddingBottom: 15 57 | } 58 | 59 | }); 60 | 61 | export default styles; 62 | -------------------------------------------------------------------------------- /src/screens/Detail/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, RefreshControl, ScrollView 4 | } from "react-native"; 5 | import { 6 | Button, 7 | Container, Icon, Header, Body, Content, Left, Right, Title 8 | } from "native-base"; 9 | import {colors} from "~/utils/theme"; 10 | import PostItems from "~/components/postItems/index"; 11 | import {NavigationScreenProp} from "react-navigation"; 12 | import styles from "~/screens/Detail/styles"; 13 | 14 | interface IDetailProps { 15 | navigation: NavigationScreenProp 16 | } 17 | 18 | export default class PostDetail extends React.PureComponent { 19 | 20 | 21 | constructor(props: IDetailProps) { 22 | super(props); 23 | this.state = { 24 | refreshing: false, 25 | setRefreshing: false, 26 | isModalOpen: false, 27 | orderedStories: null, 28 | selectedStory: null 29 | }; 30 | } 31 | 32 | onRefresh = () => { 33 | this.setState({setRefreshing: true}); 34 | this.wait(2000).then(() => { 35 | this.setState({setRefreshing: false}); 36 | }); 37 | }; 38 | 39 | goBack = () => { 40 | const {navigation} = this.props; 41 | navigation.goBack(); 42 | }; 43 | 44 | render() { 45 | const {refreshing} = this.state; 46 | const {navigation} = this.props; 47 | return ( 48 | 49 |
50 | 51 | 56 | 57 | 58 | Posts 59 | 60 | 61 | 62 | 63 |
64 | 65 | this.onRefresh}/> 68 | } 69 | contentInsetAdjustmentBehavior="automatic" 70 | style={styles.scrollView}> 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | ); 79 | } 80 | } 81 | 82 | -------------------------------------------------------------------------------- /src/screens/Detail/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | 3 | const styles = StyleSheet.create({ 4 | paddingContainer: { 5 | flexDirection: 'column', 6 | paddingLeft: 20, 7 | paddingRight: 20, 8 | paddingTop: 10 9 | }, 10 | marginContainer: { 11 | marginTop: 16 12 | }, 13 | scrollView: {}, 14 | }); 15 | 16 | export default styles; 17 | -------------------------------------------------------------------------------- /src/screens/Favorite/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | StyleSheet, 4 | View, RefreshControl, ScrollView 5 | } from "react-native"; 6 | 7 | import {Button, Text, Container, Header, Body, Content, Left, Right, Title} from "native-base"; 8 | import {colors} from "~/utils/theme"; 9 | import FavoriteItem from "~/components/favoriteItem"; 10 | import follows from "~/utils/datas/follows"; 11 | 12 | export default class Comments extends React.Component { 13 | 14 | 15 | constructor(props: any) { 16 | super(props); 17 | this.state = { 18 | refreshing: false, 19 | setRefreshing: false, 20 | isModalOpen: false, 21 | orderedStories: null, 22 | selectedStory: null 23 | }; 24 | } 25 | 26 | wait = (timeout: number) => { 27 | return new Promise(resolve => { 28 | setTimeout(resolve, timeout); 29 | }); 30 | }; 31 | 32 | onRefresh = () => { 33 | this.setState({setRefreshing: true}); 34 | this.wait(2000).then(() => { 35 | this.setState({setRefreshing: false}); 36 | }); 37 | }; 38 | 39 | goBack = () => { 40 | this.props.navigation.goBack(); 41 | }; 42 | 43 | render() { 44 | 45 | return ( 46 | 47 |
48 | 49 | 50 | Activity 51 | 52 | 53 |
54 | 55 | this.onRefresh}/> 58 | } 59 | contentInsetAdjustmentBehavior="automatic" 60 | style={styles.scrollView}> 61 | 62 | { 63 | follows.map(item => ( 64 | 65 | 67 | 68 | )) 69 | } 70 | 71 | 72 | 73 | 74 | 75 | ); 76 | } 77 | } 78 | const styles = StyleSheet.create({ 79 | paddingContainer: { 80 | flexDirection: 'column', 81 | paddingLeft: 20, 82 | paddingRight: 20, 83 | paddingTop: 10 84 | }, 85 | marginContainer: { 86 | marginTop: 16 87 | }, 88 | scrollView: {}, 89 | 90 | }); 91 | -------------------------------------------------------------------------------- /src/screens/Home/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {Fragment} from 'react'; 2 | import { 3 | StyleSheet, 4 | View, RefreshControl, ScrollView, TextInput, Dimensions 5 | } from "react-native"; 6 | import HeaderToolbar from '~/components/toolbar/index' 7 | import StoryItems from '~/components/storyItems/index' 8 | import Modal from "react-native-modalbox"; 9 | import StoriesData from '~/components/StorySlide/StoriesData/StoriesData' 10 | import PostItems from "~/components/postItems"; 11 | import Separator from "~/components/separator"; 12 | import styles from "~/screens/Home/styles"; 13 | 14 | export default class Home extends React.PureComponent { 15 | 16 | 17 | constructor(props: any) { 18 | super(props); 19 | 20 | this.state = { 21 | refreshing: false, 22 | setRefreshing: false, 23 | isModalOpen: false, 24 | isGalleryModalOpen: false, 25 | orderedStories: null, 26 | selectedStory: null 27 | }; 28 | } 29 | 30 | componentDidMount(): void { 31 | const {nav} = this.props; 32 | } 33 | 34 | wait = (timeout: number) => { 35 | return new Promise(resolve => { 36 | setTimeout(resolve, timeout); 37 | }); 38 | }; 39 | 40 | onRefresh = () => { 41 | this.setState({setRefreshing: true}); 42 | this.wait(2000).then(() => { 43 | this.setState({setRefreshing: false}); 44 | }); 45 | }; 46 | 47 | _handleStoryItemPress = (item: any, index: any) => { 48 | this.setState({selectedStory: item}); 49 | this.setState({isModalOpen: true}); 50 | }; 51 | 52 | 53 | render() { 54 | const {isModalOpen, refreshing} = this.state; 55 | const {navigation} = this.props; 56 | 57 | return ( 58 | 59 | 60 | navigation.navigate('Root')} context="Home"/> 61 | this.onRefresh}/> 64 | } 65 | contentInsetAdjustmentBehavior="automatic" 66 | style={styles.scrollView}> 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | this.setState({isModalOpen: false})} 79 | position="center" 80 | swipeToClose 81 | swipeArea={250} 82 | backButtonClose 83 | > 84 | 90 | } 91 | /> 92 | 93 | 94 | 95 | ); 96 | } 97 | } 98 | 99 | -------------------------------------------------------------------------------- /src/screens/Home/styles.ts: -------------------------------------------------------------------------------- 1 | import {Dimensions, StyleSheet} from "react-native"; 2 | 3 | const styles = StyleSheet.create({ 4 | paddingContainer: { 5 | flexDirection: 'column', 6 | paddingLeft: 20, 7 | paddingRight: 20, 8 | paddingTop: 10 9 | }, 10 | marginContainer: { 11 | marginTop: 16 12 | }, 13 | scrollView: {}, 14 | storiesContainer: { 15 | flexDirection: 'row' 16 | }, 17 | fragment: { 18 | flex: 1, 19 | flexDirection: 'column' 20 | }, 21 | storyListContainer: { 22 | marginTop: 50 23 | }, 24 | modal: { 25 | height: Dimensions.get("window").height, 26 | width: Dimensions.get("window").width, 27 | flex: 1 28 | } 29 | }); 30 | export default styles; 31 | -------------------------------------------------------------------------------- /src/screens/Intro/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {NavigationScreenProp, SafeAreaView} from 'react-navigation'; 3 | import {View, StatusBar} from 'react-native'; 4 | import {colors} from "~/utils/theme"; 5 | import {Image} from "react-native-elements"; 6 | import styles from "~/screens/Intro/styles"; 7 | 8 | 9 | export interface NavigationProps { 10 | navigation: NavigationScreenProp 11 | } 12 | 13 | interface IProps extends NavigationProps { 14 | } 15 | 16 | export default class Intro extends React.PureComponent { 17 | 18 | constructor(props: IProps) { 19 | super(props) 20 | } 21 | performTimeConsumingTask = async () => { 22 | return new Promise((resolve) => 23 | setTimeout( 24 | () => { 25 | resolve('finish'); 26 | }, 27 | 2000 28 | ) 29 | ) 30 | }; 31 | 32 | async componentDidMount() { 33 | const data = await this.performTimeConsumingTask(); 34 | if (data !== null) { 35 | this.props.navigation.navigate('Home'); 36 | } 37 | } 38 | 39 | render() { 40 | return ( 41 | 42 | 43 | 44 | 45 | 49 | 50 | 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/screens/Intro/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | flex: 1, 7 | backgroundColor: colors.darkBlue 8 | }, 9 | logo:{ 10 | width:200, 11 | height:200 12 | }, 13 | imageContainer:{ 14 | flex:1, 15 | flexDirection: 'column', 16 | justifyContent: 'center', 17 | alignItems:'center' 18 | } 19 | }); 20 | export default styles; 21 | -------------------------------------------------------------------------------- /src/screens/Root/styles.ts: -------------------------------------------------------------------------------- 1 | import {Dimensions, StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | const {width} = Dimensions.get("window"); 4 | const styles = StyleSheet.create({ 5 | container: { 6 | flex: 1, 7 | }, 8 | multipleSelect: { 9 | height: 35, 10 | borderRadius: 17.5, 11 | backgroundColor: "#404040", 12 | borderColor: colors.white, 13 | padding: 8, 14 | flexDirection: 'row', 15 | borderWidth: 2 16 | }, 17 | absolute: { 18 | position: "absolute", 19 | top: 0, 20 | left: 0, 21 | bottom: 0, 22 | right: 0 23 | }, 24 | dragContainer: { 25 | flex: 1, 26 | alignItems: "center", 27 | justifyContent: "center", 28 | }, 29 | innerContainer: {}, 30 | modal: { 31 | height: Dimensions.get("window").height, 32 | width: Dimensions.get("window").width, 33 | flex: 1 34 | }, 35 | bottomOverlay: { 36 | position: 'absolute', 37 | right: 0, 38 | left: 0, 39 | backgroundColor: colors.black, 40 | bottom: 0, 41 | flexDirection: 'column', 42 | alignItems: 'stretch', 43 | }, 44 | frontCameraOverlay: { 45 | padding: 10, 46 | flexDirection: 'row', 47 | backgroundColor: colors.transparent, 48 | justifyContent: 'space-between' 49 | }, 50 | buttonOverlay: { 51 | height: 130, 52 | alignItems: 'center', 53 | backgroundColor: colors.black, 54 | justifyContent: 'center' 55 | }, 56 | captureButton: { 57 | paddingLeft: 15, 58 | paddingRight: 15, 59 | marginTop: 20, 60 | }, 61 | typeButton: { 62 | padding: 5, 63 | }, 64 | flashButton: { 65 | padding: 5, 66 | }, 67 | closeBtn: { 68 | height: 25, 69 | width: 25 70 | }, 71 | outerCircle: { 72 | backgroundColor: colors.transparent, 73 | height: 80, 74 | width: 80, 75 | justifyContent: 'center', 76 | alignItems: 'center', 77 | borderRadius: 40, 78 | borderWidth: 3, 79 | borderColor: '#ccc' 80 | }, 81 | innerCircle: { 82 | backgroundColor: '#fff', 83 | height: 70, 84 | width: 70, 85 | alignSelf: 'center', 86 | borderRadius: 35, 87 | margin: 14, 88 | 89 | }, 90 | recOuterCircle: { 91 | backgroundColor: '#ddd', 92 | height: 80, 93 | width: 80, 94 | borderRadius: 50, 95 | borderWidth: 1, 96 | borderColor: '#918b8b' 97 | }, 98 | recInnerCircle: { 99 | backgroundColor: '#e54242', 100 | height: 70, 101 | width: 70, 102 | borderRadius: 50, 103 | margin: 4 104 | }, 105 | previewImage: { 106 | backgroundColor: 'red' 107 | }, headerCamera: { 108 | borderRadius: 8, 109 | backgroundColor: colors.transparent, 110 | borderBottomWidth: 0, 111 | paddingLeft: 8 112 | }, 113 | footerCamera: { 114 | flex: 20, 115 | backgroundColor: colors.transparent, 116 | borderTopWidth: 0, 117 | marginLeft: 20, 118 | marginRight: 20 119 | }, 120 | imageBtnFooter: { 121 | width: 30, 122 | height: 30, 123 | borderRadius: 8, 124 | borderColor: colors.white, 125 | borderWidth: 2, 126 | overflow: "hidden" 127 | }, textFilter: { 128 | color: colors.white, 129 | fontWeight: 'bold', 130 | marginLeft: 10, 131 | fontSize: 13 132 | }, 133 | absoluteFillBlur: { 134 | position: 'absolute', 135 | left: 0, 136 | right: 0, 137 | top: 0, 138 | bottom: 0, 139 | zIndex: 100 140 | }, 141 | absoluteFillView:{ 142 | position: 'absolute', 143 | left: 0, 144 | right: 0, 145 | top: 0, 146 | bottom: 0, 147 | zIndex: 400 148 | }, 149 | headerBlur:{ 150 | height: 100, 151 | marginLeft: 5, 152 | marginRight: 5, 153 | borderBottomWidth: 0, 154 | backgroundColor: colors.transparent 155 | }, 156 | leftBtnBlur:{ 157 | flex: 1, 158 | flexDirection: 'row', 159 | alignItems: 'center', 160 | justifyContent: 'center' 161 | }, 162 | blurImageStyle:{ 163 | width: ((width / 3) - 4), 164 | marginLeft: 2, 165 | marginTop: 2, 166 | height: 200 167 | } 168 | 169 | 170 | }); 171 | export default styles; 172 | -------------------------------------------------------------------------------- /src/screens/Search/styles.ts: -------------------------------------------------------------------------------- 1 | import {Dimensions, StyleSheet} from "react-native"; 2 | import {colors} from "~/utils/theme"; 3 | import {exp} from "react-native-reanimated"; 4 | 5 | const styles = StyleSheet.create({ 6 | paddingContainer: { 7 | flexDirection: 'column', 8 | paddingLeft: 20, 9 | paddingRight: 20, 10 | paddingTop: 10 11 | }, 12 | marginContainer: { 13 | marginTop: 16 14 | }, 15 | modal: { 16 | height: Dimensions.get("window").height, 17 | width: Dimensions.get("window").width, 18 | flex: 1 19 | }, 20 | headerSearch: { 21 | borderRadius: 8, 22 | backgroundColor: colors.white, 23 | borderBottomWidth: 0, 24 | paddingLeft: 8 25 | }, 26 | headerCamera:{ 27 | borderRadius: 8, 28 | backgroundColor: colors.transparent, 29 | borderBottomWidth: 0, 30 | paddingLeft: 8 31 | }, 32 | textUsername:{ 33 | fontWeight: 'bold', 34 | marginTop: 9, 35 | color: colors.dark_gray, 36 | textTransform: 'uppercase', 37 | fontSize: 32 38 | }, 39 | footer:{ 40 | height: 20, 41 | backgroundColor: colors.transparent, 42 | borderTopWidth: 0 43 | }, 44 | footerView:{ 45 | alignItems: 'center', 46 | flexDirection: 'row', 47 | justifyContent: 'center', 48 | flex: 1 49 | }, 50 | nameTag:{color: colors.white, fontWeight: 'bold', marginLeft: 10}, 51 | }); 52 | 53 | export default styles; 54 | -------------------------------------------------------------------------------- /src/screenshots/Demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/screenshots/Demo.gif -------------------------------------------------------------------------------- /src/screenshots/Demo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/screenshots/Demo1.png -------------------------------------------------------------------------------- /src/screenshots/Demo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/screenshots/Demo2.png -------------------------------------------------------------------------------- /src/screenshots/Demo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/screenshots/Demo3.png -------------------------------------------------------------------------------- /src/screenshots/Demo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/screenshots/Demo4.png -------------------------------------------------------------------------------- /src/screenshots/Demo5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/screenshots/Demo5.png -------------------------------------------------------------------------------- /src/screenshots/Demo6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/screenshots/Demo6.png -------------------------------------------------------------------------------- /src/screenshots/Demo7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/screenshots/Demo7.png -------------------------------------------------------------------------------- /src/screenshots/Demo8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Instagram-clone/05c30985c838ed08d23fec7a42d7b800bcf9a071/src/screenshots/Demo8.png -------------------------------------------------------------------------------- /src/utils/Layout.ts: -------------------------------------------------------------------------------- 1 | import { Dimensions } from "react-native"; 2 | 3 | const { width, height } = Dimensions.get("screen"); 4 | 5 | export default { 6 | width, 7 | height 8 | }; -------------------------------------------------------------------------------- /src/utils/datas/avatars.ts: -------------------------------------------------------------------------------- 1 | const avatars: Array = [ 2 | { 3 | id: 0, 4 | live: false, 5 | name: "Your story", 6 | src: require('~/assets/images/ic1.png') 7 | }, 8 | { 9 | id: 1, 10 | live: true, 11 | name: "Cheppard", 12 | src: require('~/assets/images/ic1.png') 13 | }, 14 | { 15 | id: 2, 16 | live: false, 17 | name: "Duke", 18 | src: require('~/assets/images/ic2.png') 19 | }, 20 | { 21 | id: 3, 22 | live: false, 23 | name: "Pavel", 24 | src: require('~/assets/images/ic3.png') 25 | }, 26 | { 27 | id: 4, 28 | live: false, 29 | name: "Steeve", 30 | src: require('~/assets/images/ic4.png') 31 | }, 32 | { 33 | id: 5, 34 | live: false, 35 | name: "Reenessis", 36 | src: require('~/assets/images/ic5.png') 37 | }, 38 | { 39 | id: 6, 40 | live: false, 41 | name: "Aria", 42 | src: require('~/assets/images/ic6.png') 43 | }, 44 | { 45 | id: 7, 46 | live: false, 47 | name: "Tyrion", 48 | src: require('~/assets/images/ic7.png') 49 | }, 50 | ]; 51 | export default avatars; 52 | -------------------------------------------------------------------------------- /src/utils/datas/emojis.ts: -------------------------------------------------------------------------------- 1 | const CommentsEmojis: Array = [ 2 | { 3 | id: 0, 4 | text: `❤` 5 | }, 6 | { 7 | id: 1, 8 | text: `🤣` 9 | }, 10 | { 11 | id: 2, 12 | text: `🙌` 13 | }, 14 | { 15 | id: 3, 16 | text: `🔥` 17 | }, 18 | { 19 | id: 4, 20 | text: `👏` 21 | }, 22 | { 23 | id: 5, 24 | text: `😥` 25 | }, 26 | { 27 | id: 6, 28 | text: `😍` 29 | }, 30 | { 31 | id: 7, 32 | text: `😲` 33 | }, 34 | { 35 | id: 8, 36 | text: `😎` 37 | }, 38 | { 39 | id: 9, 40 | text: `😤` 41 | }, 42 | { 43 | id: 10, 44 | text: `😈` 45 | }, 46 | 47 | ]; 48 | export default CommentsEmojis; 49 | -------------------------------------------------------------------------------- /src/utils/datas/filers.ts: -------------------------------------------------------------------------------- 1 | const filter = [ 2 | {id: 0, name: "Live"}, 3 | {id: 1, name: "Create"}, 4 | {id: 2, name: "Normal"}, 5 | {id: 3, name: "Boomerang"}, 6 | {id: 4, name: "Superzoom"}, 7 | {id: 5, name: "Hands-free"} 8 | ]; 9 | export default filter; 10 | -------------------------------------------------------------------------------- /src/utils/datas/follows.ts: -------------------------------------------------------------------------------- 1 | const follows = [ 2 | { 3 | "id": 0, 4 | "type": "following", 5 | "text": "@Pachel started following you", 6 | "time": "1w", 7 | "avatar":require('~/assets/images/post1.png'), 8 | "category":"week" 9 | 10 | 11 | }, 12 | { 13 | "id": 1, 14 | "type": "follow", 15 | "text": "@cedvit and @Melvich followed @Pavel on instagram. see their post", 16 | "time": "2w", 17 | "avatar":require('~/assets/images/post2.png'), 18 | "category":"week" 19 | }, 20 | { 21 | "id": 2, 22 | "type": "other", 23 | "text": "Follow @Eric and @Bill to watch their photos and videos", 24 | "time": "3w", 25 | "avatar":require('~/assets/images/post3.png') 26 | }, 27 | { 28 | "id": 3, 29 | "type": "other", 30 | "text": "Follow @GTCx , @Fsys_mi and @Polyc to watch their photos and videos", 31 | "time": "3w", 32 | "avatar":require('~/assets/images/post4.png'), 33 | "category":"week" 34 | }, 35 | { 36 | "id": 4, 37 | "type": "follow", 38 | "text": "Follow @Eric and @Bill to watch their photos and videos", 39 | "time": "3w", 40 | "avatar":require('~/assets/images/post5.png'), 41 | "category":"month" 42 | }, 43 | { 44 | "id": 5, 45 | "type": "follow", 46 | "text": "Follow @GTCx , @Fsys_mi and @Polyc to watch their photos and videos", 47 | "time": "3w", 48 | "avatar":require('~/assets/images/post6.png'), 49 | "category":"month" 50 | }, 51 | 52 | // 53 | 54 | { 55 | "id": 6, 56 | "type": "follow", 57 | "text": "Follow @Eric and @Bill to watch their photos and videos", 58 | "time": "3w", 59 | "avatar":require('~/assets/images/post3.png'), 60 | "category":"month" 61 | }, 62 | { 63 | "id": 7, 64 | "type": "following", 65 | "text": "Follow @GTCx , @Fsys_mi and @Polyc to watch their photos and videos", 66 | "time": "3w", 67 | "avatar":require('~/assets/images/post4.png'), 68 | "category":"month" 69 | }, 70 | { 71 | "id": 8, 72 | "type": "other", 73 | "text": "Follow @Eric and @Bill to watch their photos and videos", 74 | "time": "3w", 75 | "avatar":require('~/assets/images/post5.png'), 76 | "category":"early" 77 | }, 78 | { 79 | "id": 9, 80 | "type": "follow", 81 | "text": "Follow @GTCx , @Fsys_mi and @Polyc to watch their photos and videos", 82 | "time": "3w", 83 | "avatar":require('~/assets/images/post6.png'), 84 | "category":"early" 85 | }, 86 | { 87 | "id": 8, 88 | "type": "other", 89 | "text": "Follow @Eric and @Bill to watch their photos and videos", 90 | "time": "3w", 91 | "avatar":require('~/assets/images/post5.png'), 92 | "category":"early" 93 | }, 94 | { 95 | "id": 9, 96 | "type": "other", 97 | "text": "Follow @GTCx , @Fsys_mi and @Polyc to watch their photos and videos", 98 | "time": "3w", 99 | "avatar":require('~/assets/images/post6.png'), 100 | "category":"early" 101 | }, 102 | 103 | 104 | //:xx 105 | 106 | { 107 | "id": 10, 108 | "type": "following", 109 | "text": "@Pachel started following you", 110 | "time": "1w", 111 | "avatar":require('~/assets/images/post1.png'), 112 | "category":"week" 113 | 114 | 115 | }, 116 | { 117 | "id": 11, 118 | "type": "follow", 119 | "text": "@cedvit and @Melvich followed @Pavel on instagram. see their post", 120 | "time": "2w", 121 | "avatar":require('~/assets/images/post2.png'), 122 | "category":"week" 123 | }, 124 | { 125 | "id": 12, 126 | "type": "other", 127 | "text": "Follow @Eric and @Bill to watch their photos and videos", 128 | "time": "3w", 129 | "avatar":require('~/assets/images/post3.png') 130 | }, 131 | { 132 | "id": 13, 133 | "type": "other", 134 | "text": "Follow @GTCx , @Fsys_mi and @Polyc to watch their photos and videos", 135 | "time": "3w", 136 | "avatar":require('~/assets/images/post4.png'), 137 | "category":"week" 138 | }, 139 | { 140 | "id": 14, 141 | "type": "follow", 142 | "text": "Follow @Eric and @Bill to watch their photos and videos", 143 | "time": "3w", 144 | "avatar":require('~/assets/images/post5.png'), 145 | "category":"month" 146 | }, 147 | { 148 | "id": 15, 149 | "type": "follow", 150 | "text": "Follow @GTCx , @Fsys_mi and @Polyc to watch their photos and videos", 151 | "time": "3w", 152 | "avatar":require('~/assets/images/post6.png'), 153 | "category":"month" 154 | }, 155 | 156 | // 157 | 158 | { 159 | "id": 16, 160 | "type": "follow", 161 | "text": "Follow @Eric and @Bill to watch their photos and videos", 162 | "time": "3w", 163 | "avatar":require('~/assets/images/post3.png'), 164 | "category":"month" 165 | }, 166 | ]; 167 | export default follows; 168 | -------------------------------------------------------------------------------- /src/utils/datas/postComments.ts: -------------------------------------------------------------------------------- 1 | const PostComments : Array = [ 2 | {id:0,avatar:true,canReply:true, author:"Davila Ruise",message:`❤️ I miss you honney. keep working✨`}, 3 | {id:1,avatar:true,canReply:false, author:"Jenny Scofield",message:`Hi sir , can you please suggest me some ressourses please :)`}, 4 | {id:2,avatar:true,canReply:false, author:"Abela Menson",message:`Lol. Instagram is a very great app. Keep moving and learning huys`}, 5 | {id:3,avatar:true,canReply:false, author:"Daniel Jee",message:`Hi. I'm new here, where to start ? can i found some friends here , please ?`}, 6 | {id:4,avatar:true,canReply:true, author:"Davila Ruise",message:`❤️ I miss you honney. keep working✨`}, 7 | {id:5,avatar:true,canReply:false, author:"Jenny Scofield",message:`Hi sir , can you please suggest me some ressourses please :)`}, 8 | {id:6,avatar:true,canReply:false, author:"Abela Menson",message:`Lol. Instagram is a very great app. Keep moving and learning huys`}, 9 | {id:7,avatar:true,canReply:false, author:"Daniel Jee",message:`Hi. I'm new here, where to start ? can i found some friends here , please ?`} 10 | ]; 11 | export default PostComments; 12 | -------------------------------------------------------------------------------- /src/utils/datas/postImages.ts: -------------------------------------------------------------------------------- 1 | const PostImages: Array = [ 2 | "https://cdn.pixabay.com/photo/2018/11/29/21/19/hamburg-3846525__480.jpg", 3 | "https://cdn.pixabay.com/photo/2018/11/11/16/51/ibis-3809147__480.jpg", 4 | "https://cdn.pixabay.com/photo/2018/11/23/14/19/forest-3833973__480.jpg", 5 | "https://cdn.pixabay.com/photo/2019/01/05/17/05/man-3915438__480.jpg", 6 | "https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__480.jpg", 7 | "https://cdn.pixabay.com/photo/2018/11/04/20/21/harley-davidson-3794909__480.jpg", 8 | "https://cdn.pixabay.com/photo/2018/12/25/21/45/crystal-ball-photography-3894871__480.jpg", 9 | "https://cdn.pixabay.com/photo/2018/12/29/23/49/rays-3902368__480.jpg", 10 | "https://cdn.pixabay.com/photo/2017/05/05/16/57/buzzard-2287699__480.jpg", 11 | "https://cdn.pixabay.com/photo/2018/08/06/16/30/mushroom-3587888__480.jpg", 12 | "https://cdn.pixabay.com/photo/2018/12/15/02/53/flower-3876195__480.jpg", 13 | "https://cdn.pixabay.com/photo/2018/12/16/18/12/open-fire-3879031__480.jpg", 14 | "https://cdn.pixabay.com/photo/2018/11/24/02/05/lichterkette-3834926__480.jpg", 15 | "https://cdn.pixabay.com/photo/2018/11/29/19/29/autumn-3846345__480.jpg" 16 | ]; 17 | export default PostImages; 18 | -------------------------------------------------------------------------------- /src/utils/datas/stories.ts: -------------------------------------------------------------------------------- 1 | const stories = [ 2 | 3 | { 4 | "id": 0, 5 | "isText": true, 6 | "avatar": "http://placehold.it/32x32", 7 | "source": "https://cdn.pixabay.com/photo/2018/11/11/16/51/ibis-3809147__480.jpg", 8 | "user": "Rutledge Harris" 9 | }, 10 | 11 | { 12 | "id": 1, 13 | "isText": false, 14 | "avatar": "http://placehold.it/32x32", 15 | "source": "https://cdn.pixabay.com/photo/2018/11/11/16/51/ibis-3809147__480.jpg", 16 | "user": "Guadalupe Grant" 17 | }, 18 | { 19 | "id": 2, 20 | "isText": false, 21 | "avatar": "http://placehold.it/32x32", 22 | "source": "https://picsum.photos/id/202/900/900", 23 | "user": "Dunlap Sheppard" 24 | }, 25 | { 26 | "id": 3, 27 | "isText": true, 28 | "avatar": "http://placehold.it/32x32", 29 | "source": "https://cdn.pixabay.com/photo/2018/11/29/21/19/hamburg-3846525__480.jpg", 30 | "user": "Bray Oliver" 31 | }, 32 | { 33 | "id": 4, 34 | "isText": true, 35 | "avatar": "http://placehold.it/32x32", 36 | "source": "https://picsum.photos/id/208/900/900", 37 | "user": "Nona Weber" 38 | }, 39 | { 40 | "id": 5, 41 | "isText": true, 42 | "avatar": "http://placehold.it/32x32", 43 | "source": "https://picsum.photos/id/220/900/900", 44 | "user": "Freida Mann" 45 | } 46 | ]; 47 | export default stories; 48 | -------------------------------------------------------------------------------- /src/utils/datas/tags.ts: -------------------------------------------------------------------------------- 1 | const tags = [ 2 | { 3 | "id": 0, 4 | "withIcon": true, 5 | "text": "IGTV" 6 | }, 7 | { 8 | "id": 1, 9 | "withIcon": true, 10 | "text": "Shop" 11 | }, 12 | { 13 | "id": 2, 14 | "withIcon": false, 15 | "text": "Style" 16 | }, 17 | { 18 | "id": 3, 19 | "withIcon": true, 20 | "text": "Decor" 21 | }, 22 | { 23 | "id": 4, 24 | "withIcon": false, 25 | "text": "Science" 26 | }, 27 | { 28 | "id": 5, 29 | "withIcon": false, 30 | "text": "Science & Tech" 31 | }, 32 | { 33 | "id": 6, 34 | "withIcon": false, 35 | "text": "Beauty" 36 | } 37 | ]; 38 | export default tags; 39 | -------------------------------------------------------------------------------- /src/utils/methods.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // @ts-ignore 3 | import Hyperlink from "react-native-hyperlink"; 4 | import {colors} from "./theme"; 5 | 6 | const first_linkify = require("linkify-it")() 7 | .add("@", { 8 | validate: function(text:any, pos:any, self:any) { 9 | var tail = text.slice(pos); 10 | 11 | if (!self.re.twitter) { 12 | self.re.twitter = new RegExp( 13 | "^([a-zA-Z0-9_]){1,15}(?!_)(?=$|" + self.re.src_ZPCc + ")" 14 | ); 15 | } 16 | if (self.re.twitter.test(tail)) { 17 | 18 | if (pos >= 2 && tail[pos - 2] === "@") { 19 | return false; 20 | } 21 | return tail.match(self.re.twitter)[0].length; 22 | } 23 | return 0; 24 | }, 25 | normalize: () => {} 26 | }) 27 | .add("#", { 28 | validate: function(text:any, pos:any, self:any) { 29 | var tail = text.slice(pos); 30 | 31 | if (!self.re.twitter) { 32 | self.re.twitter = new RegExp( 33 | "^([a-zA-Z0-9_]){1,30}(?!_)(?=$|" + self.re.src_ZPCc + ")" 34 | ); 35 | } 36 | if (self.re.twitter.test(tail)) { 37 | // Linkifier allows punctuation chars before prefix, 38 | // but we additionally disable `@` ("@@mention" is invalid) 39 | if (pos >= 2 && tail[pos - 2] === "#") { 40 | return false; 41 | } 42 | return tail.match(self.re.twitter)[0].length; 43 | } 44 | return 0; 45 | }, 46 | normalize: () => {} 47 | }); 48 | 49 | export function generateHiperlinkText(text:any) { 50 | return ( 51 | 55 | {text} 56 | 57 | ); 58 | } 59 | 60 | export function generateHiperlinkTextWithTime(text:any,time:string) { 61 | return ( 62 | 66 | {text} 67 | 68 | ); 69 | } 70 | -------------------------------------------------------------------------------- /src/utils/theme.ts: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | darkBlue: "#3897f0", 3 | fullDarkBlue: "#15568b", 4 | lightBlue: "#5851DB", 5 | turkois: "#833AB4", 6 | lightRed: "#E1306C", 7 | extraLightRed: "#C13584", 8 | extraLightRedFiltered: `rgba(193,53,132,0.2)`, 9 | orangeDark: "#F56040", 10 | orangeLight: "#F77737", 11 | yellowDark: "#FCAF45", 12 | yellowLight: "#FFDC80", 13 | transparent:'`rgba(100, 100, 100,0)`', 14 | extraLightBlue: `rgba(53,120,229,0.08)`, 15 | dark_gray: "#657786", 16 | light_gray: "#AAB8C2", 17 | exlight_gray: "#E1E8ED", 18 | exexlight_gray: "#F5F8FA", 19 | white: "#FFF", 20 | darkRed: '#e92f3c', 21 | black: "#000000", 22 | blackFilter70: `rgba(0,0,0,0.8)`, 23 | blackFilter90: `rgba(0,0,0,0.3)` 24 | }; 25 | 26 | 27 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | // "incremental": true, /* Enable incremental compilation */ 5 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | "lib": ["dom", "esnext"], /* Specify library files to be included in the compilation. */ 8 | // "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | "jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | // "outDir": "./", /* Redirect output structure to the directory. */ 16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 52 | 53 | /* Source Map Options */ 54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 58 | 59 | /* Experimental Options */ 60 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 62 | "baseUrl": ".", 63 | "paths": { 64 | "~/*": [ 65 | "./src/*" 66 | ] 67 | } 68 | } 69 | } 70 | --------------------------------------------------------------------------------