Prop Types

Componentleri çağırırken göndermiş olduğumuz propertylerin veri türlerini componentin içinde belirleyebiliyoruz. Yani title componenti text prop u için string almalıdır şeklinde tanımlamalar yapabiliriz.

Prop Type amacı component hazırladınız ve bunu paylaştınız, hangi property ye hangi tipte veri göndermeleri gerektiğini izah etmemiz gerekir.

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

import PropTypes from "prop-types";

const Title = ({ isVisible, text, color, numberOfLines }) => {
  return (
    <>
      <View>
        {isVisible && (
          <Text style={[styles.title, { color: color }]}>
            {numberOfLines} - {text}
          </Text>
        )}
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  title: {
    fontSize: 30,
    fontWeight: 700,
  },
});

Title.propTypes = {
  text: PropTypes.string,
  number: PropTypes.number,
  color: PropTypes.string,
  isVisible: PropTypes.bool,
};

export default Title;

import { View, Text } from "react-native";
import React from "react";
import PropTypes from "prop-types";

const User = ({ data }) => {
  return (
    <View>
      <Text>{JSON.stringify(data, null, 2)}</Text>
    </View>
  );
};

User.propTypes = {
  data: PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string,
  }),

  //   data: PropTypes.exact({ sadece şu fieldlar olmalı dersek exact komutu kullanılır.
  //     id: PropTypes.number,
  //     name: PropTypes.string,
  //   }),
};

export default User;

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

import PropTypes from "prop-types";

const Users = ({ data }) => {
  return (
    <View>
      <Text>{JSON.stringify(data, null, 2)}</Text>
    </View>
  );
};

Users.propTypes = {
  data: PropTypes.array,
};

export default Users;

import { StyleSheet, View } from "react-native";

import Title from "./src/components/Title";
import User from "./src/components/User";
import Header from "./src/components/Header";
import Users from "./src/components/Users";

const App = () => {
  return (
    <View style={styles.container}>
      <Header />
      <Title
        text="React Native"
        color="red"
        number={1}
        numberOfLines={1}
        isVisible={true}
      />
      <Title text="React" color="blue" number={2} numberOfLines={2} />
      <Title text="JavaScript" color="green" number={3} numberOfLines={3} />

      <User data={{ id: 1, name: "Mehmet" }} />

      <Users data={["Ahmer", "Mehmet", "Ayşe", "Fatma"]} />
    </View>
  );
};

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

export default App;

https://legacy.reactjs.org/docs/typechecking-with-proptypes.html

User componenti içinde yer alan data nin id ve name inin de type ları için PropType tanımlaması yapabiliriz.

<User data={{ id: 1, name: "Mehmet" }} /> //ifadesine surname eklenirse
<User data={{ id: 1, name: "Mehmet", surname: "Seven" }} /> //ifadesine surname eklenirse herhangi bir hata almayız (shape kullandığımız için)

//Biz bir object bekliyoruz ama bu object mutlaka şu formatta, sadece belirlenen fieldlar olmalı diyebilirsiniz; bunun için shape yerine exact tanımı kullanılır.

User.propTypes = {
  data: PropTypes.exact({
    id: PropTypes.number,
    name: PropTypes.string,
  }),
};

props tanımlarını defalarca yazmak yerine bu şekilde de kullanabiliriz.