extras.txt

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

// import React from 'react';
// import type {Node} from 'react';
// import {
//   SafeAreaView,
//   ScrollView,
//   StatusBar,
//   StyleSheet,
//   Text,
//   useColorScheme,
//   View,
// } from 'react-native';

// import {
//   Colors,
//   DebugInstructions,
//   Header,
//   LearnMoreLinks,
//   ReloadInstructions,
// } from 'react-native/Libraries/NewAppScreen';

// const Section = ({children, title}): Node => {
//   const isDarkMode = useColorScheme() === 'dark';
//   return (
//     <View style={styles.sectionContainer}>
//       <Text
//         style={[
//           styles.sectionTitle,
//           {
//             color: isDarkMode ? Colors.white : Colors.black,
//           },
//         ]}>
//         {title}
//       </Text>
//       <Text
//         style={[
//           styles.sectionDescription,
//           {
//             color: isDarkMode ? Colors.light : Colors.dark,
//           },
//         ]}>
//         {children}
//       </Text>
//     </View>
//   );
// };

// const App: () => Node = () => {
//   const isDarkMode = useColorScheme() === 'dark';

//   const backgroundStyle = {
//     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
//   };

//   return (
//     <SafeAreaView style={backgroundStyle}>
//       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
//       <ScrollView
//         contentInsetAdjustmentBehavior="automatic"
//         style={backgroundStyle}>
//         <Header />
//         <View
//           style={{
//             backgroundColor: isDarkMode ? Colors.black : Colors.white,
//           }}>
//           <Section title="Step One">
//             Edit <Text style={styles.highlight}>App.js</Text> to change this
//             screen and then come back to see your edits.
//           </Section>
//           {/* <Button>
//             title="Yes, limited a little"
//             onPress={() => Alert.alert('Simple Button pressed')}
//           </Button> */}
//           <Section title="See Your Changes">
//             <ReloadInstructions />
//           </Section>
//           <Section title="Debug">
//             <DebugInstructions />
//           </Section>
//           <Section title="Learn More">
//             Read the docs to discover what to do next:
//           </Section>
//           <LearnMoreLinks />
//         </View>
//       </ScrollView>
//     </SafeAreaView>
//   );
// };

// const styles = StyleSheet.create({
//   sectionContainer: {
//     marginTop: 32,
//     paddingHorizontal: 24,
//   },
//   sectionTitle: {
//     fontSize: 24,
//     fontWeight: '600',
//   },
//   sectionDescription: {
//     marginTop: 8,
//     fontSize: 18,
//     fontWeight: '400',
//   },
//   highlight: {
//     fontWeight: '700',
//   },
// });

// export default App;


NEXT SET ------------------------------------------

import React, {useState} from 'react';
import { StyleSheet, Button, View, SafeAreaView, Text, Alert, TouchableHighlight, } from 'react-native';

const Separator = () => (
  <View style={styles.separator} />
);
const types = ["Yes", "Maybe", "No"];
// const [isBPressed, setBPressed] = useState(false);
var bVal = 'blue';

function typeStyle(){
  return(styles.buttonStyle);
}

function ToggleGroup(){
  const [active, setActive] = useState(types[0]);
  return(
    <View>
      {types.map(type => (
        <View style = {typeStyle()}>
          <Button 
              title = {type}
            />
        </View>
      ))}
      <Text>Johnny Puma</Text>
    </View>
  );
}


const App = () => {
  const [count, setCount] = useState(false); 
  function togButton(){
    Alert.alert('Button pressed');
    setCount(!count);
  }
  return (
  <SafeAreaView style={styles.container}>
    
    <View>
      <Text style={styles.head_title}>
        How does <Text style= {styles.title_bold}>your health limit you</Text> in 
      </Text>
      <Text style={styles.title}>
        Vigorous activities, such as running, lifting heavy objects, participating in strenuous sports
      </Text>
    </View>
    <View style={styles.buttonStyle}>
      <Button
        title= "Yes, limited a lot"
        color='black'
        onPress={() => togButton()}
        //onPress={() => setCount(!count)}
        //onPress={() => Alert.alert('Button pressed')}
      />
    </View>
    <Separator/>
      <View style={styles.buttonStyle}>
      <Button
        title="Yes, limited a little"
        color='black'
        onPress={() => Alert.alert('Button pressed')}
      />
    </View>
    <Separator/>
    <View style={styles.buttonStyle}>
      <Button
        title="No, not limited at all"
        color='black'
        onPress={() => Alert.alert('Button pressed')}
      />
      <Text> Count: {'' + count}</Text>
    </View>
    <ToggleGroup style = {styles.buttonStyle}/>
  </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: 'flex-start',
    marginHorizontal: 16,
    marginVertical: 100,
  },
  head_title: {
    //fontFamily: "SF Pro Display",
    fontSize: 17,
    textAlign: 'left',
    opacity: .9, 
  },
  title_bold:{
    fontSize: 17,
    textAlign: 'left',
    opacity: .9, 
    fontWeight: "bold"
  },
  title: {
    textAlign: 'left',
    marginVertical: 16,
    //fontFamily: "SF Pro Display",
    fontStyle: 'normal',
    fontWeight: 600,
    fontSize: 22,
    lineHeight: 26,
    display: 'flex',
    alignItems: 'center',
    letterSpacing: 0.35,
    color: '#212121',
    opacity: 0.9
  },
  buttonStyle: {
    backgroundColor: 'white',
    borderColor: 'black',
    borderRadius: 10,
    borderWidth: 1,
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: 'white',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  
});

export default App;