App.js

import { Text, View, StyleSheet, Button, Pressable, TouchableWithoutFeedback } from 'react-native';
import { useState } from 'react'; 
import CounterText from './components/CounterText'

export default function App() {
  // Getting back a count state variable
  // and a setCount function to set the state variable
  let [count, setCount] = useState(0);

  function buttonPressed () {
    setCount(count + 1)
  }

  function decrementPressed () {
    setCount(count-1)
  }

  function reset () {
    setCount(0)
  }

  function renderEncouragingText() {
    if (count > 10 & count <= 20) {
      return "Keep Going!"
    }
    else if (count <= 10) {
      return "Try Harder"
    }
    else {
      return "Great Job"
    }
  }

  return (
    <TouchableWithoutFeedback onPress={buttonPressed}>
      <View style={styles.container}>
        <CounterText color="pink" fontSize={90}>{count}</CounterText>
        <Text style = {styles.text}> {count} </Text>
        <Button title="Increment" onPress={buttonPressed}></Button>
        <Pressable onPress={buttonPressed}>
          <Text style={{ color: "red", padding: 10, marginTop: 10, backgroundColor: "green", borderRadius: 5 }}>Press to Increment</Text>
        </Pressable>
        <Text style={styles.encouragingText}>{renderEncouragingText()}</Text>
        <Pressable onPress={decrementPressed}>
          <Text style={{ color: "white", backgroundColor: "red", padding: 10, marginBottom: 10, borderRadius: 5 }}>Decrease?</Text>
        </Pressable>
        <Pressable onPress={reset}>
          <Text style={{ color: "grey", backgroundColor: "lightblue", padding: 10, marginBottom: 10,  }}>reset</Text>
        </Pressable>
      </View>
    </TouchableWithoutFeedback>
  );
}

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

  text: {
    fontSize: 40,
  },

  encouragingText: {
    color: "blue",
    padding: 20,
    fontSize: 16,
  },
});