MyNotes.js

 import * as React from 'react';
import { Button, Text, View, StyleSheet, Dimensions, Image, Animated } from 'react-native';
import Notes from '../components/Notes';
import ImageAlbum from './../components/ImageAlbum';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import * as RootNavigation from '../RootNavigation';
import { useIsFocused } from '@react-navigation/native';
import ButtonIconText from './../components/ButtonIconText';

const initialLayout = { width: Dimensions.get('window').width };
export default function MyNotes({ route, navigate }) {

  const [index, setIndex] = React.useState(route.params.index);
  const [routes] = React.useState([
    { key: 'first', title: 'โน๊ต', pdata: route.params.pdata },
    { key: 'second', title: 'รูปภาพ', pdata: route.params.pdata },
  ]);

  const isFocused = useIsFocused();
  return (<View>
    <View style={{ width: '100%', height: '100%' }}>

      <View style={{ flexDirection: "row", width: "100%", backgroundColor: "#BBCCF9", paddingTop: 10 }}>
        <View style={{ width: "5%", paddingTop: 16 }}>
          <ButtonIconText title="" style={{ color: "#000", fontSize: 12 }} source={require('./../assets/icon/back.png')} onPress={() => { RootNavigation.goBack(); }}></ButtonIconText>
       </View>
        <View style={{ width: "80%" }}>
          <Text style={{ height: 50, fontSize: 20, textAlignVertical: "center", paddingLeft: 20 }}>{route.params.pdata.name}</Text>
        </View>
      </View>

      <TabView
        style={{ marginTop: -10 }}
        navigationState={{ index, routes }}
        renderTabBar={(props) =>
          <TabBar {...props} indicatorStyle={{ backgroundColor: "yellow" }}
            style={{ backgroundColor: "#BBCCF9" }}
            renderLabel={({ route, focused, color }) => {
              const label = route.title;
              const cc = focused ? "#000000" : "#FFFFFF";
              if (route.key == "first") {
                return (
                  <View style={{ flexDirection: "row" }}>
                    <Image source={require('./../assets/icon/note.png')} style={{ width: 20, height: 20 }}></Image>
                    <Text style={{ paddingLeft: 5 }}>{label}</Text>
                  </View>
                );
              }
              else {
                return (
                  <View style={{ flexDirection: "row" }}>
                    <Image source={require('./../assets/icon/image.png')} style={{ width: 20, height: 20 }}></Image>
                    <Text style={{ paddingLeft: 5 }}>{label}</Text>
                 </View>
                );
              }
            }}
            renderIcon={({ route, focused, color }) => {
            }}
          >
          </TabBar>
        }
        renderScene={({ route }) => {
          if (route.key == "first") {
            return (
              <View style={{ width: '100%', height: '100%' }}>
                <Notes title="next" pdata={route.pdata}></Notes>
              </View>);
          } else {
            return (
              <View style={{ width: '100%', height: '100%' }}>
                <ImageAlbum title="next" pdata={route.pdata} />
              </View>);
          }
        }}
        onIndexChange={setIndex}
        initialLayout={initialLayout}
      />
    </View >
  </View>
  );
};