FirebaseのFirestoreで データを登録する Firebase 10.1.0 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import React from 'react'; import { TextInput } from 'react-native'; import …

Expoでプロジェクトを作成すると、assetsフォルダにfavicon.pngという画像が用意されている。これを、FirebaseのStorageにアップロードしてみる。そして アップロードしたファイルをダウンロードする。そして、アップロードしたファイルを削除する。 Firebas…

FirebaseのAuthenticationを利用します。 Firebaseのバージョンは 10.1.0です。 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View,TextInput,Button } from 'react-native'; import React from 'react'; import {getAuth} fro…

カウンターを作成してみます。 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import {useState} from 'react'; function SubCounter(props){ const increaseCount = () =>{ props.inc(); …

Firebaseとは？ (193) 【001】Firebaseとは - YouTube FirebaseはGoogleが提供するサービスなのですね。 使いたいサービスは以下の3つです。 1. Authentication 2.Storage 3.Firestore 1. Authenticationはログイン認証を自分で一から作らなくても簡単に作れ…

下記を参考 Expo の Expo Application Services (EAS) をざっくりと説明してみる (zenn.dev) React Native + ExpoのアプリにHermes、EAS Build、EAS Submitを導入した (zenn.dev)

遷移する画面にパラメータを渡すのではなく、reduxのようにしたい場合があると思います。ここではreduxではなくzustandを導入します。 （プロジェクト）/App.js import { StatusBar } from 'expo-status-bar'; import { Button } from 'react-native'; impor…

React Navigationというライブラリを使用します。 import { StatusBar } from 'expo-status-bar'; import { Button, StyleSheet, Text, View } from 'react-native'; import { NavigationContainer} from '@react-navigation/native'; import { createStackN…

import { StatusBar } from 'expo-status-bar'; import { FlatList, StyleSheet, Text, TouchableOpacity, View, Alert} from 'react-native'; const DATA = [ {id:1, title:'JavaScript'}, {id:2, title:'Java'}, {id:3, title:'Python'} ]; const renderIt…

import { StatusBar } from 'expo-status-bar'; import { FlatList, StyleSheet, Text, View } from 'react-native'; const DATA = [ {id:1, title:'JavaScript'}, {id:2, title:'Java'}, {id:3, title:'Python'} ]; const renderItem = ({item}) => { retur…

import { StatusBar } from 'expo-status-bar'; import { TextInput } from 'react-native'; import { StyleSheet, Text, View, Button} from 'react-native'; import { useState } from 'react'; export default function App() { const [inputText, setInp…

Textについては、下記参照 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Text style={styles.text}>Good Morning</Text> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.…