【React Native】iOS13で標準になったPageSheetをReact Navigationで実装する方法

React Native Expo + React Navigation (Version 5) を使って、

iOS13で標準になったPageSheetを実装していきたいと思います。

出来上がりイメージは以下になります。

【iOS】

【Android】

完成形のコードはこちら

それではコードを書いていきましょう。

まずは、TOPの画面と、クリックして表示される遷移先の画面を作成します。

【Home.js】

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

export default Home = ({ navigation }) => {

  return (
    <View style={styles.container}>
      <Button
        title="Open Next Screen"
        onPress={() => navigation.navigate('Next')}
      />
    </View>
  )

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
})

importReactfrom'react';

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

exportdefaultHome=({navigation})=>{

return(

<Viewstyle={styles.container}>

<Button

title="Open Next Screen"

onPress={()=>navigation.navigate('Next')}

</View>

)

}

conststyles=StyleSheet.create({

container:{

flex:1,

alignItems:'center',

justifyContent:'center',

}

})

【Next.js】

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

export default Next = () => {

  return (
    <View style={styles.container}>
      <Text>This is Next Screen.</Text>
    </View>
  )

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
})

importReactfrom'react';

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

exportdefaultNext=()=>{

return(

<Viewstyle={styles.container}>

<Text>ThisisNextScreen.</Text>

</View>

)

}

conststyles=StyleSheet.create({

container:{

flex:1,

alignItems:'center',

justifyContent:'center',

}

})

ナビゲーションの設定をしていきます。

【MyStack.js】

import React from 'react';
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';

import { Home, Next } from '../screens';

export default MyStack = () => {

  const Stack = createStackNavigator()

  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        gestureEnabled: true,
        cardOverlayEnabled: true,
        ...TransitionPresets.ModalPresentationIOS,
      }}
      mode="modal"
      headerMode="none"
    >
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Next" component={Next} />
    </Stack.Navigator>
  )

}

importReactfrom'react';

import{createStackNavigator,TransitionPresets}from'@react-navigation/stack';

import{Home,Next}from'../screens';

exportdefaultMyStack=()=>{

constStack=createStackNavigator()

return(

<Stack.Navigator

initialRouteName="Home"

screenOptions={{

gestureEnabled:true,

cardOverlayEnabled:true,

...TransitionPresets.ModalPresentationIOS,

}}

mode="modal"

headerMode="none"

<Stack.Screenname="Home"component={Home}/>

<Stack.Screenname="Next"component={Next}/>

</Stack.Navigator>

)

}

以下の設定でモーダル表示や、ジェスチャーイベントの制御など行っています。

screenOptions={{
  gestureEnabled: true,
  cardOverlayEnabled: true,
  ...TransitionPresets.ModalPresentationIOS,
}}

screenOptions={{

gestureEnabled:true,

cardOverlayEnabled:true,

...TransitionPresets.ModalPresentationIOS,

}}

App.jsで作成したナビゲーションを使用していきます。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';

import MyStack from './src/navigations/MyStack';

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

importReactfrom'react';

import{NavigationContainer}from'@react-navigation/native';

importMyStackfrom'./src/navigations/MyStack';

exportdefaultfunctionApp(){

return(

</NavigationContainer>

);

}

ここまでで完成です。アプリを実行してみてください

expo start

expostart

詳しいコードはGitHubを参照、もしくはコメントで疑問点投げてください。

こちら私がReact Nativeの勉強を始めたときに読んだ本です。

読み勧めていくと、インスタグラムチックなアプリが完成します。

説明も豊富なので興味があればぜひ読んでみてください。