Blog article page ReactNative

index.js

import { StyleSheet, Text, View, ScrollView, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import orange from "../assets/tutorials/orange.png";
import brown from "../assets/tutorials/brown.png";
import white from "../assets/tutorials/white.png";

export default function App() {

    return (
        <SafeAreaView edges={['top']}>
            <ScrollView showsVerticalScrollIndicator={false}>
                <View className="flex-1 space-y-2 p-4">
                    <Text className="text-3xl font-pbold">The Cultural Significance of Greenhouse</Text>

                    <View className="flex-1 flex-row items-center space-x-4">
                        <Image source={orange} resizeMode="contain" className="w-[40px] h-[40px] rounded-[20px]" />
                        <Text className="text-base text-gray-800">Francesco Leoni</Text>
                    </View>

                    <View className="flex-1 space-y-2 py-6">
                        <Text className="text-xl font-psemibold">Intro</Text>
                        <Text className="leading-10 text-base font-pregular">The greenhouse is a commonplace architectural typology, a frequent fixture in a host of cities, built to shield plants from the elements - from excess heat or cold or to prolong the growing season of crops.</Text>
                        <Text className="leading-10 text-base font-pregular pt-4">The greenhouse is a commonplace architectural typology, a frequent fixture in a host of cities, built to shield plants from the elements - from excess heat or cold or to prolong the growing season of crops.</Text>
                    </View>

                    <View className="flex-1 space-y-0 py-6">
                        <Text className="text-xl font-psemibold">Visuals</Text>
                        <Text className="text-sm font-pregular text-gray-500">3 images</Text>

                        <View className="flex flex-row items-center space-x-2 pt-4">
                            <Image source={orange} resizeMode="cover" className="aspect-square w-full rounded-[25px]" />
                        </View>

                        <View className="flex flex-row items-center space-x-2 pt-4">
                            <Image source={brown} resizeMode="cover" className="w-full rounded-[25px] h-[130px]" />
                        </View>

                        <View className="flex flex-row items-center space-x-4 pt-4">
                            <Image source={white} resizeMode="cover" className="basis-3/4 rounded-[25px] h-[100px]" />

                            <View className="bg-blue-100 flex-1 items-center justify-center basis-1/4 shrink rounded-[25px] h-[100px]">
                                <Text className="font-pbold text-2xl text-gray-500">+17</Text>
                            </View>
                        </View>
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}