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

export default function App() {

  const [Isim, IsimeAt] = useState("Lütfen birşeyler yazın");

  return (
    <View style={Bicimler.Kapsayici}>
      <Text style={Bicimler.Metin}>İsminizi yazın</Text>
      <TextInput
        style={Bicimler.MetinKutusu}
        onChangeText={(value) => IsimeAt(value)}
      />
       <Text style={Bicimler.AltSatir}>Merhaba {Isim}</Text>
    </View>
  );
}

const Bicimler = StyleSheet.create({
  Kapsayici: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  Metin: {
    marginLeft: 24,
    marginRight: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    //backgroundColor:'#f9e79f',
    borderBottom: '1px solid #8e44ad',
  },
  MetinKutusu: {
    marginLeft: 40,
    marginRight: 40,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor:'#f9e79f'
  },
  AltSatir: {
     textAlign: 'center',
     color:'#5d6d7e'
  }
});

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

import React, { useState } from "react";

export default function App() {

  const [Sayac, Sayici] = useState(0);

  return (
    <View style={Bicimler.Kapsayici}>
      <TextInput
        style={Bicimler.MetinKutusu}
        onChangeText={(value) => Sayici(Sayac+1)}
      />
      <Text style={Bicimler.Sayici}>{Sayac}</Text>
    </View>
  );
}

const Bicimler = StyleSheet.create({
  Kapsayici: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#FF0099',
    padding: 8,
  },
  MetinKutusu: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    border:'2px dotted red',
    backgroundColor: '#CCFF00'
  },
  Sayici: {
    fontSize:60,
    fontWeight:'900',
    color: '#00FF00',
    //border:'2px dotted red',
    textAlign: 'center'
  }
});