Реагировать на родной пользовательский интерфейс

Источники вдохновения: https://dribbble.com/shots/16496304-Fitness-App-Running-Tracker

Подписывайтесь на нас больше таких шорт

Кодекс

import { FontAwesome } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import React from "react";
import {
  View,
  Text,
  ImageBackground,
  StyleSheet,
  useWindowDimensions,
  Button,
  Pressable,
} from "react-native";

const HomeScreen = () => {
  const { height, width } = useWindowDimensions();
  return (
    <View style={{ flex: 1, backgroundColor: "white" }}>
      <ImageBackground
        style={[StyleSheet.absoluteFillObject, {}]}
        source={{
          uri: "https://images.unsplash.com/photo-1470468969717-61d5d54fd036?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fHJ1bm5pbmd8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
        }}
      />
      <LinearGradient
        colors={["transparent", "#000000"]}
        start={{ x: 0, y: -0.5 }}
        style={{ flex: 1, justifyContent: "flex-end" }}
      >
        <View
          style={{
            height: height * 0.65,
            width,
            alignItems: "center",
            padding: 16,
          }}
        >
          <Text style={{ fontSize: 50, color: "white", fontWeight: "700" }}>
            Welcome
          </Text>
          <Text
            style={{
              fontSize: 20,
              marginTop: 16,
              color: "#FEFBF3",
              textAlign: "center",
              fontWeight: "300",
            }}
          >
            You are only few steps away from success
          </Text>

          <Text
            style={{
              fontSize: 14,
              marginTop: 16,
              color: "#9D9D9D",
              textAlign: "center",
              fontWeight: "300",
            }}
          >
            Already Have an Account?
          </Text>
          <Pressable
            style={{
              marginTop: 16,
              backgroundColor: "#2D46B9",
              paddingHorizontal: 16,
              paddingVertical: 14,
              borderRadius: 8,
              width: "100%",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text
              style={{
                fontSize: 16,

                color: "#9D9D9D",
                textAlign: "center",
                fontWeight: "700",
              }}
            >
              Login
            </Text>
          </Pressable>

          <Text
            style={{
              fontSize: 14,
              marginTop: 16,
              color: "#9D9D9D",
              textAlign: "center",
              fontWeight: "300",
            }}
          >
            Create a new account
          </Text>
          <Pressable
            style={{
              marginTop: 16,
              backgroundColor: "#343A40",
              paddingHorizontal: 16,
              paddingVertical: 14,
              borderRadius: 8,
              width: "100%",
              flexDirection: "row",
              justifyContent: "space-evenly",
              alignItems: "center",
            }}
          >
            <FontAwesome name="facebook-square" size={22} color="white" />
            <Text
              style={{
                fontSize: 16,
  
                color: "#fff",
                textAlign: "center",
                fontWeight: "700",
              }}
            >
              Continue with Facebook
            </Text>
          </Pressable>
          <Pressable
            style={{
              marginTop: 16,
              backgroundColor: "#343A40",
              paddingHorizontal: 16,
              paddingVertical: 14,
              borderRadius: 8,
              width: "100%",
              flexDirection: "row",
              justifyContent: "space-evenly",
              alignItems: "center",
            }}
          >
            <FontAwesome name="google-plus" size={22} color="white" />
            <Text
              style={{
                fontSize: 16,
   
                color: "#fff",
                textAlign: "center",
                fontWeight: "700",
              }}
            >
              Continue with Google
            </Text>
          </Pressable>
          <Pressable
            style={{
              marginTop: 16,
              backgroundColor: "#343A40",
              paddingHorizontal: 16,
              paddingVertical: 14,
              borderRadius: 8,
              width: "100%",
              flexDirection: "row",
              justifyContent: "space-evenly",
              alignItems: "center",
            }}
          >
            <FontAwesome name="facebook-square" size={22} color="white" />
            <Text
              style={{
                fontSize: 16,
               
                color: "#fff",
                textAlign: "center",
                fontWeight: "700",
              }}
            >
              Continue with mail
            </Text>
          </Pressable>
         </View>
      </LinearGradient>
    </View>
  );
};

export default HomeScreen;