[RN/오류노트] Solved - ScrollView doesn't work on android, Switch Component not working Click

해당 글에서는 ScrollView, Switch에서 발생하는 오류에 대해서 이를 해결한 방법에 대해 알아봅니다.

1) 문제점

---

💡 문제점

- 해당 문제점은 iOS 기기에서는 <ScrollView>로 구성한 부분이 수행이 되지만, Android 기기에서는 ScrollView가 동작하지 않아서 스크롤이 생기지 않는 문제점이 발생하였습니다.
- 또한, 두번째 문제로는 <Switch>로 구성한 부분에 대해 클릭이 되지 않는 문제가 발생하였습니다.

 

 

💡부모 컴포넌트

- 아래와 같이 부모 컴포넌트에서 자식 컴포넌트를 불러오는 구성입니다.

import { Text, View } from "react-native";
import ChildScreen from "./ChildScreens";

const ParentsScreen = () => {

    return (
        <View>
            <Text>부모 컴포넌트 영역입니다.</Text>

            {/* 자식 컴포넌트 호출  */}
            <ChildScreen></ChildScreen>
        </View>
    )

}
export default ParentsScreen;

 

 

💡 자식 컴포넌트

- 부모 컴포넌트에 의해 호출되는 자식 컴포넌트입니다.
- 해당 부분에서 Switch와 ScrollView를 사용하였을때 Switch는 눌리지 않는 문제점과 ScrollView는 안드로이드에서 움직이지 않는 문제가 발생하였습니다.

import { useState } from "react";
import { Platform, ScrollView, StyleSheet, Switch, Text, View } from "react-native";

const ChildScreen = () => {

    const [isSwitchOn, setIsSwitchOn] = useState(false);

    const toggleSwitch = () => {
        const switchToggle = !isSwitchOn
        setIsSwitchOn(switchToggle)
    }
    return (
        <View>
            <Text>자식 컴포넌트입니다.</Text>

            {/* ================================= 스위치 버튼 ============================================ */}
            <View>
                <Text >움직이면 쏜다</Text>
                <Switch
                    trackColor={{ false: '#767577', true: '#81b0ff' }}
                    thumbColor={isSwitchOn ? '#f5dd4b' : '#f4f3f4'}
                    ios_backgroundColor="#3e3e3e"
                    onValueChange={toggleSwitch}
                    value={isSwitchOn}
                />
            </View>

            {/* ================================= 스크롤뷰 영역 ============================================ */}
            <View>
                <ScrollView>
                    <View>
                        <Text>숫자 1</Text>
                        <Text>숫자 2</Text>
                        <Text>숫자 3</Text>
                        <Text>숫자 4</Text>
                        <Text>숫자 5</Text>
                        <Text>숫자 6</Text>
                        <Text>숫자 7</Text>
                        <Text>숫자 8</Text>
                        <Text>숫자 9</Text>
                        <Text>숫자 10</Text>
                    </View>
                </ScrollView>
            </View>
        </View>
    )
}
export default ChildScreen;

 

 

2) 해결방법

---

💡 해결방법

- 기존의 react-native 라이브러리 내에서 Switch, ScrollView를 import 해온 부분에 대해서 이를 react-native-gesture-handler 라이브러리 내에서 Switch, ScrollView를 불러와서 사용하도록 변경하여 해결하였습니다.

- react-native의 기본 ScrollView와 Switch는 플랫폼별로 네이티브 구현이 다르며, 특히 Android에서 터치 이벤트 처리가 일관되지 않을 수 있다고합니다.
- react-native-gesture-handler에서는 네이티브 플랫폼의 제스처 시스템에 직접 연결되어 더 나은 터치 처리 시스템을 제공하며 iOS와 Android 간의 일관된 터치 동작을 보장한다고 합니다.

// 변경 이전
import { Switch, ScrollView } from "react-native";

// 변경 이후 
import { Switch, ScrollView } from "react-native-gesture-handler";

 

 

 💡 아래의 이슈를 참고하고 확인하여 적용하였습니다.

https://github.com/facebook/react-native/issues/38730