React Native Core Components

<View>
  <Text>Hello New React App</Text>
</View>

import { Text, View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Hello New React App</Text>
    </View>
  );
}

<View>
   <Text style={{ color: "yellow" }}>Hello New React App</Text>
</View>

import { Text, View, Image } from "react-native";
const logoImg = require("../assets/images/adaptive-icon.png");

export default function Index() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Image source={logoImg} />
    </View>
  );
}

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
   <Image source={logoImg} style={{ width: 300, height: 300 }} />
</View>

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
   <Image source={{ uri: "https://picsum.photos/300"}} style={{ width: 300, height: 300 }} />
</View>

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <ImageBackground source={logoImg}>
        <Text>Text On Background</Text>
    </ImageBackground>
</View>

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
   <ImageBackground source={logoImg} style={{ flex: 1 }}>
        <Text>Text On Background</Text>
   </ImageBackground>
</View>

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Image source={logoImg} style={{ width: 300, height: 300 }} />
      <Text style={{ padding: 30 }}>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
      molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
      numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
      optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
      obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
      nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
      tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
      quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos 
      sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
      recusandae alias error harum maxime adipisci amet laborum. Perspiciatis 
      minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit 
      quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur 
      fugiat, temporibus enim commodi iusto libero magni deleniti quod quam 
      consequuntur! Commodi minima excepturi repudiandae velit hic maxime
      doloremque. Quaerat provident commodi consectetur veniam similique ad 
      earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo 
      fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore 
      suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
      modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam 
      totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam 
      quasi aliquam eligendi, placeat qui corporis!
      </Text>
      <Image source={logoImg} style={{ width: 300, height: 300 }} />
    </View>

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
  <ScrollView>
    <Image source={logoImg} style={{ width: 300, height: 300 }} />
    <Text style={{ padding: 30 }}>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
    ...
    </Text>
    <Image source={logoImg} style={{ width: 300, height: 300 }} />
  </ScrollView>
</View>

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
   <Button title="Press" onPress={() => console.log("Botton pressed")} color="blue" />
</View>

<View style={{ flex: 1, justifyContent: "center", alignItems: "center", padding: 50 }}>
      <Button title="Press" onPress={() => console.log("Botton pressed")} color="blue" />

      <Pressable onPress={() => console.log("Image pressed")}>
        <Image source={logoImg} style={{ width: 300, height: 300 }} />
      </Pressable>

      <Pressable onPress={() => console.log("Text pressed")}>
        <Text style={{ color: "red" }}>Hello New React App</Text>
      </Pressable>
</View>

import { useState } from "react";
import { Text, View, Button, Modal } from "react-native";

export default function Index() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center", padding: 50 }}>
      <Button title="Press" onPress={() => setIsModalVisible(true)} color="blue" />

      <Modal 
        visible={isModalVisible}
        onRequestClose={() => setIsModalVisible(false)}>

        <View style={{ flex: 1, backgroundColor: "lightblue", padding: 50 }}>
          <Text>Modal Text</Text>
          <Button title="Close" onPress={() => setIsModalVisible(false)} color="midnightblue" />
        </View>
        
      </Modal>
    </View>
  );
}