Skip to content

GitLab

ThaliApp
ThaliApp
Commit ee41134d authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files
Options

Add gradient view and style drawer header

parent b2f4dd3a
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 75 deletions
.eslintrc.json
View file @ ee41134d
......@@ -45,6 +45,16 @@
"react/jsx-filename-extension": 0,
"react/prefer-stateless-function": 1,
"import/prefer-default-export": 1
},
"settings": {
"import/resolver": {
"node": {
"extensions": [
".js",
".android.js",
".ios.js"
]
}
}
}
}
android/app/build.gradle
View file @ ee41134d
......@@ -127,6 +127,7 @@ android {
}
dependencies {
compile project(':react-native-linear-gradient')
compile project(':react-native-vector-icons')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
......
android/app/src/main/java/com/thaliapp/MainApplication.java
View file @ ee41134d
......@@ -3,6 +3,7 @@ package com.thaliapp;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.BV.LinearGradient.LinearGradientPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
......@@ -24,6 +25,7 @@ public class MainApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new LinearGradientPackage(),
new VectorIconsPackage()
);
}
......
android/settings.gradle
View file @ ee41134d
rootProject.name = 'ThaliApp'
include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
......
app/components/Sidebar.js
View file @ ee41134d
import React from 'react';
import { Text, View, Image, TouchableHighlight } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { colors } from '../style';
......@@ -51,6 +52,7 @@ const Sidebar = (props) => {
style={styles.headerImage}
resizeMode="cover"
>
<LinearGradient colors={['#55000000', '#000000']} style={styles.headerGradient} />
<Image
source={{ uri: props.photo }}
style={styles.profileImage}
......
app/components/style/sidebar.js
View file @ ee41134d
......@@ -9,23 +9,32 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
},
headerButton: {
flex: 1,
height: 148,
},
headerImage: {
flex: 1,
width: null,
height: null,
justifyContent: 'space-around',
paddingLeft: 10,
height: 148,
padding: 16,
flexDirection: 'column',
justifyContent: 'space-between',
},
headerGradient: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
opacity: 0.6,
},
profileImage: {
width: 100,
height: 100,
borderRadius: 50,
width: 64,
height: 64,
borderRadius: 32,
},
nameField: {
color: colors.white,
fontSize: 24,
fontFamily: 'sans-serif-medium',
fontSize: 14,
},
buttonList: {
flex: 3,
......
ios/ThaliApp.xcodeproj/project.pbxproj
View file @ ee41134d
......@@ -46,6 +46,7 @@
DD0BDA6EC5B84A00B22A1D59 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0EBF699C4D43413C9CCE8127 /* Octicons.ttf */; };
55F8857C1B5F455D81EBEF10 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FF381FFBF70744E6865413C2 /* SimpleLineIcons.ttf */; };
B4E7CD24D4FD4998A35D2106 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2A30344F7F0A4E50A76BDA3F /* Zocial.ttf */; };
2300BE6A0C594A9C89D758EE /* libBVLinearGradient.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E6D278AC30A247889CAC37CD /* libBVLinearGradient.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
......@@ -277,6 +278,8 @@
0EBF699C4D43413C9CCE8127 /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
FF381FFBF70744E6865413C2 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
2A30344F7F0A4E50A76BDA3F /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
5A90BA3FF7F8422A9150FDAA /* BVLinearGradient.xcodeproj */ = {isa = PBXFileReference; name = "BVLinearGradient.xcodeproj"; path = "../node_modules/react-native-linear-gradient/BVLinearGradient.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
E6D278AC30A247889CAC37CD /* libBVLinearGradient.a */ = {isa = PBXFileReference; name = "libBVLinearGradient.a"; path = "libBVLinearGradient.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
......@@ -304,6 +307,7 @@
00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
FDCE2997A2D946FD9198AC0A /* libRNVectorIcons.a in Frameworks */,
2300BE6A0C594A9C89D758EE /* libBVLinearGradient.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
......@@ -471,6 +475,7 @@
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
A0A689B11A004758B19C64CE /* RNVectorIcons.xcodeproj */,
5A90BA3FF7F8422A9150FDAA /* BVLinearGradient.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
......@@ -1028,10 +1033,12 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
);
};
name = Debug;
......@@ -1053,10 +1060,12 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
);
};
name = Release;
......@@ -1079,6 +1088,7 @@
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
);
};
name = Debug;
......@@ -1100,6 +1110,7 @@
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
);
};
name = Release;
......@@ -1130,10 +1141,12 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
);
};
name = Debug;
......@@ -1164,10 +1177,12 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
);
};
name = Release;
......@@ -1193,6 +1208,7 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
};
name = Debug;
......@@ -1218,6 +1234,7 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
};
name = Release;
......
ios/ThaliApp/Info.plist
View file @ ee41134d
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>ThaliApp</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>NSLocationWhenInUseUsageDescription</key>
<string/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
<key>UIAppFonts</key>
<array>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>FontAwesome.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>Octicons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Zocial.ttf</string>
</array>
</dict>
</plist>
\ No newline at end of file
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>ThaliApp</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>NSLocationWhenInUseUsageDescription</key>
<string/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
<key>UIAppFonts</key>
<array>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>FontAwesome.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>Octicons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Zocial.ttf</string>
</array>
</dict>
</plist>
yarn.lock
View file @ ee41134d
......@@ -4244,6 +4244,10 @@ react-native-git-upgrade@^0.2.7:
shelljs "^0.7.5"
yeoman-environment "1.5.3"
react-native-linear-gradient@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.0.0.tgz#7442c00e1fcd9fca329119dcbaf744d12bcd1b5a"
react-native-vector-icons@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.0.1.tgz#39c05d2e775deeb98d5afdbda5dcf67965ff674f"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment