refactor: custom style types are changed to a cleaner way

Author: WrathChaos

example-manual-state/.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

example-manual-state/.expo/packager-info.json

@@ -0,0 +1,4 @@
+{
+  "expoServerPort": 19000,
+  "packagerPort": 19000
+}

example-manual-state/.expo/settings.json

@@ -0,0 +1,9 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false,
+  "scheme": null
+}

example-manual-state/App.tsx

@@ -8,46 +8,29 @@ const App = () => {
   const [checkboxState, setCheckboxState] = React.useState(false);
 
   return (
-    <SafeAreaView
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
+    <SafeAreaView style={styles.container}>
       <View
-        style={{
-          height: 30,
-          width: 150,
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderRadius: 12,
-          backgroundColor: checkboxState ? '#34eb83' : '#eb4034',
-        }}>
+        style={[
+          styles.stateContainer,
+          {
+            backgroundColor: checkboxState ? '#34eb83' : '#eb4034',
+          },
+        ]}>
         <Text
-          style={{
-            color: '#fff',
-          }}>{`Check Status: ${checkboxState.toString()}`}</Text>
+          style={
+            styles.stateTextStyle
+          }>{`Check Status: ${checkboxState.toString()}`}</Text>
       </View>
       <BouncyCheckbox
         style={{marginTop: 16}}
         ref={(ref: any) => (bouncyCheckboxRef = ref)}
         isChecked={checkboxState}
         text="Synthetic Checkbox"
         disableBuiltInState
-        onPress={(isChecked: boolean = false) =>
-          setCheckboxState(!checkboxState)
-        }
+        onPress={() => setCheckboxState(!checkboxState)}
       />
       <RNBounceable
-        style={{
-          marginTop: 16,
-          height: 50,
-          width: '90%',
-          backgroundColor: '#ffc484',
-          borderRadius: 12,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
+        style={styles.syntheticButton}
         onPress={() => {
           console.log(bouncyCheckboxRef?.onPress());
           // bouncyCheckboxRef?.current.onPress();
@@ -59,6 +42,31 @@ const App = () => {
   );
 };
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stateContainer: {
+    height: 30,
+    width: 150,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+  },
+  stateTextStyle: {
+    color: '#fff',
+  },
+  syntheticButton: {
+    height: 50,
+    marginTop: 16,
+    borderRadius: 12,
+    width: '90%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#ffc484',
+  },
+});
 
 export default App;