Bugtype

회사에서 React native 사용시, 특정 렌더러에서 이미지가 흐릿한 현상이 발생하였다. 픽셀아트를 사용해야하는데, 해당 canvas에서 pixelated를 제공안한다고 한다. 그래서, 이미지 사이즈를 늘려서 해결하려고 한다고 하였다. 하지만 2가지 문제가 발생한다. - 사이즈가 그만큼 늘어나서 느려진다. - 디자이너가 다시 작업해야한다. 이 문제에 대해서 고민하다가 2가지 방법을 생각해냈다. 1. 해당부분만 webview를 띄운다. 2. image pixelated를 구현한다. - image pixlated는 k nearest neighbor 알고리즘을 이용하므로, k nearest neighbor를 구현하면 해결이 될 것이다.

import React, {Component} from 'react'; import ReactNative from 'react-native'; const {View, StyleSheet, Dimensions, Animated} = ReactNative; const SQUARE_H = 100; const SQUARE_W = 100; const WINDOW_H = Dimensions.get('window').height; const WINDOW_W = Dimensions.get('window').width; export default class MovingSquareOriginal extends Component { constructor(props, context) { super(props, context)..

import React, {useState, useEffect} from 'react'; import {SafeAreaView, Animated, StatusBar, Text, Button} from 'react-native'; const ProgressBar = props => { const [value] = useState(new Animated.Value(props.value)); useEffect(() => { Animated.timing(value, { toValue: props.value, duration: Math.random() * 3000, }).start(); }, [props.value, value]); const width = value.interpolate({ inputRange:..

Animation Driver는 requestAnimationFrame 를 이용하여 애니메이션에 필요한 모든 값을 업데이트 합니다 중간에 값이 계산되어 Props로 전달됩니다. View는 setNativeProps를 이용하여 업데이트 합니다. js내에서 계산하기에 성능에 문제를 준다. 이것을 해결하기 위해서 useNativeDriver라는 옵션을 주면 native에서 계산을 한다. 하지만 모든 animation에 적용되는 것이 아니다. transform, opacity 등에는 적용되지만, position, flexbox 등에는 적용되지 않는다. 우리고 위치이동, 드래그 등을 생각해보면 된다. 이런 곳에는 적용되지 않는다. 또한 항상 Animation start를 JS 쓰레드에서 호출하는 문제가 있다. 예..

[React Native] 하단 네비게이션 사용시 주의 해야할 점. 주의 Status bar SafeArea Bottom bar 라이브러리 react-native-paper 특정뷰가 bottom bar위에 overlap 되지 않는다. 뷰 전체를 감싸기에 renderSceen을 이용해서 화면을 그려줘야 한다. react-native-material-bottom-navigation 해당 라이브러리 사용시 overlap 되니 주의 해야한다. 또한 view 올리는 단순한 행위일 뿐이다. 그러니 실제 navigation이라고 착각하면 안된다. react-native-paper react-native-material-bottom-navigation