Kırmızı top sayacı

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Button } from 'react-native';


export default class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			sayi: 0
		}
	}

	sayiArtir() {
		this.setState({
			sayi: this.state.sayi+1
		});
	}

	sifirla() {
		this.setState({ sayi: 0 });
	}

	render() {
		return (
			<View style={styles.kapsayici}>
				<TouchableOpacity onPress={this.sayiArtir.bind(this)}>
					<View style={styles.kirmiziTop}>
						<Text style={styles.sayiStili}>{this.state.sayi}</Text>
					</View>
				</TouchableOpacity>

				<Button title="Sıfırla" onPress={this.sifirla.bind(this)} />

			</View>
		);
	}
}

const styles = StyleSheet.create({
	kapsayici: {
		flex: 1, justifyContent: "center", alignItems: 'center'
	},
	kirmiziTop: {
		backgroundColor: "red", height: 125, width: 125, borderRadius: 100,
		// kırmızı top içindeki componentleri ortaladık
		justifyContent: 'center',
		alignItems: 'center',
		marginBottom: 10, // marginBottum'u sıfırlama butonu ile kırmızı topun arasına mesafe koymak için verdik.
	},
	sayiStili: {
		color: "white",
		fontSize: 25
	}
});