update example code

Author: DaniAkash

RNResponsiveDimensionsExample/App.js

@@ -7,107 +7,72 @@
  */
 
 import React from 'react';
+import {SafeAreaView, StyleSheet, ScrollView, View, Text} from 'react-native';
 import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
+  responsiveHeight,
+  responsiveWidth,
+  responsiveFontSize,
+  useResponsiveHeight,
+  useResponsiveWidth,
+  useResponsiveFontSize,
+} from 'react-native-responsive-dimensions';
 
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+const App = () => {
+  const requiredHeight = useResponsiveHeight(25);
+  const requiredWidth = useResponsiveWidth(100);
+  const requiredFontSize = useResponsiveFontSize(3);
+
+  const responsiveStyles = {
+    hooksResponsiveContainer: {
+      height: requiredHeight,
+      width: requiredWidth,
+      backgroundColor: 'red',
+    },
+    hooksText: {
+      color: 'white',
+      fontSize: requiredFontSize,
+    },
+  };
 
-const App: () => React$Node = () => {
   return (
-    <>
-      <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.js</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
+    <SafeAreaView style={styles.appContainer}>
+      <ScrollView>
+        <View style={styles.legacyResponsiveContainer}>
+          <Text style={styles.legacyText}>Responsive Height: 25</Text>
+          <Text style={styles.legacyText}>Responsive Width: 100</Text>
+          <Text style={styles.legacyText}>Responsive Font Size: 3</Text>
+        </View>
+
+        <View style={responsiveStyles.hooksResponsiveContainer}>
+          <Text style={responsiveStyles.hooksText}>
+            Responsive Hooks Height: 25
+          </Text>
+          <Text style={responsiveStyles.hooksText}>
+            Responsive Hooks Width: 100
+          </Text>
+          <Text style={responsiveStyles.hooksText}>
+            Responsive Hooks Font Size: 3
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
+  appContainer: {
+    flex: 1,
+    backgroundColor: 'yellow',
   },
-  highlight: {
-    fontWeight: '700',
+  legacyResponsiveContainer: {
+    height: responsiveHeight(25),
+    width: responsiveWidth(100),
+    backgroundColor: 'blue',
+    justifyContent: 'flex-end',
   },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
+  legacyText: {
+    color: 'white',
+    fontSize: responsiveFontSize(3),
   },
 });