react native

React Navigation 타입스크립트 사용하기

React Native는 이제 타입스크립트를 사용하는 것이 기본 옵션이 되었다. 그에 따라서, 나 역시 타입스크립트를 사용하는데 react navigation의 타입스크립트 설정이 유난히 번거로웠다. 그래서 다음번의 번거로움을 줄이고자, 내가 사용해본 react navigation의 타입스크립트 설정을 기록으로 남겨두기로 했다. 🍖 코드들은 stack navigator를 기준으로 설명한다. import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {Setting, Home, Login} from "./components"; export type RootStackParamList = { Login: undefined;..

React Native에서 스타일을 작성하는 여러 방법 (StyleSheet, emotion, tailwind)

StyleSheet StyleSheet은 react native에서 기본적으로 제공되는 CSS 작성법이다. import React from 'react'; import {View, Text, StyleSheet} from 'react-native'; const Home = () => { return ( Hello World ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 12, backgroundColor: 'gray', }, innerText: { fontSize: 30, }, textColor: { color: "red", } }); export default Home; StyleSheet.create를 통해서 객체를 생성하..

React Native에서 ethers.js 라이브러리 설정하기

ethers를 비롯하여 필요한 라이브러리를 설치한다. npm i ethers @ethersproject/shims react-native-get-random-values 타입스크립트를 사용할 때 npm i ethers @ethersproject/shims react-native-get-random-values @types/react-native-get-random-values import React, {useState} from 'react'; import {Button, SafeAreaView, Text, View} from 'react-native'; import 'react-native-get-random-values'; import '@ethersproject/shims'; import {ethe..