App.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, {useState} from 'react';
import {SafeAreaView, Button} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import Greeting from './components/Greeting';
import Box from './components/Box';

function App(): React.JSX.Element {
  const name = 'JinHa Park';
  const [visible, setVisible] = useState(true) as [boolean, Function];
  const onButtonPress = () => setVisible(!visible);
  return (
    <>
      <SafeAreaView style={Colors.light}>
        {visible && <Box rounded={true} size="small" color="pink" />}
        <Button title={visible ? 'Hide' : 'Show'} onPress={onButtonPress} />
        <Greeting name={name} />
      </SafeAreaView>
    </>
  );
}

export default App;