Skip to content

GitLab

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

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