feat: Add scrolling to relevant section in About

.expo-shared/assets.json

@@ -0,0 +1,66 @@
+{
+ "d95b18121543395e47295829da230fd1009efc5144f075f8c580de929b58af56": true,
+ "62e018a81084a6ed85b7129e383f009d58e53e8c86d2b00486592b1a7aa959b9": true,
+ "08d787d884e51a67aa61e0db1600e3f6cc63c92483c108c79c00ffd35f70a995": true,
+ "196dd686d4965ec87b759db5401c6967550314759c52263ab222a4d56f2065a3": true,
+ "efc34dad8a8378fe3adf3a1a698b6b6add5832c9b9cff753e49d665c83445b44": true,
+ "3a8e0a176fefa1165944af91d72a7ca50c9bc15f3b344efcd843cbfb175a4927": true,
+ "8875017eb733a3649316704610eafd5f0b62ac6d18115d9f587e1b0f4c73275b": true,
+ "bce278b54526e98692495ecfe5ab37a038e1befc04b0fe963ee938fd3bc187da": true,
+ "2f7c76d23dfd5650d11af339b8fceeb73c4734151e0990bfa2c739126221c331": true,
+ "1f5d91c98d9f95636a35b6e3767bec516d3875604a9e6ec46544f6e01570af12": true,
+ "7e41f2bb5f0bd1b478d31c27b0cfa29103be6e3bcd5b084aa7f4fbea6f03f627": true,
+ "33b4da54949eb7b171900bf7327dfda85f701c46d228c7fd33ba4d5a5e15c593": true,
+ "b57a675498883b2c1dff9303bb1e909ba9293daf3a8d70ca8ced14077ad9daa8": true,
+ "078c3e896d44617c13f9d0fe413949371f5ad2f06cd07dddfacb6e61c23886f1": true,
+ "d91dd4bf8f974ebada1f9af94e8d0dee587efd86d358a79ed2852872b766f4fd": true,
+ "03242fad86ca5acf659d6bc6c34b9ad68d26171b50b28634eab063f47925037e": true,
+ "19485852bb5d5426b1b30504e874ed8c09b08823b581b0625c86c0fcde17b0c4": true,
+ "dc3ace293f551fd444c483f02a3d9f28b6baee735975d96bfc23063966a2978e": true,
+ "5200992f6c17f43b70973e38a95573b618cf466b48abd35b370f5a41a377bbc2": true,
+ "6422760cbef3ec1a8c5e10c9ccc6b26fb7e37a17d71f4f4338673f18da11df02": true,
+ "f3a871127fc8ee39092fe29a24e44ad950c76a768efb8bfe9c81b88692374328": true,
+ "a646ad67c5e075d0a958ee18033aa1fe8af117a1d0bdc12515763db26f43f9be": true,
+ "894da952aea34a53d13f66c73636431b8c86b98c3cfdf93aab205594f983b1e0": true,
+ "e477c070b7fea26e2d34b6c3e685c4c40b386c9840e726ec9b1d5f61bfa70e57": true,
+ "9b9d7a132a04c8f956372bb76342f50e922feb4b0998c9613f51cd90887e20c5": true,
+ "6e1a5a3a9d77b3ad28768186999c593411a768db97d3983d93d9c45275ea31cd": true,
+ "a664af977fb220a7761c8770021e4eff1277a960c34216855f4a5895d34fdcb2": true,
+ "7c714026f856d01d03e14f48c7b93d7d715351bf7573bc7e324c2c3736c7f866": true,
+ "2a45368c0b692f02bcf4f8ec34c125ce1811b8f2b2d119fd5dc2828ba1a2fed1": true,
+ "fdbf1e8d50e37f8a6355630032880fb0296ed214efbc8514015cea99609bea7d": true,
+ "1d3a19fba70a2b6abee5507be25dfb01dfc02c58b9bd05172d182e16438824b8": true,
+ "69e75642b735eca0db8a3293ea437ef1d5cf5753384fe321da238505f3181958": true,
+ "7f3c5677e46446e3cf5fd7c32c158409ce6610cb2d5919b01ee958eb118cb52d": true,
+ "89f0ad1a3f7874ae924c01b73db72dc68666396b11d4fef987981daa54816cbe": true,
+ "f89c59d17334fc5d9a880d6f0f8883f30e6ff64be826372d68909b58a75a8465": true,
+ "98c0ea3e9662383bc6248bfaaa589220d669698fe83bd06e2431391075bbba27": true,
+ "9663c6b2d1f33a0b76c3c2a0e1d194499771e642c1ce6d5af9ec1fa71166c837": true,
+ "3ec9f15b0d92df02628a6676e0d88d0a05cac70db9996a259971347f076f650d": true,
+ "f9c83f1601526a0b8b82748db261ff3aca6dd4f58b1bfb46fc611bd34e5c9c3a": true,
+ "0a98362ad2547a76141e1ccbee06ff27a58805184f801ef5cf1974a4c565d760": true,
+ "d9712cf7a2ffcb0273e4e2832aea80ab95409ed567c4f235937eabf684a93ac5": true,
+ "2a3aaf57a64c46ba6ca14bb36ca6e9dc79601a52dad5f4dc0818956e384ee0c7": true,
+ "319aabbd8cbbac186cfc2e8798d227c5292c2d82f3f56a6303ebcf41a14fa030": true,
+ "193a34d66af2f01204a0a72ce2c38ae790cc3f0500c3d1a04dba346e146778f9": true,
+ "4602b61849579f05fe290b775e055170280899add5f7d217c384795438cf2c0f": true,
+ "b513321f898697be64990460074ff44848d471aa40670a4d29575dffaec551e2": true,
+ "515e6a7761f015907e460f2e8b97e116a3a2d0aff615fa02ed3c6a93a794cf20": true,
+ "5f4a4b2036f72d70f88de1142669923feb58c62efdc7d66317e50107c6290e73": true,
+ "986064d6462a3ef1c6dd9389e7629067d63ea4f14e89d1845781fa860d9a15dc": true,
+ "869dc5d064a115b2e1c950193d61bce0ff4f13f33ba9ee44710afabaa93adf4a": true,
+ "85c1aba154bee5c78d50cf5b286a199380dc283ad07a546773f7ca2ed7e0ba17": true,
+ "94cd8a883427096566ba06605a73d804b86bf5152f36684b6c83a192487e74b8": true,
+ "27630085e574e75d4a892d08fdb2acbc2ae354ca169e2f39cd78168cb4b037af": true,
+ "c77a8a69d1f0ac0c660bb3927adc83b66a776a25587338b9114ae3c3b23deacd": true,
+ "2df261330b119fd0af7d7f2b49420462f149a919457f77e39f212bacf1d64491": true,
+ "af10cedead907254bc26b4e33447de3cdd46049d97b082f9b1cb81330ccdb90d": true,
+ "746b7d2ff839cd04c8981fa4408efeb57926ef34e946b6090ef7570d5b42fb5f": true,
+ "d69e31c0427099f9732f8891ca85b1c21f5053d714a319f748c70862dda138f5": true,
+ "558febfa8ff2729b6a7f2b47ec78857ad4d109f5c87b040afb915876c4ea8030": true,
+ "75b6528b00e2b4a14516775b6f4687f5ac971ec9ae627e531e37f6c3e1f8c776": true,
+ "e7781f2733215c3f111c9d59f46eeaccba3d4a45dd41542c7bc7cbcb12528bd2": true,
+ "21e7102ba54021e5ef3d4751f8a4f53231196a498033b4b4919989cfe121042c": true,
+ "a25a7867b57d711ce7338566eded1a95a510090bc95a9d1281b3d533152856fd": true,
+ "57d93dc41f9c5f0d349c5440223e4fd6f3c97e1810f6729589040bc02d067b19": true
+}

App/Screens/About/About.tsx

@@ -24,6 +24,7 @@ import {
  Text,
  View
 } from 'react-native';
+import { ScrollIntoView, wrapScrollView } from 'react-native-scroll-into-view';
 import { scale } from 'react-native-size-matters';
 import { NavigationInjectedProps } from 'react-navigation';
 
@@ -33,9 +34,28 @@ import { Dev } from './Dev';
 import { i18n } from '../../localization';
 import * as theme from '../../util/theme';
 
-interface AboutProps extends NavigationInjectedProps {}
+const CustomScrollView = wrapScrollView(ScrollView);
+const scrollViewOptions = {
+ align: 'top' as 'top',
+ insets: {
+ bottom: 0,
+ top: scale(theme.spacing.normal)
+ }
+};
+
+export const aboutSections = {
+ about_how_results: 'about_how_results',
+ about_why_is_the_station_so_far_title: 'about_why_is_the_station_so_far_title'
+};
+
+interface AboutProps
+ extends NavigationInjectedProps<{
+ scrollInto?: keyof typeof aboutSections;
+ }> {}
 
 export function About (props: AboutProps) {
+ const { navigation } = props;
+
  const handleOpenAmaury = () =>
  Linking.openURL('https://twitter.com/amaurymartiny');
 
@@ -52,9 +72,11 @@ export function About (props: AboutProps) {
  const handleOpenMarcelo = () =>
  Linking.openURL('https://www.behance.net/marceloscoelho');
 
- const { navigation } = props;
  return (
- <ScrollView style={theme.withPadding}>
+ <CustomScrollView
+ scrollIntoViewOptions={scrollViewOptions}
+ style={theme.withPadding}
+ >
  <BackButton onPress={() => navigation.pop()} style={styles.backButton} />
 
  <View style={styles.section}>
@@ -101,14 +123,20 @@ export function About (props: AboutProps) {
  </Text>
  </View>
 
- <View style={styles.section}>
+ <ScrollIntoView
+ onMount={
+ navigation.getParam('scrollInto') ===
+ 'about_why_is_the_station_so_far_title'
+ }
+ style={styles.section}
+ >
  <Text style={styles.h2}>
  {i18n.t('about_why_is_the_station_so_far_title')}
  </Text>
  <Text style={theme.text}>
  {i18n.t('about_why_is_the_station_so_far_message')}
  </Text>
- </View>
+ </ScrollIntoView>
 
  <View style={styles.section}>
  <Text style={styles.h2}>{i18n.t('about_weird_results_title')}</Text>
@@ -121,6 +149,14 @@ export function About (props: AboutProps) {
  </Text>
  </View>
 
+ <ScrollIntoView
+ onMount={navigation.getParam('scrollInto') === 'about_how_results'}
+ style={styles.section}
+ >
+ <Text style={styles.h2}>HELLO</Text>
+ <Text style={theme.text}>TODO</Text>
+ </ScrollIntoView>
+
  <View style={styles.credits}>
  <Text style={styles.h2}>{i18n.t('about_credits_title')}</Text>
  <Text style={theme.text}>
@@ -146,12 +182,12 @@ export function About (props: AboutProps) {
  </Text>
  .{'\n'}
  {'\n'}
- Shoot! I Smoke v{Constants.manifest.version}.
+ Sh**t! I Smoke v{Constants.manifest.version}.
  </Text>
  {/* Add languages https://github.com/amaurymartiny/shoot-i-smoke/issues/73 */}
  </View>
  <Dev />
- </ScrollView>
+ </CustomScrollView>
  );
 }
 

App/Screens/Home/Footer/Footer.tsx

@@ -15,10 +15,12 @@
 // along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
 
 import * as O from 'fp-ts/lib/Option';
+import { pipe } from 'fp-ts/lib/pipeable';
 import React, { useContext } from 'react';
 import { Share, StyleSheet, Text, View } from 'react-native';
 import { NavigationInjectedProps } from 'react-navigation';
 
+import { aboutSections } from '../../About';
 import { Button } from '../../../components';
 import { i18n } from '../../../localization';
 import { AqiHistory } from '../../../managers';
@@ -43,6 +45,18 @@ export function Footer (props: FooterProps) {
  props.navigation.navigate('About');
  }
 
+ function goToAboutAqiHistory () {
+ props.navigation.navigate('About', {
+ scrollInto: aboutSections.about_how_results
+ });
+ }
+
+ function goToAboutWhySoFar () {
+ props.navigation.navigate('About', {
+ scrollInto: aboutSections.about_why_is_the_station_so_far_title
+ });
+ }
+
  function goToDetails () {
  props.navigation.navigate('Details');
  }
@@ -67,7 +81,7 @@ export function Footer (props: FooterProps) {
  switch (frequency) {
  case 'daily': {
  return isTooFar ? (
- <Button onPress={goToAbout}>
+ <Button onPress={goToAboutWhySoFar}>
  {i18n.t('home_btn_why_is_station_so_far').toUpperCase()}
  </Button>
  ) : (
@@ -78,10 +92,20 @@ export function Footer (props: FooterProps) {
  }
  case 'weekly':
  case 'monthly': {
- return (
- <Button onPress={goToPastStations}>
- {i18n.t('home_btn_see_detailed_info').toUpperCase()}
- </Button>
+ return pipe(
+ aqiHistory,
+ O.map(history => history[frequency]),
+ O.filter(({ isCorrect }) => isCorrect),
+ O.map(() => (
+ <Button onPress={goToPastStations}>
+ {i18n.t('home_btn_see_detailed_info').toUpperCase()}
+ </Button>
+ )),
+ O.getOrElse(() => (
+ <Button onPress={goToAboutAqiHistory}>
+ {i18n.t('home_btn_see_how_it_works').toUpperCase()}
+ </Button>
+ ))
  );
  }
  }
@@ -113,15 +137,25 @@ export function Footer (props: FooterProps) {
  }
  case 'weekly':
  case 'monthly': {
- return (
- <View style={styles.smallButtons}>
- <Button icon="question-circle" onPress={goToAbout} type="secondary">
- {i18n.t('home_btn_faq_about').toUpperCase()}
- </Button>
- <Button icon="share-alt" onPress={handleShare} type="secondary">
- {i18n.t('home_btn_share').toUpperCase()}
- </Button>
- </View>
+ return pipe(
+ aqiHistory,
+ O.map(history => history[frequency]),
+ O.filter(({ isCorrect }) => isCorrect),
+ O.map(() => (
+ <View style={styles.smallButtons}>
+ <Button
+ icon="question-circle"
+ onPress={goToAbout}
+ type="secondary"
+ >
+ {i18n.t('home_btn_faq_about').toUpperCase()}
+ </Button>
+ <Button icon="share-alt" onPress={handleShare} type="secondary">
+ {i18n.t('home_btn_share').toUpperCase()}
+ </Button>
+ </View>
+ )),
+ O.getOrElse<JSX.Element | null>(() => null)
  );
  }
  }

App/localization/languages/en.json

@@ -11,6 +11,7 @@
  "home_header_from_search": "from search",
  "home_btn_why_is_station_so_far": "Why is the station so far?",
  "home_btn_see_detailed_info": "See detailed info",
+ "home_btn_see_how_it_works": "See how it works",
  "home_btn_more_details": "More details",
  "home_btn_faq_about": "Faq/About",
  "home_btn_share": "Share",

app.example.json

@@ -11,7 +11,7 @@
  "permissions": ["ACCESS_FINE_LOCATION"],
  "versionCode": 8
  },
- "assetBundlePatterns": ["assets/fonts/*"],
+ "assetBundlePatterns": ["assets/**/*"],
  "extra": {
  "algoliaApiKey": "YOUR_KEY",
  "algoliaApplicationId": "YOUR_KEY",

package.json

@@ -38,6 +38,7 @@
  "react": "16.8.3",
  "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
  "react-native-maps": "^0.24.2",
+ "react-native-scroll-into-view": "^1.0.3",
  "react-native-size-matters": "^0.2.1",
  "react-navigation": "^3.11.0",
  "retry-ts": "^0.1.0",

yarn.lock

@@ -6397,7 +6397,7 @@ prompts@^2.0.1:
  kleur "^3.0.2"
  sisteransi "^1.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@>=15.6.1, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6601,6 +6601,13 @@ [email protected]:
  dependencies:
  debounce "^1.2.0"
 
+react-native-scroll-into-view@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/react-native-scroll-into-view/-/react-native-scroll-into-view-1.0.3.tgz#a71f807dff5fa2b9e76422df19d7ef63caabb931"
+ integrity sha512-WBrgzLSvmSgi+LMHOch87TKwk8vMDwlyMhXGagf3BDOTSP4aVmHQ3PUuiIIWo2wK6jexHnPasN0LeA48Qvzxkw==
+ dependencies:
+ prop-types ">=15.6.1"
+
 react-native-sentry@^0.42.0:
  version "0.42.0"
  resolved "https://registry.yarnpkg.com/react-native-sentry/-/react-native-sentry-0.42.0.tgz#9cd59659d9b6cd36d6fc4c48f50613cd82cde25f"