Merge pull request #2 from gustavo-amaro/feature/new_ui

change application ui | better images quality
gustavo-amaro · Sep 5, 2020 · 997b363 · 997b363
2 parents 5e5d2ee + 2526c5d
commit 997b363
Show file tree

Hide file tree

Showing 6 changed files with 5,853 additions and 11 deletions.
diff --git a/.expo-shared/assets.json b/.expo-shared/assets.json
diff --git a/pages/Main/components/Content/index.tsx b/pages/Main/components/Content/index.tsx
@@ -36,7 +36,7 @@ function Content({navigation=null}) {
 
     const styles = StyleSheet.create({
         list: {
-            height: '118.5%',
+            height: '100%'
         },
         listContent: {
             alignItems: 'center',
@@ -81,7 +81,7 @@ function Content({navigation=null}) {
                 numColumns={2}
                 keyExtractor={(item, index) => index.toString()}
                 onEndReached={handleLoadMore}
-                onEndReachedThreshold={0.0000000001}
+                onEndReachedThreshold={0}
                 ListFooterComponent={renderFooterLoading}
             />
         </Container>

diff --git a/pages/Main/components/Content/styles.ts b/pages/Main/components/Content/styles.ts
@@ -2,14 +2,16 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   display: flex;
+  position: absolute;
   flex-direction: row;
   flex-wrap: wrap;
   background: #fff;
-  width: 90%;
-  height: 80%;
+  width: 100%;
+  height: 75%;
   z-index: 4;
-  margin-top: 25%;
-  border-radius: 10px;
+  bottom: 0;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
 `;
 
 export const MovieContainer = styled.View`

diff --git a/pages/MovieDescription/components/Content/styles.ts b/pages/MovieDescription/components/Content/styles.ts
@@ -4,10 +4,11 @@ export const Container = styled.ScrollView`
   display: flex;
   position: absolute;
   background: #fff;
-  width: 90%;
-  height: 68%;
+  width: 100%;
+  height: 70%;
   z-index: 4;
-  top: 27%;
-  border-radius: 10px;
+  bottom: 0;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
   padding: 10px;
 `;
diff --git a/pages/MovieDescription/index.tsx b/pages/MovieDescription/index.tsx
@@ -20,7 +20,7 @@ import api from "../../services/api";
 import Icon from "react-native-vector-icons/FontAwesome";
 
 function MovieDescription({ route, navigation }) {
-  const imageUrl = "https://image.tmdb.org/t/p/w500";
+  const imageUrl = "https://image.tmdb.org/t/p/original";
   const { movieId } = route.params;
   const [movie, setMovie] = useState({});
   const [actors, setActors] = useState([]);