コードをストックするアプリ作成⑤-a

（プロジェクト名）/ App.js

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View, Button } from 'react-native';

import RegisterScreen from './src/Screens/RegisterScreen';

import ListScreen from './src/Screens/ListScreen';

import AuthScreen from './src/Screens/AuthScreen';

import { createStackNavigator } from '@react-navigation/stack';

import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({navigation}){

  return(

      <View>

        <Text>HomeScreen</Text>

        <View style={styles.button}>

          <Button

             title="検索画面"

          />

        </View>

        <View style={styles.button}>

          <Button

             title="登録画面"

             onPress={() => navigation.navigate("RegisterScreen")}

          />

        </View>

        <View style={styles.button}>

          <Button

             title="一覧画面"

             onPress={() => navigation.navigate("ListScreen")}

          />

        </View>

      </View>

  )

}

export default function App() {

  const Stack = createStackNavigator();

  return (

    <NavigationContainer>

      <Stack.Navigator>

        <Stack.Screen component={HomeScreen} name="HomeScreen"/>

        <Stack.Screen component={RegisterScreen} name="RegisterScreen"/>

        <Stack.Screen component={ListScreen} name="ListScreen"/>

      </Stack.Navigator>

    </NavigationContainer>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

  button: {

    marginBottom: 10

  }

});

(プロジェクト名）/ src/ Screens / RegisterScreen.js

import {View, StyleSheet,Text, Button, TextInput, ScrollView, Alert, FlatList} from 'react-native';

import { useState, useEffect } from 'react';

import { getFirestore, addDoc, doc, collection, getDocs, QuerySnapshot, deleteDoc, getDoc } from 'firebase/firestore';

import { firebaseConfig } from './AuthScreen';

import {getApps, initializeApp} from 'firebase/app';

if(getApps().length == 0){

    const app = initializeApp(firebaseConfig);

}

const db = getFirestore();

const DATA = [

   {id:1, title:'JavaScript', code:"const value = 12;"},

   {id:2, title:'Java', code:"public static void main(String args)"},

   {id:3, title:'Python', code:"def"}

];

const itemsCollection = collection(db, 'items');

export default function RegisterScreen(props){

    const {navigation} = props;

    const [title, setTitle] = useState("");

    const [code, setCode] = useState("");

    const [items, setItems] = useState();

    //データ取得用配列

    const arrayList = [];

    const addItem= () =>{

        addDoc(itemsCollection, {title, code})

        .then(doc =>{

            console.log(doc.id);

        })

        Alert.alert('登録されました');

        setTitle("");

        setCode("");

    }

    const getItems = ()=>{

      getDocs(itemsCollection)

      .then(querySnapshot => {

        querySnapshot.forEach(doc =>{

          arrayList.push({id: doc.id, ...doc.data()});

          setItems(arrayList);

          console.log(doc.id,"=>",doc.data());

        })

      })

    }

    useEffect(() => {

      getItems();

    },[title])

    const deleteItem = (id) =>{

      const ref = doc(db, "items",id);

      deleteDoc(ref);

      getItems();

    }

    const renderItem = ({item}) =>{

      return(

        <View style={{flex:1, flexDirection:"row"}}>

          <Text>{item.title}</Text>

          <Button

             title="delete"

             onPress={() => deleteItem(item.id)}

          />

        </View>

      )

    }

   

    return(

     <View>

      <Text>タイトル</Text>

      <TextInput

        style={{borderWidth: 1, width:200}}

        value={title}

        onChangeText={text => setTitle(text)}

      />

      <Text>テキスト</Text>

      <TextInput

        style={{borderWidth: 1, width:360,marginBottom:20}}

        value={code}

        onChangeText={text => setCode(text)}

        multiline={true}

        numberOfLines={4}

      />

      <Button

        title='登録'

        onPress={() => addItem()}

      />

      <FlatList

        data={items}

        renderItem={renderItem}

      />

     </View>

    )

}

ちなみに、いつのまにか１００記事達成のようです。