add webview

package.json

@@ -16,6 +16,7 @@
     "react-native-gesture-handler": "^1.4.1",
     "react-native-reanimated": "^1.2.0",
     "react-native-vector-icons": "^6.6.0",
+    "react-native-webview": "^7.0.5",
     "react-navigation": "^4.0.4",
     "react-navigation-stack": "^1.7.3",
     "reactotron-react-native": "^3.6.5",

src/pages/User/index.js

@@ -1,7 +1,19 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import api from '../../services/api';
-import { Container, Header, Avatar, Name, Bio } from './styles';
+import {
+  Container,
+  Header,
+  Avatar,
+  Name,
+  Bio,
+  Starred,
+  OwnerAvatar,
+  Info,
+  Title,
+  Author,
+  Stars,
+} from './styles';
 
 export default class User extends Component {
   static navigationOptions = ({ navigation }) => ({
@@ -41,6 +53,20 @@ export default class User extends Component {
           <Name>{user.name}</Name>
           <Bio>{user.bio}</Bio>
         </Header>
+
+        <Stars
+          data={stars}
+          keyExtractor={star => String(star.id)}
+          renderItem={({ item }) => (
+            <Starred>
+              <OwnerAvatar source={{ uri: item.owner.avatar_url }} />
+              <Info>
+                <Title>{item.name}</Title>
+                <Author>{item.owner.login}</Author>
+              </Info>
+            </Starred>
+          )}
+        />
       </Container>
     );
   }

src/pages/User/styles.js

@@ -1,11 +1,77 @@
 import styled from 'styled-components/native';
 
-export const Container = styled.View``;
+export const Container = styled.View`
+  flex: 1;
+  padding: 30px;
+`;
 
-export const Header = styled.View``;
+export const Header = styled.View`
+  align-items: center;
+  padding-bottom: 20px;
+  border-bottom-width: 1px;
+  border-color: #eee;
+`;
 
-export const Avatar = styled.Image``;
+export const Avatar = styled.Image`
+  width: 100px;
+  height: 100px;
+  border-radius: 50px;
+  background: #eee;
+`;
 
-export const Name = styled.Text``;
+export const Name = styled.Text`
+  font-size: 20px;
+  color: #333;
+  font-weight: bold;
+  margin-top: 10px;
+  text-align: center;
+`;
 
-export const Bio = styled.Text``;
+export const Bio = styled.Text`
+  font-size: 14px;
+  line-height: 18px;
+  color: #999;
+  margin-top: 5px;
+  text-align: center;
+`;
+
+export const Stars = styled.FlatList.attrs({
+  showsVerticalScrollIndicator: false,
+})`
+  margin-top: 20px;
+`;
+
+export const Starred = styled.View`
+  background: #f5f5f5;
+  border-radius: 4px;
+  padding: 10px 15px;
+  margin-bottom: 20px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const OwnerAvatar = styled.Image`
+  height: 42px;
+  width: 42px;
+  border-radius: 21px;
+  background: #eee;
+`;
+
+export const Info = styled.View`
+  flex: 1;
+  margin-left: 10px;
+`;
+
+export const Title = styled.Text.attrs({
+  numberOfLines: 1,
+})`
+  font-size: 15px;
+  font-weight: bold;
+  color: #333;
+`;
+
+export const Author = styled.Text`
+  font-size: 13px;
+  color: #666;
+  margin-top: 2px;
+`;

yarn.lock

@@ -2301,7 +2301,7 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
-escape-string-regexp@^1.0.5:
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -3324,7 +3324,7 @@ inquirer@^6.4.1:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-invariant@^2.2.4:
+invariant@2.2.4, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -5578,6 +5578,14 @@ react-native-vector-icons@^6.6.0:
     prop-types "^15.6.2"
     yargs "^13.2.2"
 
+react-native-webview@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-7.0.5.tgz#1dd9d4f2856bda86a40222eca3612bf2152bacd3"
+  integrity sha512-FWY3tjbyV3Uhuw1JxJ0zs2HspJ5HAsIfkJaquURsVWQnTdZPnkSQjHWQp0PzGIwJ1PPVOA/gnhRmd7SZU/Br5Q==
+  dependencies:
+    escape-string-regexp "1.0.5"
+    invariant "2.2.4"
+
 [email protected]:
   version "0.60.5"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.60.5.tgz#3c1d9c06a0fbab9807220b6acac09488d39186ee"