[react-native]Modalの使い方

目的

App.jsファイルのButtonを押した時、モーダル表示する。
コンポーネントは分ける。

1 App.js

styleは任意

import React, { useState } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import GoalInput from './components/GoalInput'; //パスと名前は任意

export default function App() {
  const [isAddMode, setIsAdd] = useState(false);
  return (
    <View>
      <Button title="Add New Goal" onPress={() => setIsAddMode(true)} />
      <GoalInput 
        visible={isAddMode}
      />
    </View>
  );
}

2 GoalInput.js

styleは任意

要は全体をでラップするだけでいい

animationTypeは下の三種類
slide ：下からのスライド
fade : フェードイン
none : アニメーションなし

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

const GoalInput = props => {
  return(
    <Modal visible={props.visible} animationType="slide">
      <View>
        Something
      </View>
    </Modal>
  );
};