Hotfix on profile page - responsive &

added pre-cached images for a better speed

Author: groovemen

App.js

@@ -15,7 +15,12 @@ const assetImages = [
   Images.Pro,
   Images.NowLogo,
   Images.iOSLogo,
-  Images.androidLogo
+  Images.androidLogo,
+  Images.ProfilePicture,
+  Images.CreativeTimLogo,
+  Images.InvisionLogo,
+  Images.RegisterBackground,
+  Images.ProfileBackground
 ];
 
 // cache product images

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.0.1] 2019-11-12
+
+### HotFix
+- small fix on responsive for Profile Page
+- added pre-cache for images for a faster experience
+
 ## [1.0.0] 2019-11-11
 
 ### Initial Release

README.md

@@ -8,7 +8,7 @@
 
 Now UI React Native is a fully coded app template built over [Galio.io](https://galio.io/?ref=creativetim), [React Native](https://facebook.github.io/react-native/?ref=creativetim) and [Expo](https://expo.io/?ref=creativetim) to allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components in Galio to make it look like Now UI's KIT, minimalistic and easy to use.
 
-Start your development with a badass Design System for React Native inspired by Now UI KIT. If you like Now UI's KIT, you will love this react native app template! It features a huge number of components and screens built to fit together and look amazing. 
+Start your development with a badass Design System for React Native inspired by Now UI KIT. If you like Now UI's KIT, you will love this react native app template! It features a huge number of components and screens built to fit together and look amazing.
 
 ### FULLY CODED COMPONENTS
 
@@ -17,12 +17,12 @@ Now UI React Native features over 200 variations of components like buttons, inp
 You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. We wanted the design process to be seamless, so switching from image to the real page is very easy to do.
 
 ### Components & Cards
-Now UI React Native comes packed with a large number of components and cards. Putting together a mobile app has never been easier than matching together different components. From the profile screen to a settings screen, you can easily customise and build your screens. We have created multiple options for you to put together and customise into pixel perfect screens. 
+Now UI React Native comes packed with a large number of components and cards. Putting together a mobile app has never been easier than matching together different components. From the profile screen to a settings screen, you can easily customise and build your screens. We have created multiple options for you to put together and customise into pixel perfect screens.
 
 View [ all components/cards here](https://demos.creative-tim.com/now-ui-react-native/index.html#cards).
 
 ### Example Screens
-If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example screens. From onboarding screens to profile or discover screens, you will be able to quickly set up the basic structure for your React Native mobile project. 
+If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example screens. From onboarding screens to profile or discover screens, you will be able to quickly set up the basic structure for your React Native mobile project.
 
 View [all screens here](https://demos.creative-tim.com/now-ui-react-native/index.html#screens).
 
@@ -32,7 +32,7 @@ Let us know your thoughts below. And good luck with development!
 
 ## Table of Contents
 
-* [Versions](#versions) 
+* [Versions](#versions)
 * [Demo](#demo)
 * [Quick Start](#quick-start)
 * [Documentation](#documentation)
@@ -82,40 +82,57 @@ Within the download you'll find the following directories and files:
 ```
 now-ui-react-native/
 ├── App.js
+├── CHANGELOG.md
+├── ISSUE_TEMPLATE.md
+├── LICENSE.md
 ├── README.md
 ├── app.json
-├── assets
+├── assets/
+│   ├── css/
+│   ├── font/
+│   ├── fonts/
+│   │   └── nucleo
+│   ├── icon.png
+│   ├── imgs/
+│   ├── nuk-icons/
+│   │   ├── png/
+│   │   └── svg/
+│   └── splash.png
 ├── babel.config.js
-├── components
+├── components/
 │   ├── Button.js
+│   ├── Card.js
+│   ├── Checkbox.js
 │   ├── DrawerItem.js
 │   ├── Header.js
 │   ├── Icon.js
-│   ├── Card.js
+│   ├── Img.js
+│   ├── Input.js
 │   ├── Select.js
+│   ├── Sliders.js
 │   ├── Switch.js
 │   ├── Tabs.js
 │   └── index.js
-├── constants
+├── constants/
 │   ├── Images.js
 │   ├── Theme.js
-│   ├── index.js
 │   ├── articles.js
+│   ├── index.js
 │   ├── tabs.js
 │   └── utils.js
-├── navigation
+├── navigation/
 │   ├── Menu.js
 │   └── Screens.js
 ├── package.json
-├── screens
-│   ├── Articles.js
-│   ├── Home.js
-│   ├── Elements.js
-│   ├── Onboarding.js
-│   ├── Pro.js
-│   ├── Profile.js
-│   └── Register.js
-
+└── screens/
+    ├── Articles.js
+    ├── Components.js
+    ├── Home.js
+    ├── Onboarding.js
+    ├── Pro.js
+    ├── Profile.js
+    ├── Register.js
+    └── Settings.js
 ```
 
 
@@ -190,4 +207,3 @@ Facebook: <https://www.facebook.com/CreativeTim>
 Dribbble: <https://dribbble.com/creativetim>
 
 Instagram: <https://www.instagram.com/CreativeTimOfficial>
-

app.json

@@ -5,7 +5,7 @@
     "privacy": "public",
     "sdkVersion": "35.0.0",
     "platforms": ["ios", "android"],
-    "version": "1.0.0",
+    "version": "1.0.1",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {

constants/Images.js

@@ -28,7 +28,6 @@ const Products = {
 export default {
   Onboarding,
   Logo,
-
   ProfileBackground,
   ProfilePicture,
   RegisterBackground,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "now-ui-react-native",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Now UI React Native, based on Now UI Design System. Coded by Creative Tim",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {

screens/Profile.js

@@ -40,7 +40,8 @@ const Profile = () => {
                     color='#ffffff'
                     >
                     Ryan Scheinder
-              </Text>
+                  </Text>
+
                   <Text
                     size={16}
                     color="white"
@@ -58,42 +59,46 @@ const Profile = () => {
                 </Block>
                 <Block style={styles.info}>
                   <Block row space="around">
+
                     <Block middle>
                       <Text
                         size={18}
                         color="white"
                         style={{ marginBottom: 4, fontFamily: 'montserrat-bold' }}
                       >
                         2K
-                  </Text>
+                      </Text>
                       <Text style={{ fontFamily: 'montserrat-regular' }} size={14} color="white">
                         Friends
-                  </Text>
+                      </Text>
                     </Block>
+
                     <Block middle>
                       <Text
                         color="white"
                         size={18}
                         style={{ marginBottom: 4, fontFamily: 'montserrat-bold' }}
                       >
                         26
-                  </Text>
+                      </Text>
                       <Text style={{ fontFamily: 'montserrat-regular' }} size={14} color="white">
                         Comments
-                  </Text>
+                        </Text>
                     </Block>
+
                     <Block middle>
                       <Text
                         color="white"
                         size={18}
                         style={{ marginBottom: 4, fontFamily: 'montserrat-bold' }}
                       >
                         48
-                  </Text>
+                      </Text>
                       <Text style={{ fontFamily: 'montserrat-regular' }} size={14} color="white">
                         Bookmarks
-                  </Text>
+                      </Text>
                     </Block>
+
                   </Block>
                 </Block>
               </Block>
@@ -223,17 +228,18 @@ const styles = StyleSheet.create({
   },
 
   info: {
-    marginTop: 40,
-    paddingHorizontal: 10
+    marginTop: 30,
+    paddingHorizontal: 10,
+    height: height * 0.8
   },
   avatarContainer: {
     position: 'relative',
     marginTop: -80
   },
   avatar: {
-    width: 124,
-    height: 124,
-    borderRadius: 62,
+    width: thumbMeasure,
+    height: thumbMeasure,
+    borderRadius: 50,
     borderWidth: 0
   },
   nameInfo: {