npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/stack
npm i

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider as PaperProvider } from 'react-native-paper';
import { MainScreen } from './src/MainScreen';
import { ComposeScreen } from './src/ComposeScreen';


const Stack = createStackNavigator();

export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="MainScreen"
            component={MainScreen}
            options={{
              title: 'メモ帳-555' // (1)
            }}
          />
          <Stack.Screen
            name="ComposeScreen"
            component={ComposeScreen}
            options={{
              title: '作成'
            }}
          />                    
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

export class MainScreen extends React.Component<IProps, IState>{
  constructor(props: any) {
    super(props)
    this.state = {
      items: []
    };
  }
  async componentDidMount(){
  }
  render(){
    return (
      <View style={styles.container}>
        <FlatList
          style={styles.list}
          data={this.state.items}
          keyExtractor={item => `${item.id}`}
          renderItem={({ item }) => (
            <List.Item
            title={item.title}
            description={
              `作成日時: ${item.created_at}`
            }
            descriptionStyle={{ textAlign: 'right' }}
            onPress={() => {
              this.props.navigation.navigate('ShowScreen', {
                id: item.id
              });
            }}
            />
          )}
        />
        <FAB
          style={{
            position: 'absolute',
            right: 16,
            bottom: 16,
          }}
          icon="plus"
          onPress={() =>
            this.props.navigation.navigate('ComposeScreen', {
              itemId: 81,
              otherParam: 'anything you want here',
            })
          }
        />
      </View>
    );
  }

}