react-native-profile-card/App.js at main · ferrnd/react-native-profile-card · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, Image, View } from "react-native";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.caixa}>
        <View style={styles.icon}>
          <Image
            source={{
              uri: "https://i.pinimg.com/736x/e1/6d/81/e16d81542882cefe468896ca845c0a3a.jpg",
            }}
            style={styles.image}
          />
        </View>
        <Text style={styles.text}>Fernando Santos</Text>
        <Text>Full Stack Developer</Text>
        <View style={styles.row}>
          <FontAwesome name="github" size={55} color="black" />
          <FontAwesome name="linkedin-square" size={55} color="#0077b5" />
          <MaterialIcons name="email" size={55} color="#ff7c7c" />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: "flex",
    backgroundColor: "#000000",
    alignItems: "center",
    justifyContent: "center",
  },

  text: {
    color: "#000000",
    fontSize: 25,
    fontWeight: "bold",
    marginBottom: 7,
  },

  caixa: {
    justifyContent: "center",
    alignItems: "center",
    width: 300,
    height: 300,
    backgroundColor: "#fff",
    borderRadius: 30,
  },

  image: {
    width: 110,
    height: 110,
    borderRadius: 10,
  },

  row: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    marginTop: 20,
    gap: 20,
  },

  icon: {
    justifyContent: "center",
    backgroundColor: "#e6e6e6",
    alignItems: "center",
    width: 110,
    height: 110,
    borderRadius: 100,
    overflow: "hidden",
    marginBottom: 20,
  },
});