react-native 10

React-Native Error Case(firebase, responder.scrollResponderScrollTo)

Error Message TypeError: responder.scrollResponderScrollTo is not a function. (In 'responder.scrollResponderScrollTo({ x: x, y: y, animated: animated })', 'responder.scrollResponderScrollTo' is undefined) Solution I got this error once I try to connect to firebase to implement the signIn function. And I got the solution from the link at: https://stackoverflow.com/questions/71709482/typeerror-res..

React-Native Error Case(ViewPropTypes)

Error Message Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. Solution If you got the error even though you're not using ViewPropTypes. In this case, you can try to comment the function out in 'node_modules>react-native>index.js' file. ViewPropTypes를 사용하지도 않았는데 위와 같은 에러가 떴다면 'node_modules>react-na..

(React-Native) Project: 로그인 기능(부적절한 input 값 알려주기)

내가 만드는 앱은 사용자의 개인 기록을 저장하는 기능이 있다. 이를 위해서 로그인 기능을 만들려고 한다. SignInPage.js에서 'Email SignIn' 버튼을 누르면 'doSignIn' 함수가 실행된다. Email SignIn 아래는 'doSignIn' 함수이다. Input 부분이 비어있으면 비어있다고 알려주는 기능을 넣었다. const doSignIn = () => { console.log(email); console.log(password); if (email == '') { setEmailError('Email is required'); } else { setEmailError(''); } if (password == '') { setPasswordError('Password is requ..

(React-Native) Project: Animatable(애니메이션 효과 넣기)

- React-Native에서 제공하는 Animation 기능 링크: https://reactnative.dev/docs/animated - 미리 구현을 해놓은 library 링크: https://github.com/oblador/react-native-animatable cmd에서 아래와 같이 설치 후 사용하면 된다. yarn add react-native-animatable - 또 다른 library 도구들 링크가 있는 사이트 주소: https://blog.bitsrc.io/top-5-animation-libraries-in-react-native-d00ec8ddfc8d

(React-Native) Project: TabNavigator 기능 넣기

TabNavigator 기능 넣기 navigations 폴더에 TabNavigator.js 파일 생성 tool 설치: "yarn add @react-navigation/bottom-tabs" import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 아래와 같이 탭으로 만들고 싶은 페이지들을 Tab.Screen 태그 안에 넣는다. 그러면 StackNavigator.js에 있었던 위의 세가지 페이지들을 지워주고 대신 TabNavigator을 페이지화 시켜준다. TabNavigator 자체가 하나의 페이지인 것이다. TabNavigator 안에 MapPage, FavoritesPage, MyMainPage 가 들어있는 상태 Official..

(React-Native) Project: Create Project & StackNavigator 기능 넣기

등산용 모바일 앱을 만들려고 한다. *Note* (Windows) - nvm v12 or v16 사용: "nvm ls" - cmd에서 Expo 도구 명령어를 사용할 수 있는 도구 다발을 전체 다 설치: "npm install -g expo-cli" 1) Creating Project Windows Terminal: "expo init 프로그램이름" enter(expo 프로그램 생성): "blank a minimal app as clean as an empty canvas" *Note* 'prettier' 설치 App.js 파일 위치에 '.prettierrc' 파일 생성 파일 안에 아래 코드 작성하고 저장 {"semi": true, "singleQuote": true} 공식문서 참조 가능 *Note* js..

React-Native App 개발(component 이용한 counter 만들기)

앱개발 플러스 1주차 숙제이다. component를 이용하여 counter 프로그램 만들기. MinusButton.js, PlusButton.js 두개의 component를 만들고, 'setState' 함수를 이용하여 버튼을 누를 때마다 숫자가 증가 혹은 감소하도록 하였다. App.js import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { StyleSheet, View, Text } from 'react-native'; import MinusButton from './components/MinusButton'; import PlusButton from './components/PlusBut..

LIST