Expo Router v3 beta is now available | by Evan Bacon | Dec, 2023 | Exposition 上記HPの中から抜粋 Expo Router v3 only works with Expo SDK 50. SDK49を使用するなら、Expo Router はバージョン2を学ぶべきである。

App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import {store} from './redux/store'; import {Provider, useDispatch, useSelector} from 'react-redux'; import { increment_whit…

もしReduxを使わなければ、、、 App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; import { useState } from 'react'; import ContainerCounter from './components/ContainerCounter'; export…

zenn.dev

サンプルコードを利用して App.jsを作成します。 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native'; import Animated, {useSharedValue} from 'react-native-reanimated'; i…

Multiple Drag and Sort List in Reanimated 2 (youtube.com) コードが入手できます。 React Native Reanimated 2 Multiple Drag and Sort: Apple Music Example · GitHub BlurView - Expo Documentationの中に下記のような記載があります。 BlurView inheri…

図形を heavyに 揺れ動かす（withSpring) App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import Animated, { useSharedValue, useAnimatedStyle, withSpring} from 'react-native-r…

withSpringを使用する App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import Animated, { useSharedValue, useAnimatedStyle, withSpring} from 'react-native-reanimated'; export…

withTimingを使って、円の拡大に『時間』をつける まずは、withTimingをつけるだけ。 App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import Animated, { useSharedValue, useAnimat…

円を表示し、拡大する App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import Animated, { useSharedValue, useAnimatedProps, useAnimatedStyle, withTiming} from 'react-native-r…

円を表示する react-native-svgライブラリを合わせて使用します。 App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; import Animated, { useSharedValue } from 'react-native-reanimated'; im…

図形を徐々に拡大 App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import Animated, {useSharedValue} from 'react-native-reanimated'; export default function App() { const wid…

図形が移動するアニメーションを付けます。 App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import Animated, { useSharedValue, useAnimatedStyle, withSpring} from 'react-native…

skiaというのは何でしょうか？ Wikipediaより引用 Googleが開発している、C++で書かれたクロスプラットフォームかつオープンソースの2次元コンピュータグラフィックスライブラリ のようです。 これもC＋＋なんですね。今のReact Nativeの進化の方向性にあっ…

下記HPを参照 docs.swmansion.com Documentationを直接読むことはあまりやってきませんでしたが、上記HPについてはかなり読みやすそうなので、メモしながら読んでいくことにします。 その前に、2023／1／19から、Expo GOがうまく動かなかったので、原因を考…

SQLiteを触ってみることで、SQLを学習していきます。 RN(Reacct Native)でsqliteを使う方法 - リアクトネイティブ(React Native)プロジェクトでsqliteデータベースを使う方法について説明します。 上記HPで出てくるSQLiteのツールを利用して学習していきます…

画面遷移をもう少し勉強したいということで下記のYoutube動画を参考にしました。 PC自作から始めるスマホアプリ開発 #7 React Native基礎編 画面遷移の実装 - YouTube

JavaScriptでクラスを利用する場合、Java経験者なら、 JavaScriptからTypeScriptへ変更した方がしっくりくるような気がします。 これまで、Reactをしながら、いろいろなHPをみていると、当然TypeScriptで記載するページも目にすることが多かったですが、Type…

react-native-image-zoom-viewerというライブラリを使用します。 https://zenn.dev/manalink_dev/articles/20231210_expo_image WordPressHPへ移行中 https://yuuzaki2022.com/

データベースとしてexpo-sqliteライブラリを使用し、BottomTabを使用し、そのタブの一つに、そのデータの一覧をリスト表示します。 下記HPからコードを結構引用させてもらってます。 【React Native+Expo】Expoでデータベース(SQLite)の使い方 | CommentOut …

docs.expo.dev ①expo-image-picker 名前からは想像しにくいが、カメラで撮影しアプリで利用する場合にも利用する import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button, Image } from 'react-native'; import { useState …

Build a draggable to-do list with React Native Draggable FlatList - LogRocket Blog https://xebia.com/blog/drag-drop-sort-implementing-draggable-sorting-in-react-native/ www.youtube.com www.youtube.com (53) Animated FlatList in React Native…

サンプルコード（Function型コンポーネント）を使って、 まず、1から１００までをそれぞれのアイテムにひょうじするだけの単純なリストを作成してみます。 下記Youtube動画参照します。 How to use RecyclerListView with React Native. A great FlatList al…

Expo Router Expo Router を試してみる この中では、NativeWindライブラリを使用しています。前回説明済。

github.com recyclerlistview × ItemAnimator で検索したら上記HPが出てきました。

recyclerlistviewのサンプルコードが下記にあります。 github.com 今回はそのコードを理解しながら追ってみることとします。ちなみに、これはクラス型コンポーネントで記載されているので、機能型コンポーネントに訳しながら記載しつつ解説していきます。最…

ReactNativeのRecyclerListView で ハイパフォーマンスなリスト (snamiki1212.com) GitHub - Flipkart/recyclerlistview: React NativeとWeb用の高性能リストビュー! このなかに、 https://github.com/Flipkart/recyclerlistview/blob/master/src/core/ItemA…

【無料でコレ】Amazon版 Github Copilot「CodeWhisperer 」VSCode拡張機能を紹介 (youtube.com)

【神回】ChatGPTで「VSCode」が超進化！無料で使えるAIエディタを試した！ (youtube.com)

App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/nat…