State

Durum anlamına gelir, componentlerin durumundan bahsedeceğiz. Componentin durumu da taşıdığı verilere bağlıdır. Eğer herhangi bir component üzerindeki herhangi bir verinin değişme ihtimali varsa ve bunu ekranda gösteriyorsak o veriyi bir State olarak tanımlayabilir ve herhangi bir anda da bunun değerini değiştirebiliriz.

import React, { useState } from "react";
import { StyleSheet, SafeAreaView, Text, Button } from "react-native";

const App = () => {
  const [name, setName] = useState("Mehmet");
  const [age, setAge] = useState(29);
  const [isVisible, setIsVisible] = useState(true);

  return (
    <SafeAreaView style={styles.container}>
      <Button
        title={isVisible ? "Gizle" : "Göster"}
        onPress={() => setIsVisible(!isVisible)}
      />

      {isVisible && (
        <>
          <Text>{name}</Text>
          <Text>Yaş: {age}</Text>
          <Button
            title="İsmi değiştir"
            onPress={() => setName("Ahmet")}
          ></Button>
          <Button title="Yaşı değiştir" onPress={() => setAge(30)}></Button>
        </>
      )}
    </SafeAreaView>
  );
};

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

export default App;