add currentOrientation(), a new example using hooks & upgrade all examples to expo v38

examples/responsive-screen-orientation-change/.gitignore → .gitignore

@@ -1,10 +1,12 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # expo
-.expo/
+**/.expo/
+**/.expo-
 
 # dependencies
-/node_modules
+**/node_modules/
+**/.yalc/
 
 # misc
 .env.local
@@ -15,3 +17,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yalc.lock
+.vscode/settings.json
+.yalcignore

README.md

@@ -33,7 +33,7 @@ Check out [this medium article](https://medium.com/react-native-training/build-r
 * You can also provide decimal values to these 2 methods, i.e. `font-size: widthPercentageToDP('3.75%')`.
 * The package methods can be used with or without flex depending on what you want to do and how you choose to implement it.
 * The suggested approach is to start developing from larger screens (i.e. tablets). That way you are less prone to forget adding responsive values for all properties of type `number`. In any case, when your screen development is done, you should test it over a big range of different screens as shown below in the [How do I know it works for all devices ?](#example) section.
-* There are 2 more methods to use if you want to support responsiveness along with orientation change. These are `listenOrientationChange` and `removeOrientationListener`. To see how to use them, check example number 3.
+* There are 3 more methods to use if you want to support responsiveness along with orientation change. These are `currentOrientation`, `listenOrientationChange` and `removeOrientationListener`. To see how to use them, see the two "screen orientation" examples (#2 and #3).
 * You can use this package along with `styled-components`. To see how to do that, check example number 2.
 
 # Updates 🚀
@@ -42,7 +42,9 @@ Check out [this medium article](https://medium.com/react-native-training/build-r
 
 # Examples
 
-## 1. How to use with StyleSheet.create() and without orientation change support 
+## 1. How to use with StyleSheet.create() and without orientation change support
+### See `examples/responsive-screen`
+
 ```javascript
 import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
 
@@ -75,10 +77,15 @@ You can find a working example of this over the [related example repository](htt
 
 
 ## 2. How to use with StyleSheet.create() and with orientation change support
+### See `examples/responsive-screen-orientation-change`
 Check the README of the [related example repository](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-orientation-change/README.md)
 
+## 3. Same functionality as Example #2, but using React Hooks
+### See `examples/responsive-screen-orientation-change-with-hooks`
+Check the README of the [related example repository](https://github.com/marudy/react-native-responsive-screen-with-hooks/blob/master/examples/responsive-screen-orientation-change/README.md)
 
-## 3. How to use with styled components
+## 4. How to use with styled components
+### See `examples/responsive-screen-orientation-styled-components`
 Check the README of the [related example repository](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-styled-components/README.md)
 
 

examples/responsive-screen-orientation-change-with-hooks/App.js

@@ -0,0 +1,65 @@
+// packages
+import React, {useState, useEffect} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {
+  widthPercentageToDP,
+  heightPercentageToDP,
+  currentOrientation,
+  listenOrientationChange,
+  removeOrientationListener,
+} from 'react-native-responsive-screen';
+
+const App = () => {
+  const [responsiveScreen, setResponsiveScreen] = useState({});
+
+  useEffect(() => {
+    setResponsiveScreen({orientation: currentOrientation()});
+    listenOrientationChange({setStateHook: setResponsiveScreen}); // sets up when mounted
+    return () => removeOrientationListener(); // cleans up when unmounted
+  }, []);
+
+  let styles = getStyles(widthPercentageToDP, heightPercentageToDP, responsiveScreen.orientation);
+
+  return (
+    <View style={styles.container}>
+      {responsiveScreen.orientation && (
+        <Text style={styles.title}>{responsiveScreen.orientation}</Text>
+      )}
+      <View style={styles.responsiveBox}>
+        <Text style={styles.text}>This box is always of 84.5% width and 17% height.</Text>
+        <Text style={styles.text}>
+          Test it by running this example repo in phones/ emulators with screens
+          of various dimensions and pixel per inch (ppi).
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default App;
+
+const getStyles = (widthPercentageToDP, heightPercentageToDP, orientation) => {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: orientation === 'landscape' ? 'steelblue' : 'gray',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    responsiveBox: {
+      width: widthPercentageToDP('84.5%'),
+      minHeight: heightPercentageToDP('17%'),
+      borderWidth: 2,
+      borderColor: 'orange',
+      flexDirection: 'column',
+      justifyContent: 'space-around',
+    },
+    text: {
+      color: 'white',
+      paddingHorizontal: widthPercentageToDP('10%'),
+    },
+    title: {
+      fontSize: widthPercentageToDP('7.5%'),
+    },
+  });
+};

examples/responsive-screen-orientation-change-with-hooks/README.md

@@ -0,0 +1,59 @@
+This is an example repository that contains a sample setup of react-native-responsive-screen package with support of device orientation changes.
+
+# Setup
+
+1. Change working directory to the project:
+    - `cd examples/responsive-screen-orientation-change-with-hooks`
+1. Install the dependencies:
+    - `yarn install`  or  `npm install`
+1. Run the app in the emulator/simulator:
+    - `yarn run android`  or  `npm run android`
+    - `yarn run ios`  or  `npm run ios`
+
+# Usage
+
+This is a version of `responsive-screen-orientation-change` that is converted to use [React Hooks](https://reactjs.org/docs/hooks-intro.html).
+
+To detect orientation change, there are 2 differences from the simple case:
+* we add a listener function in every screen that supports orientation change (and a remove listener function respectively)
+* we move the stylesheet creation inside the render function, so that the styles are recalculated whenever we detect an orientation change (and therefore trigger a re-render).
+
+```javascript
+import {
+  widthPercentageToDP as wp,
+  heightPercentageToDP as hp,
+  listenOrientationChange as lor,
+  removeOrientationListener as rol
+} from 'react-native-responsive-screen';
+
+const Login () =>  {
+  const [responsiveScreen, setResponsiveScreen] = useState();
+
+  useEffect(() => {
+    loc({setStateHook: setResponsiveScreen});  // sets up when mounted
+    return () => rol();  // cleans up when unmounted
+  }, []);
+
+  const styles = getStyles(hp, wp);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textWrapper}>
+        <Text style={styles.myText}>Login</Text>
+      </View>
+    </View>
+  );
+}
+export default Login
+
+const getStyles = (hp, wp) => {
+  return StyleSheet.create({
+    container: { flex: 1 },
+    textWrapper: {
+      height: hp('70%'),
+      width: wp('80%')
+    },
+    myText: { fontSize: hp('5%') }
+  });
+}
+```

examples/responsive-screen-orientation-change-with-hooks/app.json

@@ -0,0 +1,25 @@
+{
+  "expo": {
+    "name": "hooks-responsive-screen-orientation-change",
+    "slug": "hooks-responsive-screen-orientation-change",
+    "version": "1.0.0",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

examples/responsive-screen-orientation-change-with-hooks/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

examples/responsive-screen-orientation-change-with-hooks/package.json

@@ -0,0 +1,24 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "~38.0.8",
+    "expo-status-bar": "^1.0.2",
+    "react": "~16.11.0",
+    "react-dom": "~16.11.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
+    "react-native-responsive-screen": "file:.yalc/react-native-responsive-screen",
+    "react-native-web": "~0.11.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.6",
+    "babel-preset-expo": "~8.1.0"
+  },
+  "private": true
+}