DEVOCEAN

(...)
function CameraButton() {
  const insets = useSafeAreaInsets();

  //여기서 선언된 bottom은 platform에 따라서 바뀔 뿐
  //해당 변수가 어떤 keyword props인지 정의되지 않음
  const bottom = Platform.select({
    android: TABBAR_HEIGHT / 2,
    ios: TABBAR_HEIGHT / 2 + insets.bottom - 4,
  });

  return (
    //JSX내부에서 {}을 한번 사용하면 javascript의 변수를 가지고 오지만
    //여기서 {}를 한번더 사용하여, bottom = {bottom}의 결과를 만들어냄
    <View style={[styles.wrapper, {bottom}]}>
      <Pressable
        android_ripple={{
          color: '#ffffff',
        }}
        style={styles.circle}>
        <Icon name="camera-alt" color="white" size={24} />
      </Pressable>
    </View>
  );
}
(...)

(...)
function MainTab() {
  return (
    <>
      <View style={styles.block}>
        <Tab.Navigator
          screenOptions={{
            headerShown: false,
            tabBarShowLabel: false,
            tabBarActiveTintColor: '#6200ee',
          }}>
        (...)
        
const styles = StyleSheet.create({
  block: {
    flex: 1,
    zIndex: 0,
  },
});
(...)

//custom Modal Component를 정의함
function UploadModeModal({visible, onClose}) {
  return (    
    //React Native에서 지원하는 Modal Component 사용
    <Modal
      //visible prop을 통해서 Modal popup/exit 여부 사용
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}>
      //Modal 내부에서 보여질 내용을 정의
      <Pressable style={styles.background} onPress={onClose}>
        <View style={styles.whiteBox}>
          <Pressable
            (첫번째 선택지...)
          </Pressable>
          <Pressable
            (두번째 선택지...)
          </Pressable>
        </View>
      </Pressable>
    </Modal>
  );
}

const onPress = () => {
    //Modal을 키는 버튼을 눌렀을때, android의 경우 Modal만 보여지게
    //visible props를 변경하고 함수를 종료
    if (Platform.OS === 'android') {
      setModalVisible(true);
      return;
    }
    
    //IOS의 ActionSheet를 활성화 하는 부분
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ['카메라로 촬영하기', '사진 선택하기', '취소'],
        cancelButtonIndex: 2,
      },
      //버튼을 위부터 순서대로 btnindex를 증가시키고, 이에따른 callback을 정의
      (buttonIndex) => {
        if (buttonIndex === 0) {
          console.log('카메라 촬영');
        } else if (buttonIndex === 1) {
          console.log('사진 선택');
        }
      },
    );
};

  const animation = useRef(new Animated.Value(width)).current;
  const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);

  /*
    등록 가능한 event name
    keyboardWillShow
    keyboardDidShow
    keyboardWillHide
    keyboardDidHide
    keyboardWillChangeFrame
    keyboardDidChangeFrame
  */
  useEffect(() => {
    //keyboard가 등장하면 isKeyboardOpen props을 변경함
    const didShow = Keyboard.addListener('keyboardDidShow', () =>
      setIsKeyboardOpen(true),
    );
    const didHide = Keyboard.addListener('keyboardDidHide', () =>
      setIsKeyboardOpen(false),
    );

    return () => {
      //component가 사라지면 위 keyboard event들을 제거함
      didShow.remove();
      didHide.remove();
    };
  }, []);
  
  //useRef의 value를 사용한 키보드 표시에 따른 animation 구현
  useEffect(() => {
    Animated.timing(animation, {
      toValue: isKeyboardOpen ? 0 : width,
      useNativeDriver: false,
      duration: 150,
      delay: 100,
    }).start();
  }, [isKeyboardOpen, width, animation]);
  
return (
    <View style={styles.block}>
      <Animated.Image
        source={{uri: res.assets[0]?.uri}}
        //animation 값을 사용해서 height를 조정시킴
        style={[styles.image, {height: animation}]}
        resizeMode="cover"
      />
      (...)