React Nativeでios風のモーダルを使う

iosアプリでよく見るモーダルをReact Nativeで使ってみました。
↓こういうのです。

やり方

これを実装するにはReact Nativeで用意されているModalコンポーネントのpresentationStyleでpageSheetを指定します。

      <Modal
        presentationStyle='pageSheet'
      >
      </Modal>

Modal · React Native

The Modal component is a basic way to present content above an enclosing view.

Swiftの方でもpageSheetと言うらしいです。
pageSheet以外の解説も以下の記事に載っていました。

iOSにおけるモーダル表示まとめ | アシアルブログ

モーダルスタイルの指定方法 Swift let vc = ChildViewController() vc.modalPresentationStyle = .fullScreen present(vc, animated: true) Swift と Segue override func prepare(for s...

作ってみた

簡単にモーダルを使って実装してみました。

import { useState } from 'react';
import { StyleSheet, Text, View, Modal, Button } from 'react-native';

export default function App() {
  const [visible, setVisible] = useState(false)
  const reverseVisible = () => {
    setVisible((vis)=>!vis)
  }
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Button
          title='open modal'
          onPress={reverseVisible}
      />
      <Modal
        animationType='slide'
        presentationStyle='pageSheet'
        visible={visible}
      >
        <View style={styles.modalView}>
          <Text>hello modal</Text>
          <Button
            title='close modal'
            onPress={reverseVisible}
          />
        </View>
      </Modal>  
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});