├── .buckconfig ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .watchmanconfig ├── App.tsx ├── README.md ├── __tests__ └── App-test.tsx ├── _prettierrc.js ├── android ├── app │ ├── _BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── 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 │ │ │ ├── SimpleLineIcons.ttf │ │ │ └── Zocial.ttf │ │ ├── java │ │ └── com │ │ │ └── facebookui │ │ │ ├── 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 ├── Podfile ├── Podfile.lock ├── facebookUI-tvOS │ └── Info.plist ├── facebookUI-tvOSTests │ └── Info.plist ├── facebookUI.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ ├── facebookUI-tvOS.xcscheme │ │ └── facebookUI.xcscheme ├── facebookUI.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── IDEWorkspaceChecks.plist ├── facebookUI │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Base.lproj │ │ └── LaunchScreen.xib │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ └── main.m └── facebookUITests │ ├── Info.plist │ └── facebookUITests.m ├── metro.config.js ├── package-lock.json ├── package.json ├── src ├── assets │ ├── images │ │ ├── ic1.png │ │ ├── ic10.png │ │ ├── ic2.png │ │ ├── ic3.png │ │ ├── ic4.png │ │ ├── ic5.png │ │ ├── ic6.png │ │ ├── ic7.png │ │ ├── ic8.png │ │ ├── photo1.png │ │ ├── photo2.png │ │ ├── photo3.png │ │ ├── photo4.png │ │ ├── photo5.png │ │ ├── photo6.png │ │ ├── photo7.png │ │ ├── post1.png │ │ ├── post2.png │ │ ├── post3.png │ │ ├── post4.png │ │ ├── post5.png │ │ ├── post6.png │ │ ├── post7.png │ │ ├── post8.png │ │ └── post9.png │ └── svg │ │ ├── camera.svg │ │ ├── camera_black.svg │ │ ├── comment.svg │ │ ├── edit.svg │ │ ├── list.svg │ │ ├── live.svg │ │ ├── location.svg │ │ ├── logo.svg │ │ ├── more.svg │ │ ├── picture.svg │ │ ├── play.svg │ │ ├── play_video.svg │ │ ├── share.svg │ │ └── thumb-up.svg ├── components │ ├── AvatarInput │ │ └── index.tsx │ ├── CameraButton │ │ └── index.tsx │ ├── ParallaxBackground │ │ └── index.tsx │ ├── ParallaxScrollView │ │ └── index.tsx │ ├── PostItem │ │ └── index.tsx │ ├── ProfileHeader │ │ └── index.tsx │ ├── ProfileInfos │ │ ├── FriendList │ │ │ ├── ProfileFriendItem │ │ │ │ └── index.tsx │ │ │ └── index.tsx │ │ ├── PhotoList │ │ │ ├── ProfilePhotoItem │ │ │ │ └── index.tsx │ │ │ └── index.tsx │ │ └── index.tsx │ ├── RoundedActionButton │ │ └── index.tsx │ ├── icons │ │ └── Logo.tsx │ ├── separator │ │ └── index.tsx │ └── storyItems │ │ ├── index.tsx │ │ └── storyItem │ │ └── index.tsx ├── containers │ └── hoc │ │ └── AuxHOC.tsx ├── navigation │ └── navigation.tsx ├── screens │ ├── Home │ │ └── index.tsx │ ├── Intro │ │ └── index.tsx │ └── Profile │ │ ├── index.tsx │ │ └── userInfo.tsx ├── screenshot │ ├── Demo1.png │ ├── Demo2.png │ └── Facebook.png ├── test.html ├── utils.tsx └── utils │ ├── avatars.tsx │ ├── photoItems.tsx │ └── posts.tsx ├── 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 | 48 | # fastlane 49 | # 50 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 51 | # screenshots whenever they are needed. 52 | # For more information about the recommended setup visit: 53 | # https://docs.fastlane.tools/best-practices/source-control/ 54 | 55 | */fastlane/report.xml 56 | */fastlane/Preview.html 57 | */fastlane/screenshots 58 | 59 | # Bundle artifact 60 | *.jsbundle 61 | 62 | # CocoaPods 63 | /ios/Pods/ 64 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import AppNavigator from "./src/navigation/navigation"; 4 | 5 | const App = () => { 6 | return ( 7 | 8 | ) 9 | }; 10 | 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Facebook-React-native 2 | Facebook UI Design made with React-native. 3 | Design found here => https://www.uplabs.com/posts/facebook-mobile-app-uplabs-design-challenge 4 | 5 | ### Design 6 | ![App-design](./src/screenshot/Facebook.png) 7 | 8 | 9 | ## implementation (Home) 10 | ![App-demo](./src/screenshot/Demo1.png) 11 | 12 | ## implementation (Profile) 13 | ![App-demo](./src/screenshot/Demo2.png) 14 | 15 | 16 | ### Dependencies 17 | 18 | - React Native (With Typescript) 19 | - React native elements 20 | - React Navigation 21 | 22 | ## Get Started 23 | 24 | #### 1. Clone the Repo 25 | 26 | On the command prompt run the following commands 27 | ```sh 28 | $ git clone https://github.com/Doha26/Facebook-React-native.git 29 | 30 | $ cd facebookUI 31 | 32 | $ npm install 33 | 34 | $ cd ios && pod install && cd.. 35 | 36 | $ react-native run-ios 37 | 38 | ``` 39 | 40 | ## Author 41 | 42 | * [Pavel Foujeu](mailto:foujeupavel@gmail.com) 43 | 44 | ## Done with React-native 45 | 46 | * [Instagram clone](https://github.com/Doha26/InstagramClone) 47 | -------------------------------------------------------------------------------- /__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.facebookui", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.facebookui", 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.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format 22 | * bundleCommand: "ram-bundle", 23 | * 24 | * // whether to bundle JS and assets in debug mode 25 | * bundleInDebug: false, 26 | * 27 | * // whether to bundle JS and assets in release mode 28 | * bundleInRelease: true, 29 | * 30 | * // whether to bundle JS and assets in another build variant (if configured). 31 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 32 | * // The configuration property can be in the following formats 33 | * // 'bundleIn${productFlavor}${buildType}' 34 | * // 'bundleIn${buildType}' 35 | * // bundleInFreeDebug: true, 36 | * // bundleInPaidRelease: true, 37 | * // bundleInBeta: true, 38 | * 39 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 40 | * // for example: to disable dev mode in the staging build type (if configured) 41 | * devDisabledInStaging: true, 42 | * // The configuration property can be in the following formats 43 | * // 'devDisabledIn${productFlavor}${buildType}' 44 | * // 'devDisabledIn${buildType}' 45 | * 46 | * // the root of your project, i.e. where "package.json" lives 47 | * root: "../../", 48 | * 49 | * // where to put the JS bundle asset in debug mode 50 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 51 | * 52 | * // where to put the JS bundle asset in release mode 53 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 54 | * 55 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 56 | * // require('./image.png')), in debug mode 57 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 58 | * 59 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 60 | * // require('./image.png')), in release mode 61 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 62 | * 63 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 64 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 65 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 66 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 67 | * // for example, you might want to remove it from here. 68 | * inputExcludes: ["android/**", "ios/**"], 69 | * 70 | * // override which node gets called and with what additional arguments 71 | * nodeExecutableAndArgs: ["node"], 72 | * 73 | * // supply additional arguments to the packager 74 | * extraPackagerArgs: [] 75 | * ] 76 | */ 77 | 78 | project.ext.react = [ 79 | entryFile: "index.tsx", 80 | enableHermes: false, // clean and rebuild if changing 81 | ] 82 | 83 | apply from: "../../node_modules/react-native/react.gradle" 84 | 85 | /** 86 | * Set this to true to create two separate APKs instead of one: 87 | * - An APK that only works on ARM devices 88 | * - An APK that only works on x86 devices 89 | * The advantage is the size of the APK is reduced by about 4MB. 90 | * Upload all the APKs to the Play Store and people will download 91 | * the correct one based on the CPU architecture of their device. 92 | */ 93 | def enableSeparateBuildPerCPUArchitecture = false 94 | 95 | /** 96 | * Run Proguard to shrink the Java bytecode in release builds. 97 | */ 98 | def enableProguardInReleaseBuilds = false 99 | 100 | /** 101 | * The preferred build flavor of JavaScriptCore. 102 | * 103 | * For example, to use the international variant, you can use: 104 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 105 | * 106 | * The international variant includes ICU i18n library and necessary data 107 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 108 | * give correct results when using with locales other than en-US. Note that 109 | * this variant is about 6MiB larger per architecture than default. 110 | */ 111 | def jscFlavor = 'org.webkit:android-jsc:+' 112 | 113 | /** 114 | * Whether to enable the Hermes VM. 115 | * 116 | * This should be set on project.ext.react and mirrored here. If it is not set 117 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode 118 | * and the benefits of using Hermes will therefore be sharply reduced. 119 | */ 120 | def enableHermes = project.ext.react.get("enableHermes", false); 121 | 122 | android { 123 | compileSdkVersion rootProject.ext.compileSdkVersion 124 | 125 | compileOptions { 126 | sourceCompatibility JavaVersion.VERSION_1_8 127 | targetCompatibility JavaVersion.VERSION_1_8 128 | } 129 | 130 | defaultConfig { 131 | applicationId "com.facebookui" 132 | minSdkVersion rootProject.ext.minSdkVersion 133 | targetSdkVersion rootProject.ext.targetSdkVersion 134 | versionCode 1 135 | versionName "1.0" 136 | } 137 | splits { 138 | abi { 139 | reset() 140 | enable enableSeparateBuildPerCPUArchitecture 141 | universalApk false // If true, also generate a universal APK 142 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" 143 | } 144 | } 145 | signingConfigs { 146 | debug { 147 | storeFile file('debug.keystore') 148 | storePassword 'android' 149 | keyAlias 'androiddebugkey' 150 | keyPassword 'android' 151 | } 152 | } 153 | buildTypes { 154 | debug { 155 | signingConfig signingConfigs.debug 156 | } 157 | release { 158 | // Caution! In production, you need to generate your own keystore file. 159 | // see https://facebook.github.io/react-native/docs/signed-apk-android. 160 | signingConfig signingConfigs.debug 161 | minifyEnabled enableProguardInReleaseBuilds 162 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 163 | } 164 | } 165 | // applicationVariants are e.g. debug, release 166 | applicationVariants.all { variant -> 167 | variant.outputs.each { output -> 168 | // For each separate APK per architecture, set a unique version code as described here: 169 | // https://developer.android.com/studio/build/configure-apk-splits.html 170 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 171 | def abi = output.getFilter(OutputFile.ABI) 172 | if (abi != null) { // null for the universal-debug, universal-release variants 173 | output.versionCodeOverride = 174 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 175 | } 176 | 177 | } 178 | } 179 | 180 | packagingOptions { 181 | pickFirst '**/armeabi-v7a/libc++_shared.so' 182 | pickFirst '**/x86/libc++_shared.so' 183 | pickFirst '**/arm64-v8a/libc++_shared.so' 184 | pickFirst '**/x86_64/libc++_shared.so' 185 | pickFirst '**/x86/libjsc.so' 186 | pickFirst '**/armeabi-v7a/libjsc.so' 187 | } 188 | } 189 | 190 | dependencies { 191 | implementation project(':react-native-video') 192 | implementation project(':react-native-camera') 193 | implementation project(':react-native-vector-icons') 194 | implementation fileTree(dir: "libs", include: ["*.jar"]) 195 | implementation "com.facebook.react:react-native:+" // From node_modules 196 | 197 | if (enableHermes) { 198 | def hermesPath = "../../node_modules/hermesvm/android/"; 199 | debugImplementation files(hermesPath + "hermes-debug.aar") 200 | releaseImplementation files(hermesPath + "hermes-release.aar") 201 | } else { 202 | implementation jscFlavor 203 | } 204 | } 205 | 206 | // Run this once to be able to run the application with BUCK 207 | // puts all compile dependencies into folder libs for BUCK to use 208 | task copyDownloadableDepsToLibs(type: Copy) { 209 | from configurations.compile 210 | into 'libs' 211 | } 212 | 213 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 214 | -------------------------------------------------------------------------------- /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/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 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/AntDesign.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/AntDesign.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/Entypo.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/Feather.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Fontisto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/Fontisto.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/Foundation.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/Ionicons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/Octicons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/android/app/src/main/assets/fonts/Zocial.ttf -------------------------------------------------------------------------------- /android/app/src/main/java/com/facebookui/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.facebookui; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "facebookUI"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/facebookui/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.facebookui; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.PackageList; 7 | import com.facebook.hermes.reactexecutor.HermesExecutorFactory; 8 | import com.facebook.react.bridge.JavaScriptExecutorFactory; 9 | import com.facebook.react.ReactApplication; 10 | import com.brentvatne.react.ReactVideoPackage; 11 | import org.reactnative.camera.RNCameraPackage; 12 | import com.oblador.vectoricons.VectorIconsPackage; 13 | import com.facebook.react.ReactNativeHost; 14 | import com.facebook.react.ReactPackage; 15 | import com.facebook.soloader.SoLoader; 16 | 17 | import java.util.List; 18 | 19 | public class MainApplication extends Application implements ReactApplication { 20 | 21 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 22 | @Override 23 | public boolean getUseDeveloperSupport() { 24 | return BuildConfig.DEBUG; 25 | } 26 | 27 | @Override 28 | protected List getPackages() { 29 | @SuppressWarnings("UnnecessaryLocalVariable") 30 | List packages = new PackageList(this).getPackages(); 31 | // Packages that cannot be autolinked yet can be added manually here, for example: 32 | // packages.add(new MyReactNativePackage()); 33 | return packages; 34 | } 35 | 36 | @Override 37 | protected String getJSMainModuleName() { 38 | return "index"; 39 | } 40 | }; 41 | 42 | @Override 43 | public ReactNativeHost getReactNativeHost() { 44 | return mReactNativeHost; 45 | } 46 | 47 | @Override 48 | public void onCreate() { 49 | super.onCreate(); 50 | SoLoader.init(this, /* native exopackage */ false); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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 | supportLibVersion = "28.0.0" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle:3.4.1") 17 | 18 | // NOTE: Do not place your application dependencies here; they belong 19 | // in the individual module build.gradle files 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | 35 | google() 36 | jcenter() 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/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/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.4.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # http://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | # Determine the Java command to use to start the JVM. 86 | if [ -n "$JAVA_HOME" ] ; then 87 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 88 | # IBM's JDK on AIX uses strange locations for the executables 89 | JAVACMD="$JAVA_HOME/jre/sh/java" 90 | else 91 | JAVACMD="$JAVA_HOME/bin/java" 92 | fi 93 | if [ ! -x "$JAVACMD" ] ; then 94 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 95 | 96 | Please set the JAVA_HOME variable in your environment to match the 97 | location of your Java installation." 98 | fi 99 | else 100 | JAVACMD="java" 101 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 102 | 103 | Please set the JAVA_HOME variable in your environment to match the 104 | location of your Java installation." 105 | fi 106 | 107 | # Increase the maximum file descriptors if we can. 108 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 109 | MAX_FD_LIMIT=`ulimit -H -n` 110 | if [ $? -eq 0 ] ; then 111 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 112 | MAX_FD="$MAX_FD_LIMIT" 113 | fi 114 | ulimit -n $MAX_FD 115 | if [ $? -ne 0 ] ; then 116 | warn "Could not set maximum file descriptor limit: $MAX_FD" 117 | fi 118 | else 119 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 120 | fi 121 | fi 122 | 123 | # For Darwin, add options to specify how the application appears in the dock 124 | if $darwin; then 125 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 126 | fi 127 | 128 | # For Cygwin, switch paths to Windows format before running java 129 | if $cygwin ; then 130 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 131 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 132 | JAVACMD=`cygpath --unix "$JAVACMD"` 133 | 134 | # We build the pattern for arguments to be converted via cygpath 135 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 136 | SEP="" 137 | for dir in $ROOTDIRSRAW ; do 138 | ROOTDIRS="$ROOTDIRS$SEP$dir" 139 | SEP="|" 140 | done 141 | OURCYGPATTERN="(^($ROOTDIRS))" 142 | # Add a user-defined pattern to the cygpath arguments 143 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 144 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 145 | fi 146 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 147 | i=0 148 | for arg in "$@" ; do 149 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 150 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 151 | 152 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 153 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 154 | else 155 | eval `echo args$i`="\"$arg\"" 156 | fi 157 | i=$((i+1)) 158 | done 159 | case $i in 160 | (0) set -- ;; 161 | (1) set -- "$args0" ;; 162 | (2) set -- "$args0" "$args1" ;; 163 | (3) set -- "$args0" "$args1" "$args2" ;; 164 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 165 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 166 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 167 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 168 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 169 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 170 | esac 171 | fi 172 | 173 | # Escape application args 174 | save () { 175 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 176 | echo " " 177 | } 178 | APP_ARGS=$(save "$@") 179 | 180 | # Collect all arguments for the java command, following the shell quoting and substitution rules 181 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 182 | 183 | # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong 184 | if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then 185 | cd "$(dirname "$0")" 186 | fi 187 | 188 | exec "$JAVACMD" "$@" 189 | -------------------------------------------------------------------------------- /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 = 'facebookUI' 2 | include ':react-native-video' 3 | project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android') 4 | include ':react-native-camera' 5 | project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android') 6 | include ':react-native-vector-icons' 7 | project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') 8 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 9 | include ':app' 10 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "facebookUI", 3 | "displayName": "facebookUI" 4 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /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/Podfile: -------------------------------------------------------------------------------- 1 | platform :ios, '9.0' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | target 'facebookUI' do 5 | # Pods for facebookUI 6 | pod 'React', :path => '../node_modules/react-native/' 7 | pod 'React-Core', :path => '../node_modules/react-native/React' 8 | pod 'React-DevSupport', :path => '../node_modules/react-native/React' 9 | pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS' 10 | pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation' 11 | pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob' 12 | pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image' 13 | pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS' 14 | pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network' 15 | pod 'React-RCTSettings', :path => '../nde_modules/react-native/Libraries/Settings' 16 | pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text' 17 | pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration' 18 | pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket' 19 | 20 | pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact' 21 | pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi' 22 | pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor' 23 | pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector' 24 | pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' 25 | 26 | pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' 27 | pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' 28 | pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' 29 | 30 | pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' 31 | 32 | pod 'react-native-camera', :path => '../node_modules/react-native-camera' 33 | 34 | pod 'react-native-video', :path => '../node_modules/react-native-video' 35 | 36 | target 'facebookUITests' do 37 | inherit! :search_paths 38 | # Pods for testing 39 | end 40 | 41 | use_native_modules! 42 | end 43 | 44 | target 'facebookUI-tvOS' do 45 | # Pods for facebookUI-tvOS 46 | 47 | target 'facebookUI-tvOSTests' do 48 | inherit! :search_paths 49 | # Pods for testing 50 | end 51 | 52 | end 53 | -------------------------------------------------------------------------------- /ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost-for-react-native (1.63.0) 3 | - DoubleConversion (1.1.6) 4 | - Folly (2018.10.22.00): 5 | - boost-for-react-native 6 | - DoubleConversion 7 | - Folly/Default (= 2018.10.22.00) 8 | - glog 9 | - Folly/Default (2018.10.22.00): 10 | - boost-for-react-native 11 | - DoubleConversion 12 | - glog 13 | - glog (0.3.5) 14 | - React (0.60.5): 15 | - React-Core (= 0.60.5) 16 | - React-DevSupport (= 0.60.5) 17 | - React-RCTActionSheet (= 0.60.5) 18 | - React-RCTAnimation (= 0.60.5) 19 | - React-RCTBlob (= 0.60.5) 20 | - React-RCTImage (= 0.60.5) 21 | - React-RCTLinking (= 0.60.5) 22 | - React-RCTNetwork (= 0.60.5) 23 | - React-RCTSettings (= 0.60.5) 24 | - React-RCTText (= 0.60.5) 25 | - React-RCTVibration (= 0.60.5) 26 | - React-RCTWebSocket (= 0.60.5) 27 | - React-Core (0.60.5): 28 | - Folly (= 2018.10.22.00) 29 | - React-cxxreact (= 0.60.5) 30 | - React-jsiexecutor (= 0.60.5) 31 | - yoga (= 0.60.5.React) 32 | - React-cxxreact (0.60.5): 33 | - boost-for-react-native (= 1.63.0) 34 | - DoubleConversion 35 | - Folly (= 2018.10.22.00) 36 | - glog 37 | - React-jsinspector (= 0.60.5) 38 | - React-DevSupport (0.60.5): 39 | - React-Core (= 0.60.5) 40 | - React-RCTWebSocket (= 0.60.5) 41 | - React-jsi (0.60.5): 42 | - boost-for-react-native (= 1.63.0) 43 | - DoubleConversion 44 | - Folly (= 2018.10.22.00) 45 | - glog 46 | - React-jsi/Default (= 0.60.5) 47 | - React-jsi/Default (0.60.5): 48 | - boost-for-react-native (= 1.63.0) 49 | - DoubleConversion 50 | - Folly (= 2018.10.22.00) 51 | - glog 52 | - React-jsiexecutor (0.60.5): 53 | - DoubleConversion 54 | - Folly (= 2018.10.22.00) 55 | - glog 56 | - React-cxxreact (= 0.60.5) 57 | - React-jsi (= 0.60.5) 58 | - React-jsinspector (0.60.5) 59 | - React-RCTActionSheet (0.60.5): 60 | - React-Core (= 0.60.5) 61 | - React-RCTAnimation (0.60.5): 62 | - React-Core (= 0.60.5) 63 | - React-RCTBlob (0.60.5): 64 | - React-Core (= 0.60.5) 65 | - React-RCTNetwork (= 0.60.5) 66 | - React-RCTWebSocket (= 0.60.5) 67 | - React-RCTImage (0.60.5): 68 | - React-Core (= 0.60.5) 69 | - React-RCTNetwork (= 0.60.5) 70 | - React-RCTLinking (0.60.5): 71 | - React-Core (= 0.60.5) 72 | - React-RCTNetwork (0.60.5): 73 | - React-Core (= 0.60.5) 74 | - React-RCTSettings (0.60.5): 75 | - React-Core (= 0.60.5) 76 | - React-RCTText (0.60.5): 77 | - React-Core (= 0.60.5) 78 | - React-RCTVibration (0.60.5): 79 | - React-Core (= 0.60.5) 80 | - React-RCTWebSocket (0.60.5): 81 | - React-Core (= 0.60.5) 82 | - RNGestureHandler (1.4.1): 83 | - React 84 | - RNReanimated (1.2.0): 85 | - React 86 | - RNScreens (2.0.0-alpha.3): 87 | - React 88 | - RNSVG (9.9.4): 89 | - React 90 | - yoga (0.60.5.React) 91 | 92 | DEPENDENCIES: 93 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 94 | - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`) 95 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 96 | - React (from `../node_modules/react-native/`) 97 | - React-Core (from `../node_modules/react-native/React`) 98 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 99 | - React-DevSupport (from `../node_modules/react-native/React`) 100 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 101 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 102 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) 103 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 104 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 105 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 106 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 107 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 108 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 109 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 110 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 111 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 112 | - React-RCTWebSocket (from `../node_modules/react-native/Libraries/WebSocket`) 113 | - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) 114 | - RNReanimated (from `../node_modules/react-native-reanimated`) 115 | - RNScreens (from `../node_modules/react-native-screens`) 116 | - RNSVG (from `../node_modules/react-native-svg`) 117 | - yoga (from `../node_modules/react-native/ReactCommon/yoga`) 118 | 119 | SPEC REPOS: 120 | https://github.com/cocoapods/specs.git: 121 | - boost-for-react-native 122 | 123 | EXTERNAL SOURCES: 124 | DoubleConversion: 125 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 126 | Folly: 127 | :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec" 128 | glog: 129 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 130 | React: 131 | :path: "../node_modules/react-native/" 132 | React-Core: 133 | :path: "../node_modules/react-native/React" 134 | React-cxxreact: 135 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 136 | React-DevSupport: 137 | :path: "../node_modules/react-native/React" 138 | React-jsi: 139 | :path: "../node_modules/react-native/ReactCommon/jsi" 140 | React-jsiexecutor: 141 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 142 | React-jsinspector: 143 | :path: "../node_modules/react-native/ReactCommon/jsinspector" 144 | React-RCTActionSheet: 145 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 146 | React-RCTAnimation: 147 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 148 | React-RCTBlob: 149 | :path: "../node_modules/react-native/Libraries/Blob" 150 | React-RCTImage: 151 | :path: "../node_modules/react-native/Libraries/Image" 152 | React-RCTLinking: 153 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 154 | React-RCTNetwork: 155 | :path: "../node_modules/react-native/Libraries/Network" 156 | React-RCTSettings: 157 | :path: "../node_modules/react-native/Libraries/Settings" 158 | React-RCTText: 159 | :path: "../node_modules/react-native/Libraries/Text" 160 | React-RCTVibration: 161 | :path: "../node_modules/react-native/Libraries/Vibration" 162 | React-RCTWebSocket: 163 | :path: "../node_modules/react-native/Libraries/WebSocket" 164 | RNGestureHandler: 165 | :path: "../node_modules/react-native-gesture-handler" 166 | RNReanimated: 167 | :path: "../node_modules/react-native-reanimated" 168 | RNScreens: 169 | :path: "../node_modules/react-native-screens" 170 | RNSVG: 171 | :path: "../node_modules/react-native-svg" 172 | yoga: 173 | :path: "../node_modules/react-native/ReactCommon/yoga" 174 | 175 | SPEC CHECKSUMS: 176 | boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c 177 | DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2 178 | Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51 179 | glog: 1f3da668190260b06b429bb211bfbee5cd790c28 180 | React: c438ccc7e14e86d4702bb92d7e262f549ffaa995 181 | React-Core: c76495f5c14e73c0f803b89c3fa83f804da61bd6 182 | React-cxxreact: f64bc64cf4682d6ea5a064f6017da72482858682 183 | React-DevSupport: 30336bca00f72681eac995d21a31b963e7d5cfec 184 | React-jsi: 40f467ff088c811c6630acccb4aea57ea7ccb1b5 185 | React-jsiexecutor: e4b4717060a0cd8d0270323b5655a68c95432efd 186 | React-jsinspector: 044105eea064aec81adc5e4d777a8f6589e7d094 187 | React-RCTActionSheet: 08864c609d9f959abf3d51fdd93f8bc6e91f21eb 188 | React-RCTAnimation: a4547e9fac2627ded3df9d302f5558b475faf819 189 | React-RCTBlob: 62d5c263a2adb8f7a2cafd601beba18a2d99cbbb 190 | React-RCTImage: 963859de2b05d2037d1b7842cdbddc8d7f3a2f3b 191 | React-RCTLinking: 5998a7db9a6156ed112b006d01f76b2d1cc83d98 192 | React-RCTNetwork: 0b676e8194f3f893db813007d37e37e9820173a3 193 | React-RCTSettings: fdd7606f1b6050eced69fc6046d5db6768aefd57 194 | React-RCTText: 36c0532feb5521cb295ba80e7e44b70cf1c36fc7 195 | React-RCTVibration: dabb8d59bb47e1d9124b3f77bfdc1b33d42b0a74 196 | React-RCTWebSocket: 2e7f6e98fd6d2bf447d145e499c3a235cc13e350 197 | RNGestureHandler: 311e3b1cef021a7c9ef31e97e7dc31970cc6288d 198 | RNReanimated: 9f7976535c5cde50189acd84751871f5414190b9 199 | RNScreens: 354046589421edc3d83d5c6212475bf1fb9a731d 200 | RNSVG: 2e097b92aaa6d4e0f354fd7c49cbf3b17f8b3920 201 | yoga: 88c514f310aff89b94a14c5fbf44b95735af0cb7 202 | 203 | PODFILE CHECKSUM: 89f9deb1c050b6ae1e6bec212d5db30a46c22e13 204 | 205 | COCOAPODS: 1.5.3 206 | -------------------------------------------------------------------------------- /ios/facebookUI-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/facebookUI-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/facebookUI.xcodeproj/xcshareddata/xcschemes/facebookUI-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/facebookUI.xcodeproj/xcshareddata/xcschemes/facebookUI.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/facebookUI.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/facebookUI.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/facebookUI/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/facebookUI/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:@"facebookUI" 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/facebookUI/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /ios/facebookUI/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /ios/facebookUI/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /ios/facebookUI/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | Hello App Display Name 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 | 42 | UILaunchStoryboardName 43 | LaunchScreen 44 | UIRequiredDeviceCapabilities 45 | 46 | armv7 47 | 48 | UISupportedInterfaceOrientations 49 | 50 | UIInterfaceOrientationPortrait 51 | UIInterfaceOrientationLandscapeLeft 52 | UIInterfaceOrientationLandscapeRight 53 | 54 | UIViewControllerBasedStatusBarAppearance 55 | 56 | UIAppFonts 57 | 58 | AntDesign.ttf 59 | Entypo.ttf 60 | EvilIcons.ttf 61 | Feather.ttf 62 | FontAwesome.ttf 63 | FontAwesome5_Brands.ttf 64 | FontAwesome5_Regular.ttf 65 | FontAwesome5_Solid.ttf 66 | Fontisto.ttf 67 | Foundation.ttf 68 | Ionicons.ttf 69 | MaterialCommunityIcons.ttf 70 | MaterialIcons.ttf 71 | Octicons.ttf 72 | SimpleLineIcons.ttf 73 | Zocial.ttf 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /ios/facebookUI/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/facebookUITests/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/facebookUITests/facebookUITests.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 Native!" 16 | 17 | @interface facebookUITests : XCTestCase 18 | 19 | @end 20 | 21 | @implementation facebookUITests 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 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 44 | if (level >= RCTLogLevelError) { 45 | redboxError = message; 46 | } 47 | }); 48 | 49 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 50 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 51 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 52 | 53 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 54 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 55 | return YES; 56 | } 57 | return NO; 58 | }]; 59 | } 60 | 61 | RCTSetLogFunction(RCTDefaultLogFunction); 62 | 63 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 64 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 65 | } 66 | 67 | 68 | @end 69 | -------------------------------------------------------------------------------- /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": "facebookUI", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "react-native start", 7 | "test": "jest", 8 | "lint": "tslint --project tsconfig.json" 9 | }, 10 | "dependencies": { 11 | "@types/react-native-video": "^3.1.5", 12 | "link": "^0.1.5", 13 | "react": "16.8.6", 14 | "react-native": "^0.60.5", 15 | "react-native-camera": "^3.4.0", 16 | "react-native-elements": "^1.2.0", 17 | "react-native-gesture-handler": "^1.4.1", 18 | "react-native-reanimated": "^1.2.0", 19 | "react-native-screens": "^2.0.0-alpha.3", 20 | "react-native-svg": "^9.9.4", 21 | "react-native-svg-uri": "^1.2.3", 22 | "react-native-vector-icons": "^6.6.0", 23 | "react-native-video": "^5.0.2", 24 | "react-native-video-controls": "^2.2.3", 25 | "react-native-view-more-text": "^2.1.0", 26 | "react-navigation": "^4.0.5", 27 | "react-navigation-stack": "^1.8.0" 28 | }, 29 | "devDependencies": { 30 | "@babel/core": "^7.5.0", 31 | "@babel/runtime": "^7.5.0", 32 | "@react-native-community/eslint-config": "^0.0.3", 33 | "@types/jest": "^24.0.18", 34 | "@types/react": "^16.9.2", 35 | "@types/react-native": "^0.60.14", 36 | "@types/react-test-renderer": "^16.9.0", 37 | "babel-jest": "^24.1.0", 38 | "create-react-class": "^15.6.3", 39 | "jest": "^24.1.0", 40 | "metro-react-native-babel-preset": "0.54.1", 41 | "react-test-renderer": "16.8.6", 42 | "typescript": "^3.6.3" 43 | }, 44 | "jest": { 45 | "preset": "react-native", 46 | "moduleFileExtensions": [ 47 | "ts", 48 | "tsx", 49 | "js", 50 | "jsx", 51 | "json", 52 | "node" 53 | ] 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/assets/images/ic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/ic1.png -------------------------------------------------------------------------------- /src/assets/images/ic10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/ic10.png -------------------------------------------------------------------------------- /src/assets/images/ic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/ic2.png -------------------------------------------------------------------------------- /src/assets/images/ic3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/ic3.png -------------------------------------------------------------------------------- /src/assets/images/ic4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/ic4.png -------------------------------------------------------------------------------- /src/assets/images/ic5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/ic5.png -------------------------------------------------------------------------------- /src/assets/images/ic6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/ic6.png -------------------------------------------------------------------------------- /src/assets/images/ic7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/ic7.png -------------------------------------------------------------------------------- /src/assets/images/ic8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/ic8.png -------------------------------------------------------------------------------- /src/assets/images/photo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/photo1.png -------------------------------------------------------------------------------- /src/assets/images/photo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/photo2.png -------------------------------------------------------------------------------- /src/assets/images/photo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/photo3.png -------------------------------------------------------------------------------- /src/assets/images/photo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/photo4.png -------------------------------------------------------------------------------- /src/assets/images/photo5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/photo5.png -------------------------------------------------------------------------------- /src/assets/images/photo6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/photo6.png -------------------------------------------------------------------------------- /src/assets/images/photo7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/photo7.png -------------------------------------------------------------------------------- /src/assets/images/post1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/post1.png -------------------------------------------------------------------------------- /src/assets/images/post2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/post2.png -------------------------------------------------------------------------------- /src/assets/images/post3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/post3.png -------------------------------------------------------------------------------- /src/assets/images/post4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/post4.png -------------------------------------------------------------------------------- /src/assets/images/post5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/post5.png -------------------------------------------------------------------------------- /src/assets/images/post6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/post6.png -------------------------------------------------------------------------------- /src/assets/images/post7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/post7.png -------------------------------------------------------------------------------- /src/assets/images/post8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/post8.png -------------------------------------------------------------------------------- /src/assets/images/post9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/assets/images/post9.png -------------------------------------------------------------------------------- /src/assets/svg/camera.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/camera_black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/comment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/svg/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /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/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /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/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/AvatarInput/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | TextInput, TouchableOpacity, 6 | } from "react-native"; 7 | import {Avatar} from "react-native-elements"; 8 | import {colors} from "../../utils"; 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 | const styles = StyleSheet.create({ 33 | mainContainer:{ 34 | flex:1, 35 | flexDirection:'row', 36 | height: 68, 37 | borderRadius: 34, 38 | borderColor: colors.exlight_gray, 39 | borderWidth: 2 40 | }, 41 | inputZone:{ 42 | flexDirection:'row', 43 | flex:1, 44 | padding:20 45 | }, 46 | avatarStyle:{ 47 | width:36, 48 | height:36, 49 | alignSelf:'center', 50 | borderRadius: 18 51 | }, 52 | inputStyle:{ 53 | fontSize:17, 54 | fontWeight:"400", 55 | marginLeft:20, padding:3 56 | } 57 | }); 58 | 59 | -------------------------------------------------------------------------------- /src/components/CameraButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | TouchableOpacity, View, 4 | StyleSheet 5 | } from "react-native"; 6 | import {colors} from "../../utils"; 7 | import SvgUri from "react-native-svg-uri"; 8 | 9 | const RoundedImageCamera: React.StatelessComponent = () => { 10 | 11 | return ( 12 | alert('You are trying to open Camera')}> 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | }; 21 | 22 | const styles = StyleSheet.create({ 23 | container: { 24 | height: 72, 25 | flexDirection: 'column', 26 | width: 72, 27 | borderRadius: 36, 28 | borderColor: colors.light_gray, 29 | borderWidth: 2, 30 | justifyContent: 'center', 31 | alignItems:'center', 32 | }, 33 | child:{ 34 | height: 62, 35 | justifyContent:'center', 36 | width: 62, 37 | flexDirection:'row', 38 | backgroundColor:colors.darkBlue, 39 | borderRadius: 31 40 | }, 41 | buttonImage:{ 42 | width:32, 43 | height:32, 44 | justifyContent: 'center', 45 | alignItems:'center', 46 | flexDirection:'column', 47 | alignSelf:'center' 48 | } 49 | }); 50 | 51 | export default RoundedImageCamera; 52 | -------------------------------------------------------------------------------- /src/components/ParallaxBackground/index.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import React from 'react'; 3 | import { Image } from 'react-native'; 4 | 5 | const ParallaxBackground : React.StatelessComponent = (props:any) => { 6 | return ( 7 | 17 | ); 18 | }; 19 | export default ParallaxBackground; 20 | -------------------------------------------------------------------------------- /src/components/ParallaxScrollView/index.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import React, { Component } from 'react'; 3 | import { View, Animated, Dimensions, ListViewDataSource } from 'react-native'; 4 | import PropTypes from 'prop-types'; 5 | /* eslint-enable import/no-extraneous-dependencies */ 6 | 7 | const window = Dimensions.get('window'); 8 | 9 | const KEY = '__PARALLAX_SCROLL__'; 10 | const RATIO = 9 / 16; 11 | 12 | export default class ParallaxScroll extends Component { 13 | 14 | static propTypes = { 15 | data: PropTypes.oneOfType([PropTypes.array]), 16 | style: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), 17 | width: PropTypes.number, 18 | height: PropTypes.number, 19 | innerRef: PropTypes.func, 20 | sections: PropTypes.oneOfType([PropTypes.array]), 21 | onScroll: PropTypes.func, 22 | children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]), 23 | renderRow: PropTypes.func, 24 | renderItem: PropTypes.func, 25 | 26 | dataSource: PropTypes.instanceOf(ListViewDataSource), 27 | scrollStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), 28 | headerHeight: PropTypes.number, 29 | renderHeader: PropTypes.func, 30 | isHeaderFixed: PropTypes.bool, 31 | onHeaderFixed: PropTypes.func, 32 | parallaxHeight: PropTypes.number, 33 | useNativeDriver: PropTypes.bool, 34 | backgroundScale: PropTypes.number, 35 | scrollableComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), 36 | isBackgroundScalable: PropTypes.bool, 37 | backgroundScaleOrigin: PropTypes.oneOf(['top', 'center']), 38 | headerFixedTransformY: PropTypes.number, 39 | headerBackgroundColor: PropTypes.string, 40 | contentContainerStyle: PropTypes.oneOfType([ 41 | PropTypes.array, 42 | PropTypes.number, 43 | PropTypes.object 44 | ]), 45 | onChangeHeaderVisibility: PropTypes.func, 46 | renderParallaxBackground: PropTypes.func, 47 | renderParallaxForeground: PropTypes.func, 48 | fadeOutParallaxForeground: PropTypes.bool, 49 | fadeOutParallaxBackground: PropTypes.bool, 50 | headerFixedBackgroundColor: PropTypes.string, 51 | renderBackgroundPlaceholder: PropTypes.func, 52 | parallaxBackgroundScrollSpeed: PropTypes.number, 53 | parallaxForegroundScrollSpeed: PropTypes.number 54 | }; 55 | 56 | static defaultProps = { 57 | data: null, 58 | style: {}, 59 | width: window.width, 60 | height: window.height, 61 | innerRef: null, 62 | sections: null, 63 | children: null, 64 | onScroll: null, 65 | renderRow: null, 66 | dataSource: null, 67 | renderItem: null, 68 | scrollStyle: {}, 69 | headerHeight: 45, 70 | renderHeader: null, 71 | isHeaderFixed: false, 72 | onHeaderFixed: () => {}, 73 | parallaxHeight: window.width * RATIO, 74 | backgroundScale: 3, 75 | useNativeDriver: false, 76 | scrollableComponent: Animated.ScrollView, 77 | isBackgroundScalable: true, 78 | backgroundScaleOrigin: 'center', 79 | headerFixedTransformY: 0, 80 | headerBackgroundColor: 'rgba(0, 0, 0, 0)', 81 | contentContainerStyle: {}, 82 | onChangeHeaderVisibility: () => {}, 83 | renderParallaxBackground: null, 84 | renderParallaxForeground: null, 85 | fadeOutParallaxForeground: false, 86 | fadeOutParallaxBackground: false, 87 | headerFixedBackgroundColor: 'rgba(0, 0, 0, 1)', 88 | renderBackgroundPlaceholder: null, 89 | parallaxBackgroundScrollSpeed: 5, 90 | parallaxForegroundScrollSpeed: 5 91 | }; 92 | 93 | scrollY = new Animated.Value(0); 94 | isHeaderFixed = false; 95 | isHeaderVisibible = true; 96 | 97 | constructor(props :any) { 98 | super(props); 99 | 100 | 101 | this.scrollableComponent = props.scrollableComponent; 102 | if (Animated.ScrollView !== props.scrollableComponent) { 103 | this.scrollableComponent = Animated.createAnimatedComponent(props.scrollableComponent); 104 | } 105 | 106 | 107 | this._onAnimatedScroll = Animated.event( 108 | [{ nativeEvent: { contentOffset: { y: this.scrollY } } }], 109 | { 110 | listener: this._onScroll, 111 | useNativeDriver: props.useNativeDriver 112 | } 113 | ); 114 | } 115 | 116 | // eslint-disable-next-line 117 | _getFlatData (data:any) { 118 | return [{ key: KEY }, ...data]; 119 | } 120 | 121 | // eslint-disable-next-line 122 | _getDataSource (dataSource:any) { 123 | return dataSource.cloneWithRowsAndSections({ 124 | [KEY]: [''], 125 | ...dataSource._dataBlob 126 | }); 127 | }; 128 | 129 | _getSectionData(sections : any) { 130 | 131 | 132 | if (this.props.renderItem) { 133 | return [{ data: [{ key: KEY }], key: KEY }, ...sections]; 134 | } 135 | 136 | return [ 137 | { data: [{ key: KEY }], key: KEY, renderItem: this._renderBackgroundPlaceholder }, 138 | ...sections 139 | ]; 140 | } 141 | 142 | _onScroll = (e:any) => { 143 | const contentOffsetY = e.nativeEvent.contentOffset.y; 144 | 145 | const { 146 | onScroll, 147 | renderHeader, 148 | headerHeight, 149 | isHeaderFixed, 150 | onHeaderFixed, 151 | parallaxHeight, 152 | headerFixedTransformY, 153 | onChangeHeaderVisibility 154 | } = this.props; 155 | 156 | const isHeaderFixedAfterScroll = 157 | contentOffsetY > parallaxHeight - headerHeight + headerFixedTransformY; 158 | const isHeaderVisibibleAfterScroll = contentOffsetY < parallaxHeight; 159 | 160 | if (onScroll) { 161 | onScroll(e); 162 | } 163 | 164 | if (renderHeader && isHeaderFixed && this.isHeaderFixed !== isHeaderFixedAfterScroll) { 165 | this.isHeaderFixed = isHeaderFixedAfterScroll; 166 | onHeaderFixed(isHeaderFixedAfterScroll); 167 | } 168 | 169 | if (renderHeader && !isHeaderFixed && this.isHeaderVisibible !== isHeaderVisibibleAfterScroll) { 170 | this.isHeaderVisibible = isHeaderVisibibleAfterScroll; 171 | onChangeHeaderVisibility(isHeaderVisibibleAfterScroll); 172 | } 173 | }; 174 | 175 | _renderRow = (rowData : any, sectionID : any, rowID : any, highlightRow :any) => { 176 | if (sectionID === KEY) { 177 | return this._renderBackgroundPlaceholder(); 178 | } 179 | return this.props.renderRow(rowData, sectionID, rowID, highlightRow); 180 | }; 181 | 182 | _renderItem = (e:any) => { 183 | if (e.item.key === KEY) { 184 | return this._renderBackgroundPlaceholder(); 185 | } 186 | return this.props.renderItem(e); 187 | }; 188 | 189 | _renderBackgroundPlaceholder = () => { 190 | const { parallaxHeight , renderBackgroundPlaceholder } = this.props; 191 | if (renderBackgroundPlaceholder) { 192 | return renderBackgroundPlaceholder({ 193 | animatedValue: this.scrollY, 194 | height: parallaxHeight 195 | }); 196 | } 197 | 198 | return ; 199 | }; 200 | 201 | _ref = (ref:any) => { 202 | if (typeof this.props.innerRef === 'function' && ref && ref._component) { 203 | this.props.innerRef(ref._component); 204 | } 205 | }; 206 | 207 | _renderParallaxBackground() { 208 | const { 209 | width, 210 | parallaxHeight: height, 211 | isBackgroundScalable, 212 | renderParallaxBackground, 213 | fadeOutParallaxBackground, 214 | parallaxBackgroundScrollSpeed, 215 | backgroundScale, 216 | backgroundScaleOrigin 217 | } = this.props; 218 | 219 | const topOrigin = backgroundScaleOrigin === 'top'; 220 | 221 | const translateY = !height 222 | ? 0 223 | : this.scrollY.interpolate({ 224 | inputRange: [...(topOrigin ? [-height, 0] : [0]), height], 225 | outputRange: [ 226 | ...(topOrigin ? [-(height / backgroundScale) + height, 0] : [0]), 227 | -(height / parallaxBackgroundScrollSpeed) 228 | ], 229 | extrapolateLeft: 'extend', 230 | extrapolateRight: 'extend' 231 | }); 232 | 233 | const scale = 234 | !isBackgroundScalable || !height 235 | ? 1 236 | : this.scrollY.interpolate({ 237 | inputRange: [-height, 0], 238 | outputRange: [backgroundScale, 1], 239 | extrapolateLeft: 'extend', 240 | extrapolateRight: 'clamp' 241 | }); 242 | 243 | const opacity = 244 | !fadeOutParallaxBackground || !height 245 | ? 1 246 | : this.scrollY.interpolate({ 247 | inputRange: [0, height], 248 | outputRange: [1, 0], 249 | extrapolate: 'clamp' 250 | }); 251 | 252 | return ( 253 | 263 | {renderParallaxBackground({ width, height, animatedValue: this.scrollY })} 264 | 265 | ); 266 | } 267 | 268 | _renderParallaxForeground() { 269 | const { 270 | width, 271 | parallaxHeight: height, 272 | renderParallaxForeground, 273 | fadeOutParallaxForeground, 274 | parallaxForegroundScrollSpeed 275 | } = this.props; 276 | 277 | /* eslint-disable indent */ 278 | const translateY = !height 279 | ? 1 280 | : this.scrollY.interpolate({ 281 | inputRange: [0, height], 282 | outputRange: [0, -(height / parallaxForegroundScrollSpeed)], 283 | extrapolateRight: 'extend', 284 | extrapolateLeft: 'clamp' 285 | }); 286 | 287 | const opacity = 288 | !fadeOutParallaxForeground || !height 289 | ? 1 290 | : this.scrollY.interpolate({ 291 | inputRange: [0, height], 292 | outputRange: [1, 0], 293 | extrapolateRight: 'extend', 294 | extrapolateLeft: 'clamp' 295 | }); 296 | /* eslint-disable indent */ 297 | 298 | const wrapperStyle = { 299 | position: 'absolute', 300 | top: 0, 301 | width, 302 | height, 303 | zIndex: 1 304 | }; 305 | 306 | return ( 307 | 308 | 318 | {renderParallaxForeground({ width, height, animatedValue: this.scrollY })} 319 | 320 | 321 | ); 322 | } 323 | 324 | _renderHeader() { 325 | const { 326 | 327 | width, 328 | 329 | headerHeight: height, 330 | 331 | renderHeader, 332 | 333 | isHeaderFixed, 334 | 335 | parallaxHeight, 336 | 337 | useNativeDriver, 338 | 339 | headerFixedTransformY, 340 | 341 | headerBackgroundColor, 342 | 343 | headerFixedBackgroundColor 344 | } = this.props; 345 | 346 | const wrapperStyle = { 347 | position: 'absolute', 348 | top: 0, 349 | width, 350 | height, 351 | zIndex: 2 352 | }; 353 | const style = { 354 | flex: 1, 355 | width, 356 | height 357 | }; 358 | 359 | if (!isHeaderFixed) { 360 | const parallaxHeightWithoutHeader = parallaxHeight - height; 361 | 362 | style.transform = [ 363 | { 364 | translateY: this.scrollY.interpolate({ 365 | inputRange: parallaxHeightWithoutHeader 366 | ? [0, parallaxHeight - height, parallaxHeight] 367 | : [0, parallaxHeight], 368 | outputRange: parallaxHeightWithoutHeader ? [0, 0, -height] : [0, -height], 369 | extrapolate: 'clamp' 370 | }) 371 | } 372 | ]; 373 | } else if (headerFixedTransformY) { 374 | style.transform = [ 375 | { 376 | translateY: this.scrollY.interpolate({ 377 | inputRange: [0, headerFixedTransformY], 378 | outputRange: [0, -headerFixedTransformY], 379 | extrapolate: 'clamp' 380 | }) 381 | } 382 | ]; 383 | } 384 | 385 | if (!useNativeDriver && headerBackgroundColor) { 386 | style.backgroundColor = this.scrollY.interpolate({ 387 | inputRange: [0, parallaxHeight - height], 388 | outputRange: [headerBackgroundColor, headerFixedBackgroundColor], 389 | extrapolate: 'clamp' 390 | }); 391 | } else if (useNativeDriver && headerBackgroundColor) { 392 | style.backgroundColor = headerBackgroundColor; 393 | } 394 | 395 | return ( 396 | 397 | 398 | {renderHeader({ width, height, animatedValue: this.scrollY })} 399 | 400 | 401 | ); 402 | } 403 | 404 | render() { 405 | const { 406 | 407 | data, 408 | 409 | style: wrapperStyle, 410 | 411 | width, 412 | 413 | height, 414 | 415 | sections, 416 | 417 | children, 418 | 419 | renderRow, 420 | 421 | renderItem, 422 | 423 | dataSource, 424 | 425 | scrollStyle, 426 | 427 | renderHeader, 428 | 429 | useNativeDriver, 430 | 431 | scrollableComponent, 432 | 433 | contentContainerStyle, 434 | 435 | renderParallaxBackground, 436 | 437 | renderParallaxForeground, 438 | ...scrollViewProps 439 | } = this.props; 440 | 441 | const style = [scrollStyle, { width, height }]; 442 | const stickyHeaderIndices = []; 443 | const ScrollableComponent = this.scrollableComponent; 444 | const isRenderChildComponents = 445 | !(data && renderItem) && 446 | !((sections && renderItem) || (sections && sections[0].renderItem)) && 447 | !(dataSource && renderRow); 448 | 449 | if (isRenderChildComponents && renderParallaxForeground) { 450 | stickyHeaderIndices.push(stickyHeaderIndices.length); 451 | } 452 | 453 | return ( 454 | 455 | {renderParallaxBackground && this._renderParallaxBackground(!!renderHeader)} 456 | 457 | false} 473 | onStartShouldSetResponderCapture={() => false} 474 | > 475 | {isRenderChildComponents && renderParallaxForeground && this._renderParallaxForeground()} 476 | 477 | {isRenderChildComponents && this._renderBackgroundPlaceholder()} 478 | 479 | {isRenderChildComponents && children} 480 | 481 | 482 | {!isRenderChildComponents && renderParallaxForeground && this._renderParallaxForeground()} 483 | 484 | {renderHeader && this._renderHeader()} 485 | 486 | ); 487 | } 488 | } 489 | -------------------------------------------------------------------------------- /src/components/PostItem/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | TouchableOpacity, View, 4 | StyleSheet, 5 | Text, 6 | Image 7 | } from "react-native"; 8 | import {colors} from "../../utils"; 9 | import SvgUri from "react-native-svg-uri"; 10 | import {Avatar} from "react-native-elements"; 11 | import ViewMoreText from 'react-native-view-more-text'; 12 | 13 | interface IPostItemProps { 14 | avatar: String, 15 | author: String, 16 | time: String, 17 | image: String, 18 | likeCount: String, 19 | commentCount: String, 20 | shareCount: String, 21 | 22 | text: String, 23 | 24 | isImage: boolean, 25 | isVideo: boolean, 26 | isText: boolean 27 | } 28 | 29 | class PostItem extends React.Component { 30 | 31 | constructor(props: IPostItemProps) { 32 | super(props); 33 | } 34 | 35 | render() { 36 | 37 | // @ts-ignore 38 | const {avatar, author, time, image, likeCount, commentCount, shareCount, text,isImage, isVideo, isText} = this.props; 39 | 40 | return ( 41 | 42 | 43 | 44 | 45 | 46 | 52 | 53 | 54 | 55 | {author} 56 | {time} 57 | 58 | 59 | 60 | 61 | 62 | 63 | {isImage ? 64 | : null} 65 | {isVideo ? 66 | 68 | 72 | 73 | : null} 74 | 75 | {isText ? 76 | 81 | 82 | {text} 83 | 84 | 85 | :null} 86 | 87 | 88 | 89 | 90 | {likeCount} 91 | {commentCount} 92 | 93 | 94 | {shareCount} 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | LIKE 103 | 104 | 105 | 106 | 107 | 108 | COMMENTS 109 | 110 | 111 | 112 | 113 | 114 | SHARE 115 | 116 | 117 | 118 | 119 | 120 | ); 121 | } 122 | }; 123 | 124 | const styles = StyleSheet.create({ 125 | container: { 126 | flexDirection: 'column', 127 | borderBottomColor: colors.exlight_gray, 128 | backgroundColor: colors.white, 129 | borderTopColor: colors.exlight_gray, 130 | borderBottomWidth: 1, 131 | borderTopWidth: 1 132 | }, 133 | flexStartAligned: { 134 | flex: 1, 135 | justifyContent: 'flex-start', 136 | flexDirection: 'row', 137 | alignItems: 'center' 138 | }, 139 | flexEndAligned: { 140 | flexDirection: 'row', 141 | flex: 3, 142 | alignItems: 'center', 143 | justifyContent: 'flex-end' 144 | }, 145 | cardHeader: { 146 | flexDirection: 'row', 147 | padding: 20, 148 | height: 70 149 | }, 150 | statContainer: { 151 | flexDirection: 'column', 152 | flex: 6, 153 | paddingLeft: 10, 154 | alignItems: 'flex-start', 155 | justifyContent: 'center' 156 | }, 157 | cardStatsCounter: { 158 | flexDirection: 'row', 159 | padding: 15, 160 | height: 45 161 | }, 162 | cardActionContainer: { 163 | flexDirection: 'row', 164 | padding: 15, 165 | height: 60, 166 | backgroundColor: colors.extraLightBlue 167 | }, 168 | postAuthor: { 169 | fontSize: 15, 170 | marginLeft: 5 171 | }, 172 | postTime: { 173 | fontSize: 13, 174 | marginTop: 4, 175 | marginLeft: 5, 176 | color: colors.dark_gray 177 | }, 178 | blueText: { 179 | color: colors.filterBlue 180 | }, 181 | buttonMore: { 182 | alignSelf: 'flex-end', 183 | justifyContent: 'flex-end', 184 | alignContent: 'flex-end', 185 | flexGrow: 1 186 | }, 187 | likeCounter: { 188 | fontSize: 14, 189 | marginLeft: 5, 190 | color: colors.dark_gray 191 | }, 192 | commentCounter: { 193 | fontSize: 14, 194 | marginLeft: 5, 195 | color: colors.dark_gray 196 | } 197 | , 198 | viewMoreText: { 199 | marginLeft: 10, 200 | left: 10, 201 | color: colors.green 202 | } 203 | }); 204 | 205 | export default PostItem; 206 | -------------------------------------------------------------------------------- /src/components/ProfileHeader/index.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import React from 'react'; 3 | import {View, TouchableOpacity, SafeAreaView, StatusBar, StyleSheet} from 'react-native'; 4 | import {colors} from "../../utils"; 5 | import RoundedActionButton from '../RoundedActionButton'; 6 | 7 | const ProfileHeader :React.StatelessComponent = (props:any) => { 8 | 9 | return ( 10 | 11 | 12 | 13 | 14 | 16 | 19 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | const styles = StyleSheet.create({ 27 | 28 | // Edit boutton 29 | editContainer: { 30 | flex: 1, 31 | flexDirection: 'row', 32 | position: 'absolute', 33 | alignItems: "flex-end", 34 | alignSelf:'flex-end', 35 | top: 65, 36 | right:15, 37 | width:84 38 | }, 39 | flexEnd:{ 40 | flexDirection: 'row', 41 | alignSelf:'flex-end' 42 | } 43 | }); 44 | 45 | export default ProfileHeader; 46 | -------------------------------------------------------------------------------- /src/components/ProfileInfos/FriendList/ProfileFriendItem/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {StyleSheet, TouchableOpacity, View, ImageBackground, Text} from 'react-native' 3 | import {Avatar} from 'react-native-elements'; 4 | import {colors} from "../../../../utils"; 5 | 6 | const ProfileFriendItem: React.StatelessComponent = (props: any) => { 7 | return ( 8 | 9 | 10 | 14 | 15 | {props.name} 16 | 17 | 18 | ); 19 | }; 20 | const styles = StyleSheet.create({ 21 | friendName: { 22 | alignSelf: 'center', 23 | marginTop: 10, 24 | fontSize:13 25 | } 26 | }); 27 | export default ProfileFriendItem 28 | -------------------------------------------------------------------------------- /src/components/ProfileInfos/FriendList/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {ScrollView, StyleSheet, View} from 'react-native' 3 | import ProfileFriendItem from "./ProfileFriendItem"; 4 | 5 | const FriendList : React.StatelessComponent = () => { 6 | 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | const styles = StyleSheet.create({}); 25 | 26 | export default FriendList; 27 | -------------------------------------------------------------------------------- /src/components/ProfileInfos/PhotoList/ProfilePhotoItem/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {StyleSheet, TouchableOpacity, View, ImageBackground, Text} from 'react-native' 3 | import {colors} from "../../../../utils"; 4 | 5 | const ProfilePhotoItem: React.StatelessComponent = (props: any) => { 6 | return ( 7 | 8 | 9 | 10 | {props.title} 11 | 12 | 13 | 14 | ); 15 | }; 16 | const styles = StyleSheet.create({ 17 | 18 | avatarEditcontainer: { 19 | height: 141, width: 126, 20 | overflow: "hidden", 21 | borderRadius: 8 22 | }, 23 | insideText: { 24 | alignSelf: 'flex-start', 25 | position: 'absolute', 26 | marginLeft: 14, 27 | bottom: 10, 28 | color: colors.white 29 | } 30 | }); 31 | export default ProfilePhotoItem 32 | -------------------------------------------------------------------------------- /src/components/ProfileInfos/PhotoList/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {ScrollView, StyleSheet, View} from 'react-native' 3 | import ProfilePhotoItem from "./ProfilePhotoItem"; 4 | import PhotosItems from "../../../utils/photoItems"; 5 | 6 | const ProfilePhotoList: React.StatelessComponent = () => { 7 | return ( 8 | 12 | 13 | { 14 | PhotosItems.map(profileItem => ( 15 | 16 | )) 17 | } 18 | 19 | 20 | ); 21 | }; 22 | const styles = StyleSheet.create({}); 23 | export default ProfilePhotoList; 24 | -------------------------------------------------------------------------------- /src/components/ProfileInfos/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native' 3 | import ProfilePhotoList from "./PhotoList"; 4 | import {colors} from "../../utils"; 5 | import FriendList from "./FriendList"; 6 | import RoundedActionButton from "../../components/RoundedActionButton"; 7 | 8 | const ProfileInfos: React.StatelessComponent = () => { 9 | return ( 10 | 11 | 12 | Photos 13 | 14 | 15 | 16 | VIEW ALL 17 | 18 | 19 | Friends · 504 20 | 21 | 22 | 23 | VIEW ALL 24 | 25 | 26 | 27 | 30 | 31 | 35 | 36 | 39 | 40 | 41 | ); 42 | }; 43 | const styles = StyleSheet.create({ 44 | // Profile Photo 45 | profilePhotoContainer: { 46 | flexDirection: 'column', 47 | padding: 20, 48 | alignItems: 'flex-start', 49 | justifyContent: 'flex-start' 50 | }, 51 | profilePhotoTitle: { 52 | fontSize: 15, 53 | marginTop: 4, 54 | marginLeft: 4, 55 | fontWeight: 'bold', 56 | color: colors.dark_gray 57 | }, 58 | 59 | // Btn view All 60 | btnViewAll: { 61 | marginLeft: 20, 62 | marginRight: 20, 63 | marginTop: 10, 64 | marginBottom: 10, 65 | padding: 15, 66 | justifyContent: 'center', 67 | borderRadius: 8, 68 | alignItems: 'center', 69 | backgroundColor: colors.extraLightBlue, 70 | textAlign: 'center', 71 | color: colors.darkBlue 72 | }, 73 | textViewAll: { 74 | color: colors.darkBlue 75 | } 76 | 77 | }); 78 | export default ProfileInfos 79 | -------------------------------------------------------------------------------- /src/components/RoundedActionButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | TouchableOpacity, View, 4 | StyleSheet, 5 | Text 6 | } from "react-native"; 7 | import {colors} from "../../utils"; 8 | import SvgUri from "react-native-svg-uri"; 9 | 10 | const RoundedActionButton: React.StatelessComponent = (props: any) => { 11 | 12 | return ( 13 | 16 | 28 | 29 | 30 | {props.text} 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | const styles = StyleSheet.create({ 39 | child: { 40 | flex: 1, 41 | flexDirection: 'row', 42 | marginLeft: 20, 43 | marginRight: 20, 44 | alignItems: 'center', 45 | borderRadius: 31, 46 | justifyContent: 'center' 47 | }, 48 | buttonText: { 49 | alignSelf: 'center', 50 | color: colors.white, 51 | fontSize: 15, 52 | fontWeight: "400" 53 | }, 54 | buttonImage: { 55 | width: 32, 56 | height: 32, 57 | justifyContent: 'center', 58 | alignItems: 'center', 59 | flexDirection: 'column', 60 | alignSelf: 'center' 61 | } 62 | }); 63 | 64 | export default RoundedActionButton; 65 | -------------------------------------------------------------------------------- /src/components/icons/Logo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Logo = (props: any) => ( 4 | 5 | 6 | 7 | 9 | 10 | 11 | ); 12 | 13 | export default Logo; 14 | -------------------------------------------------------------------------------- /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 | } 16 | }); 17 | 18 | export default Separator; 19 | -------------------------------------------------------------------------------- /src/components/storyItems/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {ScrollView, TouchableOpacity, View, StyleSheet} from "react-native"; 3 | import avatars from '../../utils/avatars' 4 | import StoryItem from "./storyItem"; 5 | import {colors} from "../../utils"; 6 | 7 | 8 | const storyItems: React.StatelessComponent = (props:any) => { 9 | 10 | return ( 11 | 15 | 16 | { 17 | avatars.map(avatar => ( 18 | 19 | )) 20 | } 21 | 22 | 23 | ); 24 | }; 25 | const styles = StyleSheet.create({ 26 | 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} from "react-native"; 3 | import {Avatar} from 'react-native-elements'; 4 | import {colors} from "../../../utils"; 5 | 6 | const StoryItem: React.StatelessComponent = (props:any) => { 7 | 8 | return ( 9 | 10 | 11 | 15 | 16 | 17 | ); 18 | 19 | }; 20 | 21 | const styles = StyleSheet.create({ 22 | container: { 23 | height: 72, 24 | flexDirection: 'column', 25 | width: 72, 26 | borderRadius: 36, 27 | marginLeft:10, 28 | borderColor: colors.darkBlue, 29 | borderWidth: 2, 30 | 31 | justifyContent: 'center', 32 | alignItems: 'center' 33 | }, 34 | avatar: { 35 | height: 62, 36 | width: 62, 37 | backgroundColor:colors.white, 38 | borderRadius: 31 39 | } 40 | }); 41 | 42 | export default StoryItem; 43 | -------------------------------------------------------------------------------- /src/containers/hoc/AuxHOC.tsx: -------------------------------------------------------------------------------- 1 | const AuxHOC = (props:any) => props.children; 2 | export default AuxHOC; 3 | -------------------------------------------------------------------------------- /src/navigation/navigation.tsx: -------------------------------------------------------------------------------- 1 | import {createAppContainer, createSwitchNavigator} from 'react-navigation'; 2 | import {createStackNavigator} from 'react-navigation-stack'; 3 | import Home from "../screens/Home"; 4 | import Intro from "../screens/Intro"; 5 | import Profile from "../screens/Profile"; 6 | 7 | 8 | const appStack = createStackNavigator({ 9 | Splash: { 10 | screen: Intro, 11 | navigationOptions: () => ({ 12 | header: null, 13 | headerBackTitle: null 14 | }) 15 | }, 16 | Home: { 17 | screen: Home, 18 | navigationOptions: () => ({ 19 | header: null, 20 | headerBackTitle: null 21 | }) 22 | }, 23 | Profile: { 24 | screen: Profile, 25 | navigationOptions: () => ({ 26 | header: null, 27 | headerBackTitle: null 28 | }) 29 | }, 30 | 31 | },{ 32 | initialRouteName:'Splash' 33 | }); 34 | 35 | 36 | // @ts-ignore 37 | export default createAppContainer(createSwitchNavigator( 38 | { 39 | Intro: Intro, 40 | App: appStack, 41 | Profile: Profile, 42 | }, 43 | { 44 | initialRouteName: 'Intro' 45 | } 46 | )); 47 | -------------------------------------------------------------------------------- /src/screens/Home/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | SafeAreaView, 4 | ScrollView, 5 | StatusBar, 6 | StyleSheet, 7 | Text, 8 | TouchableOpacity, 9 | View, 10 | RefreshControl 11 | } from "react-native"; 12 | import {Colors} from "react-native/Libraries/NewAppScreen"; 13 | import SvgUri from "react-native-svg-uri"; 14 | import {colors} from "../../utils"; 15 | import CameraButton from "../../components/CameraButton"; 16 | import StoryItems from "../../components/storyItems"; 17 | import AvatarInput from "../../components/AvatarInput"; 18 | import RoundedActionButton from "../../components/RoundedActionButton"; 19 | import PostItem from "../../components/PostItem"; 20 | import avatars from "../../utils/avatars"; 21 | import posts from "../../utils/posts"; 22 | 23 | export default class Home extends React.Component { 24 | 25 | 26 | state = { 27 | refreshing: false, 28 | setRefreshing: false 29 | }; 30 | 31 | 32 | constructor(props: any) { 33 | super(props); 34 | } 35 | 36 | wait = (timeout: number) => { 37 | return new Promise(resolve => { 38 | setTimeout(resolve, timeout); 39 | }); 40 | }; 41 | 42 | onRefresh = () => { 43 | this.setState({setRefreshing: true}); 44 | this.wait(2000).then(() => { 45 | this.setState({setRefreshing: false}); 46 | }); 47 | }; 48 | 49 | handleClick = () => { 50 | this.props.navigation.navigate('Profile') 51 | }; 52 | 53 | render() { 54 | return ( 55 | 56 | 57 | 58 | 59 | this.onRefresh}/> 62 | } 63 | contentInsetAdjustmentBehavior="automatic" 64 | style={styles.scrollView}> 65 | 66 | 67 | 68 | 69 | Stories 70 | 71 | 72 | 79 | 84 | 85 | PLAY ALL 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | this.handleClick()}/> 94 | 95 | 96 | 97 | 98 | 103 | 106 | 109 | 112 | 113 | 114 | { 115 | posts.map(post => ( 116 | 119 | )) 120 | } 121 | 122 | 123 | 124 | 125 | 126 | ); 127 | } 128 | } 129 | const styles = StyleSheet.create({ 130 | paddingContainer: { 131 | flexDirection: 'column', 132 | padding: 16 133 | }, 134 | marginContainer: { 135 | marginTop: 16 136 | }, 137 | playAllText: { 138 | color: colors.filterBlue, 139 | marginLeft: 5, 140 | fontWeight: "400", 141 | marginTop: 3 142 | }, 143 | flexAlignedStart: { 144 | flex: 1, 145 | alignItems: "flex-start", 146 | justifyContent: "flex-start" 147 | }, 148 | flexAlignedEnd: { 149 | flex: 1, 150 | alignItems: "flex-end", 151 | justifyContent: "flex-end" 152 | }, 153 | HeaderStories: { 154 | flexDirection: "row", 155 | alignItems: "center", 156 | justifyContent: "space-between", 157 | width: "100%", 158 | }, 159 | 160 | storiesContainer: { 161 | flexDirection: 'row' 162 | }, 163 | 164 | 165 | fragment: { 166 | flex: 1, 167 | flexDirection: 'column' 168 | }, 169 | storieTitle: { 170 | fontWeight: "bold", 171 | fontSize: 16 172 | }, 173 | touchableMask: { 174 | position: "absolute", 175 | top: 5, 176 | left: 10, 177 | width: 30, 178 | height: 30, 179 | zIndex: 9, 180 | padding: 5 181 | }, 182 | scrollView: { 183 | backgroundColor: Colors.white, 184 | }, 185 | engine: { 186 | position: 'absolute', 187 | right: 0, 188 | }, 189 | body: { 190 | backgroundColor: Colors.white, 191 | }, 192 | sectionContainer: { 193 | marginTop: 32, 194 | paddingHorizontal: 24, 195 | }, 196 | sectionTitle: { 197 | fontSize: 24, 198 | fontWeight: '600', 199 | color: Colors.black, 200 | }, 201 | sectionDescription: { 202 | marginTop: 8, 203 | fontSize: 18, 204 | fontWeight: '400', 205 | color: Colors.dark, 206 | }, 207 | highlight: { 208 | fontWeight: '700', 209 | }, 210 | footer: { 211 | color: Colors.dark, 212 | fontSize: 12, 213 | fontWeight: '600', 214 | padding: 4, 215 | paddingRight: 12, 216 | textAlign: 'right', 217 | }, 218 | }); 219 | -------------------------------------------------------------------------------- /src/screens/Intro/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {NavigationScreenProp, SafeAreaView} from 'react-navigation'; 3 | import {View, StyleSheet, StatusBar} from 'react-native'; 4 | import {colors} from "../../utils"; 5 | import SvgUri from "react-native-svg-uri"; 6 | import { YellowBox } from 'react-native'; 7 | 8 | YellowBox.ignoreWarnings([ 9 | 'Warning: componentWillMount is deprecated', 10 | 'Warning: componentWillUpdate is deprecated', 11 | 'Warning: componentWillReceiveProps is deprecated', 12 | ]); 13 | 14 | export interface NavigationProps { 15 | navigation: NavigationScreenProp 16 | } 17 | 18 | interface IProps extends NavigationProps { 19 | } 20 | 21 | export default class Intro extends React.Component { 22 | 23 | constructor(props: IProps) { 24 | super(props) 25 | } 26 | 27 | performTimeConsumingTask = async () => { 28 | return new Promise((resolve) => 29 | setTimeout( 30 | () => { 31 | resolve('finish') 32 | }, 33 | 1000 34 | ) 35 | ) 36 | }; 37 | 38 | async componentDidMount() { 39 | const data = await this.performTimeConsumingTask(); 40 | if (data !== null) { 41 | this.props.navigation.navigate('Home'); 42 | } 43 | } 44 | 45 | render() { 46 | return ( 47 | 48 | 49 | 50 | 51 | 56 | 57 | 58 | ); 59 | } 60 | } 61 | 62 | const styles = StyleSheet.create({ 63 | container: { 64 | flex: 1, 65 | backgroundColor: colors.darkBlue 66 | } 67 | }); 68 | -------------------------------------------------------------------------------- /src/screens/Profile/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Text, SafeAreaView, View, StyleSheet} from "react-native"; 3 | import ParallaxScroll from '../../components/ParallaxScrollView'; 4 | import ProfileHeader from "../../components/ProfileHeader"; 5 | import ParallaxBackground from '../../components/ParallaxBackground'; 6 | import {colors} from "../../utils"; 7 | import UserInfo from './userInfo'; 8 | 9 | // Correct top size 200 10 | export default class Profile extends React.Component { 11 | 12 | goBack = () => { 13 | this.props.navigation.goBack(); 14 | }; 15 | 16 | render() { 17 | return ( 18 | 20 | this.goBack()} 21 | animatedValue={animatedValue}/>} 22 | isHeaderFixed={false} 23 | parallaxHeight={390} 24 | renderParallaxBackground={({animatedValue}) => } 26 | parallaxBackgroundScrollSpeed={5} 27 | parallaxForegroundScrollSpeed={2.5} 28 | > 29 | 30 | 31 | 32 | 33 | ); 34 | } 35 | } 36 | const styles = StyleSheet.create({ 37 | userInfoContainer: { 38 | zIndex: 1000, 39 | left: 0, 40 | right: 0, 41 | marginTop: -200 42 | } 43 | }); 44 | -------------------------------------------------------------------------------- /src/screens/Profile/userInfo.tsx: -------------------------------------------------------------------------------- 1 | import {Text, TouchableOpacity, View , StyleSheet ,Button } from "react-native"; 2 | import {Avatar, Icon} from "react-native-elements"; 3 | import {colors} from "../../utils"; 4 | import React from "react"; 5 | import Separator from "../../components/separator"; 6 | import ProfileInfos from "../../components/ProfileInfos"; 7 | 8 | const UserInfo: React.StatelessComponent = () =>{ 9 | return ( 10 | 11 | 12 | 13 | 23 | 24 | 26 | 27 | 31 | 32 | 33 | 34 | 35 | Anmol Arora 36 | Web & UI/UX Designer 37 | Works at ILLUMINZ 38 | 39 | 40 | 41 | 42 | Joined in 43 | 2011 44 | 45 | 46 | 47 | Post 48 | 211 49 | 50 | 51 | Friends 52 | 204 53 | 54 | 55 | Photos 56 | 504 57 | 58 | 59 | Check-ins 60 | 21 61 | 62 | 63 | 64 | 65 | Intro 66 | Eat · Design · Travel · Explore · Repeat 67 | I do believe it's time for another adventure. 68 | 69 | 70 | 71 | 72 | 73 | 74 | ); 75 | }; 76 | const styles = StyleSheet.create({ 77 | // Avatar image profile 78 | avatarContainer: { 79 | flexDirection: 'row', 80 | paddingLeft:20, 81 | paddingBottom:20, 82 | //marginTop: 150, 83 | }, 84 | avatarEditcontainer: { 85 | height: 34, 86 | width: 34, 87 | borderRadius: 17, 88 | alignItems:'center', 89 | justifyContent:'center', 90 | backgroundColor: colors.darkBlue, 91 | right:0.5, 92 | }, 93 | 94 | // Profile info 95 | profileNameContainer: { 96 | flexDirection: 'column', 97 | flex: 6, 98 | paddingLeft: 10, 99 | alignSelf:'center', 100 | justifyContent: 'center' 101 | }, 102 | profileAuthor: { 103 | fontSize: 20, 104 | marginLeft: 5, 105 | fontWeight:'bold', 106 | color: colors.white 107 | }, 108 | 109 | profileWork: { 110 | fontSize: 15, 111 | marginTop: 4, 112 | marginLeft: 5, 113 | color: colors.white 114 | }, 115 | 116 | // User stats 117 | profileStatContainer: { 118 | flexDirection: 'row', 119 | paddingLeft: 10, 120 | paddingRight: 10, 121 | paddingBottom: 20, 122 | alignSelf:'center', 123 | justifyContent: 'center' 124 | }, 125 | profileStatItemContainer: { 126 | flexDirection: 'column', 127 | flex: 6, 128 | paddingLeft: 10, 129 | alignItems:'center', 130 | justifyContent: 'center' 131 | }, 132 | 133 | profileStatTitle: { 134 | fontSize: 13, 135 | marginTop: 4, 136 | marginLeft: 4, 137 | fontWeight:'bold', 138 | color: colors.white 139 | }, 140 | profileStatCounter: { 141 | fontSize: 20, 142 | marginLeft: 4, 143 | fontWeight:'bold', 144 | color: colors.white 145 | }, 146 | 147 | // Profile Intro 148 | profileIntroContainer: { 149 | flexDirection: 'column', 150 | padding: 20, 151 | alignItems:'flex-start', 152 | justifyContent: 'center' 153 | }, 154 | profileIntroTitle: { 155 | fontSize: 13, 156 | marginTop: 4, 157 | marginLeft: 4, 158 | fontWeight:'bold', 159 | color: colors.dark_gray 160 | }, 161 | profileIntroDesc: { 162 | fontSize: 16, 163 | marginTop: 4, 164 | marginLeft: 4, 165 | fontWeight:'200' 166 | }, 167 | 168 | // Profile Photo 169 | profilePhotoContainer: { 170 | flexDirection: 'column', 171 | padding: 20, 172 | alignItems:'flex-start', 173 | justifyContent: 'flex-start' 174 | }, 175 | profilePhotoTitle: { 176 | fontSize: 15, 177 | marginTop: 4, 178 | marginLeft: 4, 179 | fontWeight:'bold', 180 | color: colors.dark_gray 181 | }, 182 | 183 | // Btn view All 184 | btnViewAll:{ 185 | marginLeft: 20, 186 | marginRight: 20, 187 | marginTop: 10, 188 | marginBottom: 10, 189 | padding:15, 190 | justifyContent:'center', 191 | borderRadius:8, 192 | alignItems:'center', 193 | backgroundColor:colors.extraLightBlue, 194 | textAlign:'center', 195 | color:colors.darkBlue 196 | }, 197 | textViewAll:{ 198 | color:colors.darkBlue 199 | } 200 | 201 | 202 | }); 203 | export default UserInfo; 204 | -------------------------------------------------------------------------------- /src/screenshot/Demo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/screenshot/Demo1.png -------------------------------------------------------------------------------- /src/screenshot/Demo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/screenshot/Demo2.png -------------------------------------------------------------------------------- /src/screenshot/Facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doha26/Facebook-React-native/6d8488ce8e55caf100230332b7c73146a4726f92/src/screenshot/Facebook.png -------------------------------------------------------------------------------- /src/test.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/utils.tsx: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | darkBlue: "#2769D3", 3 | filterBlue: "#3578E5", 4 | transparent:'`rgba(100, 100, 100,0)`', 5 | lightBlue: `rgba(53,120,229,0.6)`, 6 | extraLightBlue: `rgba(53,120,229,0.08)`, 7 | red: "#D71B60", 8 | green: "#22C982", 9 | dark_gray: "#657786", 10 | light_gray: "#AAB8C2", 11 | exlight_gray: "#E1E8ED", 12 | exexlight_gray: "#F5F8FA", 13 | white: "#FFF" 14 | }; 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/utils/avatars.tsx: -------------------------------------------------------------------------------- 1 | const avatars: Array = [ 2 | { 3 | id: 0, 4 | src: require('../assets/images/ic1.png') 5 | }, 6 | { 7 | id: 1, 8 | src: require('../assets/images/ic1.png') 9 | }, 10 | { 11 | id: 2, 12 | src: require('../assets/images/ic2.png') 13 | }, 14 | { 15 | id: 3, 16 | src: require('../assets/images/ic3.png') 17 | }, 18 | { 19 | id: 4, 20 | src: require('../assets/images/ic4.png') 21 | }, 22 | { 23 | id: 5, 24 | src: require('../assets/images/ic5.png') 25 | }, 26 | { 27 | id: 6, 28 | src: require('../assets/images/ic6.png') 29 | }, 30 | { 31 | id: 7, 32 | src: require('../assets/images/ic7.png') 33 | }, 34 | ]; 35 | export default avatars; 36 | -------------------------------------------------------------------------------- /src/utils/photoItems.tsx: -------------------------------------------------------------------------------- 1 | const photoItems: Array = [ 2 | { 3 | id: 1, 4 | src: require('../assets/images/photo1.png'), 5 | title: "Uplabs" 6 | }, 7 | { 8 | id: 2, 9 | src: require('../assets/images/photo2.png'), 10 | title: "Profile Picture" 11 | }, 12 | { 13 | id: 3, 14 | src: require('../assets/images/photo3.png'), 15 | title: "Photo of you" 16 | }, 17 | { 18 | id: 4, 19 | src: require('../assets/images/photo4.png'), 20 | title: "Albums" 21 | }, 22 | { 23 | id: 5, 24 | src: require('../assets/images/photo5.png'), 25 | title: "Favorite" 26 | }, 27 | { 28 | id: 6, 29 | src: require('../assets/images/photo6.png'), 30 | title: "Others" 31 | }, 32 | { 33 | id: 7, 34 | src: require('../assets/images/photo7.png'), 35 | title: "Country" 36 | }, 37 | ]; 38 | export default photoItems; 39 | -------------------------------------------------------------------------------- /src/utils/posts.tsx: -------------------------------------------------------------------------------- 1 | const posts: Array = [ 2 | { 3 | "id": 0, 4 | "isText": false, 5 | "isImage": true, 6 | "isVideo": false, 7 | "avatar": require('../assets/images/ic1.png'), 8 | "image": require('../assets/images/post1.png'), 9 | "likeCount": 66, 10 | "commentCount": 979, 11 | "shareCount": 332, 12 | "author": "Prince Dotson", 13 | "text": "Incididunt eu esse culpa minim ullamco elit velit aliquip do exercitation deserunt consequat. Velit ea pariatur do commodo ea labore consequat. Quis elit reprehenderit exercitation occaecat. Eiusmod eiusmod adipisicing magna minim minim ut mollit dolore. Cillum reprehenderit duis in officia duis ex cupidatat minim incididunt veniam sunt id veniam.\r\nEst laboris pariatur reprehenderit elit duis. Est cupidatat commodo exercitation consectetur nisi. Aliqua labore aliquip aliqua ut cupidatat irure exercitation nisi nostrud cillum. Non commodo nostrud minim veniam est in et ipsum deserunt do minim minim sunt. Velit aliquip occaecat irure magna voluptate deserunt ullamco ut est pariatur dolor Lorem. Reprehenderit labore ad aliquip esse nisi adipisicing id labore ex cupidatat fugiat cillum anim duis. Pariatur deserunt irure esse nisi laborum laborum proident.\r\n", 14 | "time": "02:42:03" 15 | }, 16 | { 17 | "id": 1, 18 | "isText": false, 19 | "isImage": true, 20 | "isVideo": true, 21 | "avatar": require('../assets/images/ic2.png'), 22 | "image": require('../assets/images/post2.png'), 23 | "likeCount": 761, 24 | "commentCount": 84, 25 | "shareCount": 743, 26 | "author": "Hicks Melton", 27 | "text": "Amet qui dolor cupidatat tempor et duis nostrud labore ad nisi ut laborum. Sit commodo dolor dolore ea velit eu sit. Qui qui aute officia exercitation voluptate velit pariatur dolor aute. Magna quis in excepteur dolor amet ipsum. Labore amet nulla ad voluptate tempor sunt dolor aliqua ipsum quis amet magna. Qui pariatur enim nostrud et et sunt laboris ea. Aliquip sunt proident nulla ad nulla occaecat.\r\nEsse nulla sunt eu nisi. Laboris mollit veniam ea aliquip est cillum ipsum laborum commodo tempor adipisicing occaecat. Esse eiusmod amet commodo exercitation veniam laborum duis aliquip dolor. Ad sunt consequat qui dolore ad in minim. Est officia consequat anim sunt pariatur adipisicing eu. Labore quis minim ut quis tempor consequat magna commodo est occaecat laboris do dolor. Aliqua aute consectetur amet officia officia officia fugiat amet ad pariatur in nulla magna sint.\r\n", 28 | "time": "12:46:45" 29 | }, 30 | { 31 | "id": 2, 32 | "isText": true, 33 | "isImage": false, 34 | "isVideo": false, 35 | "avatar": require('../assets/images/ic3.png'), 36 | "image": require('../assets/images/post3.png'), 37 | "likeCount": 914, 38 | "commentCount": 617, 39 | "shareCount": 758, 40 | "author": "Pace David", 41 | "text": "Irure aliquip sunt sint duis enim Lorem consectetur eiusmod cillum eu laborum do. Reprehenderit quis enim fugiat voluptate proident minim pariatur excepteur elit pariatur. Fugiat culpa commodo aute aute irure amet elit anim sint anim tempor. Fugiat veniam tempor officia aute cillum qui fugiat fugiat. Commodo consectetur laboris sit culpa velit ea non culpa excepteur exercitation sunt ut culpa laborum.\r\nVeniam duis dolore non laboris. Dolor ut occaecat exercitation ea non quis. Exercitation duis est deserunt in duis sit ea aliqua excepteur amet commodo eiusmod. Occaecat consequat reprehenderit ad ullamco duis nostrud duis veniam dolore.\r\n", 42 | "time": "11:00:23" 43 | }, 44 | { 45 | "id": 3, 46 | "isText": false, 47 | "isImage": true, 48 | "isVideo": false, 49 | "avatar": require('../assets/images/ic4.png'), 50 | "image": require('../assets/images/post4.png'), 51 | "likeCount": 101, 52 | "commentCount": 263, 53 | "shareCount": 804, 54 | "author": "Wilda Bentley", 55 | "text": "Eiusmod laboris qui quis id non consequat dolore ullamco velit voluptate commodo ex dolore. Excepteur aliquip amet eu consequat nulla et esse. Lorem tempor dolor quis mollit labore mollit ullamco. Ut laborum nisi dolore irure cillum exercitation nisi exercitation aliquip adipisicing ut. Aliquip sunt nulla exercitation labore pariatur fugiat nulla proident. Duis ad ullamco sint duis aliquip adipisicing eu cupidatat sint officia.\r\nExcepteur culpa qui voluptate do cillum. Velit ad laborum cupidatat sit quis aliquip ipsum proident tempor elit aliquip. Lorem incididunt do nulla et. Incididunt commodo exercitation amet adipisicing nulla et in sit do. Nisi deserunt Lorem aute mollit exercitation proident ea tempor culpa adipisicing reprehenderit laborum ea. Laborum deserunt consequat deserunt nisi anim aliqua cupidatat reprehenderit exercitation. Laboris laborum ipsum irure nulla consequat voluptate sunt sit officia amet nisi mollit non consequat.\r\n", 56 | "time": "09:44:33" 57 | }, 58 | { 59 | "id": 4, 60 | "isText": true, 61 | "isImage": false, 62 | "isVideo": false, 63 | "avatar": require('../assets/images/ic5.png'), 64 | "image": require('../assets/images/post5.png'), 65 | "likeCount": 356, 66 | "commentCount": 222, 67 | "shareCount": 975, 68 | "author": "Gregory Gregory", 69 | "text": "Labore occaecat pariatur ad cillum. Occaecat cupidatat et magna in sint ex reprehenderit deserunt ex aliquip aute excepteur. Dolore reprehenderit deserunt veniam ullamco est tempor deserunt nulla eu nostrud.\r\nSunt incididunt officia cillum magna officia anim aliqua commodo consectetur est. Excepteur in ad nisi officia cupidatat ut sit. Labore aute fugiat exercitation minim aliqua ad ea. Laboris incididunt ullamco quis sint Lorem irure adipisicing.\r\n", 70 | "time": "03:53:32" 71 | }, 72 | { 73 | "id": 5, 74 | "isText": false, 75 | "isImage": true, 76 | "isVideo": false, 77 | "avatar": require('../assets/images/ic6.png'), 78 | "image": require('../assets/images/post6.png'), 79 | "likeCount": 190, 80 | "commentCount": 670, 81 | "shareCount": 280, 82 | "author": "Madge Rose", 83 | "text": "Do occaecat eiusmod anim aute aliqua id. Consequat veniam est reprehenderit duis ex dolore excepteur in incididunt exercitation ipsum culpa voluptate. Amet irure qui mollit esse ea sint Lorem quis. Anim occaecat laborum sint consectetur excepteur qui sint dolor in consequat. Qui esse exercitation magna proident culpa magna nostrud cillum eu irure.\r\nAd velit qui culpa quis proident aliqua adipisicing sit do pariatur non est aute. Anim amet nostrud sint voluptate in do minim laboris reprehenderit irure incididunt non exercitation consectetur. Sit consequat veniam amet quis Lorem sunt labore veniam culpa. Mollit exercitation magna amet labore dolore ut ullamco dolore nulla et deserunt minim nulla. Deserunt eu ea do velit voluptate reprehenderit qui. Velit esse exercitation tempor aliquip consequat in irure deserunt qui proident pariatur. In voluptate id cillum duis veniam ea duis voluptate non nostrud.\r\n", 84 | "time": "02:09:50" 85 | }, 86 | { 87 | "id": 6, 88 | "isText": false, 89 | "isImage": true, 90 | "isVideo": true, 91 | "avatar": require('../assets/images/ic7.png'), 92 | "image": require('../assets/images/post7.png'), 93 | "likeCount": 361, 94 | "commentCount": 939, 95 | "shareCount": 392, 96 | "author": "Suzette Richard", 97 | "text": "In nostrud aliquip duis reprehenderit et qui est Lorem ut ad aliqua. Occaecat esse tempor reprehenderit voluptate occaecat aliqua ullamco amet sit non. Duis ipsum aliquip commodo et excepteur eiusmod cillum cupidatat enim excepteur consequat. Id nulla cupidatat ea non anim sunt officia amet ex esse ipsum et eiusmod. Aliqua culpa esse laborum nisi consectetur nulla in aliquip laborum. Est sunt minim nostrud cillum enim eiusmod aliqua incididunt deserunt sunt voluptate cillum dolor exercitation.\r\nEx consequat amet non eiusmod anim. Aute sunt ut eiusmod ullamco amet. Lorem elit tempor nostrud sit sit est culpa irure anim cillum ea dolore magna.\r\n", 98 | "time": "08:46:02" 99 | }, 100 | { 101 | "id": 7, 102 | "isText": false, 103 | "isImage": true, 104 | "isVideo": false, 105 | "avatar": require('../assets/images/ic8.png'), 106 | "image": require('../assets/images/post8.png'), 107 | "likeCount": 611, 108 | "commentCount": 849, 109 | "shareCount": 613, 110 | "author": "Miranda Thornton", 111 | "text": "In ut irure laborum in non laboris fugiat deserunt eiusmod minim nostrud aliqua. Et in adipisicing nostrud aute ullamco Lorem culpa deserunt culpa nostrud. Consectetur dolore veniam quis voluptate sit nisi cupidatat elit. Quis esse veniam proident minim aliquip eu aliquip est voluptate. Est duis commodo proident id eiusmod ipsum. Pariatur tempor non nulla cupidatat anim veniam incididunt anim Lorem nulla nulla magna nostrud. Consequat consectetur qui elit magna cupidatat anim consequat.\r\nAnim amet eiusmod culpa velit. Dolore adipisicing cupidatat amet commodo culpa. Quis ipsum voluptate quis adipisicing labore officia nulla nostrud eiusmod laborum reprehenderit in reprehenderit ad. Occaecat nulla nisi Lorem ipsum anim reprehenderit. Tempor ipsum non esse sunt adipisicing est veniam veniam est commodo. Velit magna adipisicing deserunt laborum ea in duis pariatur ipsum et nisi velit.\r\n", 112 | "time": "06:00:04" 113 | }, 114 | { 115 | "id": 8, 116 | "isText": false, 117 | "isImage": true, 118 | "isVideo": true, 119 | "avatar": require('../assets/images/ic10.png'), 120 | "image": require('../assets/images/post9.png'), 121 | "likeCount": 267, 122 | "commentCount": 642, 123 | "shareCount": 760, 124 | "author": "Coleen Vazquez", 125 | "text": "Veniam duis quis adipisicing Lorem labore mollit cupidatat fugiat culpa aliquip irure Lorem sint. Occaecat esse irure proident amet in exercitation. Dolore sunt nisi proident duis. Eiusmod Lorem elit velit mollit qui. Ullamco esse adipisicing anim nostrud proident ut esse ex ex qui. Nisi duis ut sunt mollit nulla exercitation id minim.\r\nNisi mollit ad duis id. Eiusmod voluptate anim exercitation duis incididunt sunt quis et nulla ipsum. Exercitation cupidatat Lorem nostrud ipsum amet sunt fugiat consectetur nulla veniam. Ipsum veniam occaecat anim quis dolor cillum anim eu non mollit.\r\n", 126 | "time": "03:17:12" 127 | }, 128 | { 129 | "id": 9, 130 | "isText": false, 131 | "isImage": true, 132 | "isVideo": false, 133 | "avatar": require('../assets/images/ic4.png'), 134 | "image": require('../assets/images/post5.png'), 135 | "likeCount": 596, 136 | "commentCount": 46, 137 | "shareCount": 477, 138 | "author": "Ella Hood", 139 | "text": "Minim magna commodo anim adipisicing aliqua eu ut qui sint. Enim dolore reprehenderit exercitation occaecat id esse adipisicing Lorem veniam. Anim sit velit ullamco laboris id id elit. Commodo mollit ad adipisicing deserunt nisi officia veniam occaecat adipisicing irure labore. Est dolore aute adipisicing ipsum esse deserunt. Dolore sint non mollit amet qui nulla nulla minim commodo sunt culpa ipsum occaecat.\r\nTempor commodo cillum esse magna est proident sint mollit pariatur aute sint. Sit sint ut deserunt non veniam labore anim irure in amet qui mollit incididunt officia. Ipsum proident anim consequat et cillum aute ea velit nisi cillum id et. Amet excepteur reprehenderit eu irure quis velit deserunt id consequat et sint mollit eiusmod mollit. Dolore velit proident sunt duis nostrud eu. Est aute eiusmod aliquip nisi id dolor ea occaecat consectetur voluptate magna. Et consequat ad incididunt cupidatat deserunt veniam esse elit et tempor qui tempor.\r\n", 140 | "time": "11:16:34" 141 | }, 142 | { 143 | "id": 10, 144 | "isText": true, 145 | "isImage": false, 146 | "isVideo": false, 147 | "avatar": require('../assets/images/ic4.png'), 148 | "image": require('../assets/images/post5.png'), 149 | "likeCount": 427, 150 | "commentCount": 446, 151 | "shareCount": 637, 152 | "author": "Barnes Madden", 153 | "text": "Veniam et tempor tempor anim. Dolor id consectetur sit minim cupidatat laborum laboris incididunt ut fugiat cupidatat aliquip. Sit exercitation id sint nisi aliqua adipisicing duis proident minim.\r\nLabore duis ipsum nulla culpa ipsum culpa ad dolore. Lorem anim velit velit consectetur dolore elit consectetur eiusmod id sint aute minim. Nulla laboris anim consectetur reprehenderit non occaecat. Lorem excepteur dolore amet reprehenderit enim mollit Lorem ipsum velit ut ea.\r\n", 154 | "time": "01:30:06" 155 | }, 156 | { 157 | "id": 11, 158 | "isText": true, 159 | "isImage": false, 160 | "isVideo": false, 161 | "avatar": require('../assets/images/ic6.png'), 162 | "image": require('../assets/images/post8.png'), 163 | "likeCount": 186, 164 | "commentCount": 748, 165 | "shareCount": 970, 166 | "author": "Julie Ryan", 167 | "text": "Nulla irure do exercitation veniam nisi pariatur laboris proident tempor mollit. Consectetur proident commodo excepteur mollit occaecat exercitation. Officia sit laborum velit eiusmod tempor ea.\r\nAmet sunt veniam eiusmod occaecat. Consequat adipisicing duis sit tempor adipisicing est minim sit pariatur nisi deserunt nisi labore. Sunt enim dolor cupidatat mollit adipisicing nulla fugiat non pariatur aliqua non Lorem. Aute eiusmod qui commodo nostrud veniam elit Lorem est sit adipisicing qui. Pariatur reprehenderit tempor cupidatat pariatur elit aliqua.\r\n", 168 | "time": "10:45:04" 169 | }, 170 | { 171 | "id": 12, 172 | "isText": false, 173 | "isImage": true, 174 | "isVideo": false, 175 | "avatar": require('../assets/images/ic5.png'), 176 | "image": require('../assets/images/post1.png'), 177 | "likeCount": 624, 178 | "commentCount": 52, 179 | "shareCount": 437, 180 | "author": "Kasey Marsh", 181 | "text": "Enim do consequat mollit consequat non magna sit laborum Lorem sint id consequat ullamco sunt. Voluptate sit Lorem dolore incididunt duis ipsum nulla. Consectetur quis commodo commodo officia deserunt ex laboris culpa laboris et labore nulla.\r\nVeniam deserunt nisi adipisicing eu cillum in cupidatat anim do non. Et nisi esse quis est deserunt dolor do. Est do nisi eiusmod occaecat ad commodo ex proident consequat amet. Proident voluptate qui ea dolor cupidatat. Lorem nisi ea tempor quis excepteur ut nulla duis duis enim veniam.\r\n", 182 | "time": "05:13:31" 183 | } 184 | ]; 185 | export default posts; 186 | -------------------------------------------------------------------------------- /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 | } 63 | } 64 | --------------------------------------------------------------------------------