Working with Core Components

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

const MyComponent = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello, Expo!</Text>
    </View>
  );
};

export default MyComponent;

<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
  Hello, Expo!
</Text>

<Text numberOfLines={1} ellipsizeMode="tail">
  This is a very long text that will be truncated with an ellipsis at the end.
</Text>

import React from 'react';
import { ScrollView, Text } from 'react-native';

const MyScrollView = () => {
  return (
    <ScrollView>
      <Text>Item 1</Text>
      <Text>Item 2</Text>
      <Text>Item 3</Text>
    </ScrollView>
  );
};

export default MyScrollView;

import React from 'react';
import { ScrollView, View, Text } from 'react-native';

const HorizontalScrollView = () => {
  return (
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
      <View style={{ width: 200, height: 100 }}>
        <Text>Item 1</Text>
      </View>
      <View style={{ width: 200, height: 100 }}>
        <Text>Item 2</Text>
      </View>
    </ScrollView>
  );
};

export default HorizontalScrollView;

import React from 'react';
import { FlatList, Text, View } from 'react-native';

const renderItem = ({ item }) => (
  <View style={{ padding: 10 }}>
    <Text>{item.name}</Text>
  </View>
);

const MyFlatList = () => {
  const data = [
    { id: '1', name: 'Item 1' },
    { id: '2', name: 'Item 2' },
    { id: '3', name: 'Item 3' },
  ];

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
};

export default MyFlatList;

import React from 'react';
import { FlatList, Text, View } from 'react-native';

const renderItem = ({ item }) => (
  <View style={{ width: 100, padding: 10 }}>
    <Text>{item.name}</Text>
  </View>
);

const HorizontalFlatList = () => {
  const data = [
    { id: '1', name: 'Item 1' },
    { id: '2', name: 'Item 2' },
    { id: '3', name: 'Item 3' },
  ];

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      horizontal
    />
  );
};

export default HorizontalFlatList;

import React from 'react';
import { FlatList, Text, View } from 'react-native';

const renderItem = ({ item }) => (
  <View style={{ width: 100, height: 100, padding: 10 }}>
    <Text>{item.name}</Text>
  </View>
);

const GridFlatList = () => {
  const data = [
    { id: '1', name: 'Item 1' },
    { id: '2', name: 'Item 2' },
    { id: '3', name: 'Item 3' },
    { id: '4', name: 'Item 4' },
  ];

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      numColumns={2}
    />
  );
};

export default GridFlatList;

import React from 'react';
import { SectionList, Text, View } from 'react-native';

const data = [
  {
    title: 'A',
    data: ['Apple', 'Apricot'],
  },
  {
    title: 'B',
    data: ['Banana', 'Blueberry'],
  },
];

const renderItem = ({ item }) => (
  <View style={{ padding: 10 }}>
    <Text>{item}</Text>
  </View>
);

const renderSectionHeader = ({ section }) => (
  <View style={{ backgroundColor: '#f0f0f0', padding: 10 }}>
    <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>
  </View>
);

const MySectionList = () => (
  <SectionList
    sections={data}
    renderItem={renderItem}
    renderSectionHeader={renderSectionHeader}
    keyExtractor={(item, index) => item + index}
  />
);

export default MySectionList;

<Image
  source={{ uri: "https://example.com/image.jpg" }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

<Image
  source={require("./assets/images/logo.png")}
  style={{ width: 100, height: 100 }}
/>

import React from 'react';
import { ImageBackground, View, Text } from 'react-native';

const BackgroundExample = () => {
  return (
    <ImageBackground
      source={{ uri: 'https://example.com/background.jpg' }}
      style={{ width: '100%', height: '100%' }}
      resizeMode="cover"
    >
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: 'white', fontSize: 20 }}>Hello World</Text>
      </View>
    </ImageBackground>
  );
};

export default BackgroundExample;

<TextInput
  value={text}
  onChangeText={setText}
  placeholder="Enter your name"
  style={{ borderWidth: 1, padding: 8 }}
/>

<TextInput
  value={password}
  onChangeText={setPassword}
  placeholder="Enter password"
  secureTextEntry
  style={{ borderWidth: 1, padding: 8 }}
/>

import { Button } from 'react-native';

const MyButton = () => {
  const handlePress = () => {
    console.log('Button pressed!');
  };

  return (
    <Button
      title="Press Me"
      onPress={handlePress}
      color="#007AFF"
    />
  );
};

import { Button } from 'react-native';

const DisabledButton = () => {
  return (
    <Button
      title="Cannot Press"
      onPress={() => {}}
      disabled={true}
    />
  );
};

<Pressable
  onPress={() => console.log('Pressed!')}
  style={({ pressed }) => [
    styles.button,
    { backgroundColor: pressed ? '#0055aa' : '#0077cc' }
  ]}
>
  <Text style={styles.text}>Press Me</Text>
</Pressable>

<Pressable
  onPress={() => console.log('Short press')}
  onLongPress={() => console.log('Long press')}
  style={styles.longPressButton}
>
  <Text>Long Press Me</Text>
</Pressable>

<TouchableOpacity
  onPress={() => console.log('Button pressed')}
  activeOpacity={0.5}
>
  <Text>Press Me</Text>
</TouchableOpacity>

<ActivityIndicator size="large" color="#0000ff" />