React Native - 유용한 Component, API

React Native

 

 

✅ Blur View

---

https://docs.expo.dev/versions/latest/sdk/blur-view/

BlurView

 

 

✅ ScrollView

---

refreshControl

https://reactnative.dev/docs/scrollview#refreshcontrol

ScrollView · React Native

 

ScrollView 단점

모든 자식 컴포넌트들을 한 번에 render하기 때문에 성능 퍼포먼스에 좋지 않은 영향을 끼친다.

이 단점에 대한 방안이 FlatList

 

 

✅ FlatList

---

https://reactnative.dev/docs/flatlist

FlatList · React Native

 

컴포넌트가 실제로 보이기 직전에 render 한다. (미리 전부 render 안 함) (Lazy Render)

 

또한 map()도 필요없고 key prop도 필요없다.

 

무한 스크롤을 쉽게 구현하기 위한 prop도 가지고 있다.

<FlatList
    horizontal
    data={trending}
    keyExtractor={(item) => item.id.toString()}
    contentContainerStyle={{ paddingHorizontal: 20 }}
    showsHorizontalScrollIndicator={true}
    renderItem={({ item }) => <VMedia posterPath={item.poster_path} />}
    ItemSeparatorComponent={() => <View style={{ width: 20 }} />}
/>

key값은 string이 관례

vertical ScrollView 안에 vertical FlatList가 있으면 안 된다.

 

onEndReached

무한 스크롤 구현 가능한 prop

onEndReachedThreshold prop으로 끝에 도달하는 범위 지정 가능

 

Tanstack Query의 useInfiniteQuery와 조합하면 좋다.

 

 

 

✅ SectionList

---

Section에 따른 list들을 가지고 있을 때 각 section에 머무르는 동안 해당 section의 header를 스크롤 하는 동안 상단에 유지시켜준다.

 

https://reactnative.dev/docs/sectionlist

SectionList · React Native

 

 

✅ Expo LinearGradient

---

https://docs.expo.dev/versions/latest/sdk/linear-gradient/

LinearGradient

 

npx expo install expo-linear-gradient

 

macOS에서 iOS를 빌드 중이면 아래 명령어를 실행해줘야 함

npx pod-install ios

 

설치 완료 후 다시 빌드해줘야 expo linear gradient가 정상 작동한다.

 

Usage

      <Header>
        <Background
          style={StyleSheet.absoluteFill}
          source={{ uri: makeImgPath(params.backdrop_path || "") }}
        />
        <LinearGradient
          // Background Linear Gradient
          colors={["transparent", BLACK_COLOR]}
          style={StyleSheet.absoluteFill}
        />
        <Column>
          <Poster path={params.poster_path || ""} />
          <Title>{"title" in params ? params.title : params.name}</Title>
        </Column>
      </Header>

 

 

✅ Linking

---

https://reactnative.dev/docs/linking

Linking · React Native

 

Usage

  const openYTLink = async (videoId: string) => {
    const baseUrl = `https://m.youtube.com/watch?v=${videoId}`;
    await Linking.openURL(baseUrl);
  };
  
<VideoBtn key={video.key} onPress={() => openYTLink(video.key)}>
    <Ionicons name="logo-youtube" color="#FF0034" size={24} />
    <BtnText>{video.name}</BtnText>
</VideoBtn>

 

단점: 앱 밖으로 나가진다.(해당 앱이 있으면 해당 앱을 열고 없으면 브라우저로 연다.)

 

 

✅ Expo WebBrowser

---

https://docs.expo.dev/versions/latest/sdk/webbrowser/

WebBrowser

 

앱 내에서 링크를 열 수 있음

 

 

✅ Share

---

https://reactnative.dev/docs/share

Share · React Native

 

Usage

import { Dimensions, Platform, Share, StyleSheet } from "react-native";

const shareMedia = async () => {
  const isAndroid = Platform.OS === "android";
  const homepage = isMovie
    ? `https://www.imdb.com/title/${data.imdb_id}`
    : data.hompage;
  if (isAndroid) {
    await Share.share({
      message: homepage,
      title: isMovie ? params.title : params.name,
    });
  } else {
    await Share.share({
      url: homepage,
      message: params.overview,
    });
  }
};