Use Safe Area View to make sure of editor usability on new iphones

App.js

@@ -7,6 +7,7 @@ import { enableScreens } from 'react-native-screens';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Provider as PaperProvider } from 'react-native-paper';
 import * as Linking from 'expo-linking';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { Navigation } from './src/Navigation';
 import { store, persistor } from './src/Store/configureStore';
@@ -31,10 +32,12 @@ const App = (props) => {
  <ReduxProvider store={store}>
  <PersistGate loading={null} persistor={persistor}>
  <PaperProvider>
- <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
- <Navigation />
- </NavigationContainer>
- <FlashMessage position="bottom" />
+ <SafeAreaProvider>
+ <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
+ <Navigation />
+ </NavigationContainer>
+ <FlashMessage position="bottom" />
+ </SafeAreaProvider>
  </PaperProvider>
  </PersistGate>
  </ReduxProvider>

src/Components/DrillListPage.js

@@ -38,16 +38,14 @@ export const DrillListPage = (props) => {
  <View style={styles.drillListPage}>
  <View style={styles.filtersArea}>
  <Text style={styles.counter}>{I18n.t('drillListPage.availableDrills', { count: displayedDrills.length })}</Text>
- {type === DrillTypes.FRISBEE && (
- <Button
- onPress={openFilters}
- icon="filter"
- text={I18n.t('drillListPage.filter')}
- testID="filterButton"
- small
- light={!filterIsOn}
- />
- )}
+ <Button
+ onPress={openFilters}
+ icon="filter"
+ text={I18n.t('drillListPage.filter')}
+ testID="filterButton"
+ small
+ light={!filterIsOn}
+ />
  </View>
  <DrillList navigation={navigation} drillsToDisplay={displayedDrills} />
  </View>

src/Components/DrillPageMinimal.js

@@ -1,6 +1,7 @@
 import React, { useLayoutEffect, useCallback } from 'react';
 import { Platform, StyleSheet, View, ScrollView, Text } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import theme from '../styles/theme.style';
@@ -53,22 +54,20 @@ export const DrillPageMinimal = (props) => {
  }, [navigation, currentDrillIndex, training]);
 
  return (
- <>
- <View style={styles.drillPage}>
- <ScrollView style={styles.illustration}>
- {drill.type === DrillTypes.FRISBEE && <FrisbeeDrillIllustration drill={drill} />}
- {drill.type === DrillTypes.FITNESS && <FitnessDrillIllustration drill={drill} />}
- <Description drill={drill} minimal />
- </ScrollView>
- </View>
+ <SafeAreaView edges={['left', 'bottom', 'right']} style={styles.drillPage}>
+ <ScrollView style={styles.illustration}>
+ {drill.type === DrillTypes.FRISBEE && <FrisbeeDrillIllustration drill={drill} />}
+ {drill.type === DrillTypes.FITNESS && <FitnessDrillIllustration drill={drill} />}
+ <Description drill={drill} minimal />
+ </ScrollView>
  <View style={styles.footer}>
  {isLastTraining ? (
  <ButtonNext onPress={finishTraining} text={I18n.t('drillPageMinimal.finish')} />
  ) : (
  <ButtonNext onPress={goToNextDrill} text={I18n.t('drillPageMinimal.next')} />
  )}
  </View>
- </>
+ </SafeAreaView>
  );
 };
 
@@ -80,7 +79,7 @@ const styles = StyleSheet.create({
  drillPage: {
  backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
  flex: 1,
- marginBottom: 50,
+ marginBottom: 60,
  },
  headerTitle: {
  flexDirection: 'column',
@@ -116,17 +115,14 @@ const styles = StyleSheet.create({
  fontSize: theme.FONT_SIZE_LARGE,
  fontWeight: 'bold',
  textAlign: 'center',
- marginRight: 46, // Matches the details icon width
  },
  illustration: {
  flexGrow: 1,
  flexShrink: 0,
  },
  footer: {
- position: 'absolute',
  paddingBottom: 10,
  paddingTop: 5,
- bottom: 0,
  backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
  width: '100%',
  alignItems: 'center',

src/Components/FitnessFilters.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView, View, Text } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import filterStyle from '../styles/filters.style';
@@ -131,7 +132,7 @@ export class FitnessFilters extends React.Component {
  } = this.state;
 
  return (
- <View style={filterStyle.wrapper}>
+ <SafeAreaView style={filterStyle.wrapper} edges={['left', 'bottom', 'right']}>
  <ScrollView contentContainerStyle={filterStyle.filters}>
  <View style={filterStyle.filter}>
  <Button
@@ -218,7 +219,7 @@ export class FitnessFilters extends React.Component {
  text={I18n.t('fitnessFilters.cta', { count: this.state.displayedDrills.length })}
  />
  </View>
- </View>
+ </SafeAreaView>
  );
  }
 }

src/Components/FrisbeeFilters.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView, View, Text } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import filterStyle from '../styles/filters.style';
@@ -99,7 +100,7 @@ export class FrisbeeFilters extends React.Component {
  render() {
  const { selectedFavorites, selectedLevels, selectedGoals, numberOfPlayers } = this.state;
  return (
- <View style={filterStyle.wrapper}>
+ <SafeAreaView style={filterStyle.wrapper}>
  <ScrollView contentContainerStyle={filterStyle.filters}>
  <View style={filterStyle.filter}>
  <Button
@@ -152,7 +153,7 @@ export class FrisbeeFilters extends React.Component {
  text={I18n.t('fitnessFilters.cta', { count: this.state.displayedDrills.length })}
  />
  </View>
- </View>
+ </SafeAreaView>
  );
  }
 }

src/Components/PlayEditorPage.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useLayoutEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { StyleSheet, View } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import Drill from './animation/Drill';
 import I18n from '../utils/i18n';
@@ -63,7 +63,7 @@ export const PlayEditorPage = (props) => {
 
  const saveCurrentPlay = () => {
  const defaultTitle = I18n.t('playEditorPage.untitledPlay');
- if (currentPlay.title == I18n.t('playEditorPage.untitledPlay')) {
+ if (currentPlay.title === I18n.t('playEditorPage.untitledPlay')) {
  let newTitle = defaultTitle;
 
  let counter = 1;
@@ -97,7 +97,7 @@ export const PlayEditorPage = (props) => {
  };
 
  return (
- <View style={styles.playEditorPage}>
+ <SafeAreaView style={styles.playEditorPage} edges={['right', 'bottom', 'right']}>
  <View style={styles.centeredView}>
  {modalRenameVisible ? (
  <RenamePlayModal currentPlay={currentPlay} onRename={setTitle} close={() => setModalRenameVisible(false)} />
@@ -128,7 +128,7 @@ export const PlayEditorPage = (props) => {
  <AnimationHistory animation={currentPlay.animation} onAnimationHistoryChange={onAnimationChange} />
  <SharePlay currentPlay={currentPlay} />
  </View>
- </View>
+ </SafeAreaView>
  );
 };
 
@@ -145,6 +145,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(PlayEditorPage);
 const styles = StyleSheet.create({
  playEditorPage: {
  flex: 1,
+ backgroundColor: theme.COLOR_PRIMARY,
  },
  centeredView: {
  backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
@@ -155,8 +156,6 @@ const styles = StyleSheet.create({
  minHeight: 40,
  width: '100%',
  backgroundColor: theme.COLOR_PRIMARY,
- position: 'absolute',
- bottom: 0,
  alignItems: 'center',
  flexDirection: 'row',
  justifyContent: 'space-evenly',

src/Components/TrainingPage.js

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import ViewPager from '@react-native-community/viewpager';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import DrillList from './shared/DrillList';
@@ -93,7 +94,7 @@ const TrainingPage = (props) => {
  const goToFirstDrill = () =>
  navigation.navigate('DrillPageMinimal', { drill: training.drills[0], training, program });
  return (
- <View key={index}>
+ <SafeAreaView key={index} edges={['left', 'bottom', 'right']}>
  <DrillList
  ListHeaderComponent={renderHeader(training, index)}
  ListFooterComponent={<View style={{ paddingBottom: 30 }} />}
@@ -105,7 +106,7 @@ const TrainingPage = (props) => {
  <View style={styles.footer}>
  <Button onPress={goToFirstDrill} text={I18n.t('trainingPage.start')} testID={`start${index}`} />
  </View>
- </View>
+ </SafeAreaView>
  );
  };
 
@@ -180,11 +181,9 @@ const styles = StyleSheet.create({
  paddingLeft: 20,
  },
  footer: {
- position: 'absolute',
- paddingBottom: 20,
- paddingTop: 5,
- bottom: 0,
  backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
+ paddingTop: 5,
+ paddingBottom: 10,
  width: '100%',
  alignItems: 'center',
  },

src/Components/VideoPage.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Platform, StyleSheet, View, Text, Share } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import theme from '../styles/theme.style';
 import VimeoVideo from './shared/VimeoVideo';
@@ -22,16 +23,14 @@ const VideoPage = (props) => {
  };
 
  return (
- <View style={styles.videoPage}>
+ <SafeAreaView style={styles.videoPage} edges={['left', 'right', 'bottom']}>
  <View style={styles.video}>
  <VimeoVideo vimeoId={video.video} sounds shouldPlay />
  </View>
  <View style={styles.title}>
  <Text style={styles.text}>{video.title}</Text>
  <Text style={styles.textAuthor}>{video.text}</Text>
- </View>
- {video.youtube && (
- <View style={styles.footer}>
+ {video.youtube && (
  <Button
  onPress={share}
  icon={Platform.select({
@@ -40,12 +39,13 @@ const VideoPage = (props) => {
  })}
  text={I18n.t('videoPage.share')}
  testID="shareButton"
+ style={styles.share}
  small
  light
  />
- </View>
- )}
- </View>
+ )}
+ </View>
+ </SafeAreaView>
  );
 };
 
@@ -65,19 +65,15 @@ const styles = StyleSheet.create({
  },
  text: {
  color: theme.COLOR_PRIMARY,
- fontSize: theme.FONT_SIZE_MEDIUM,
+ fontSize: theme.FONT_SIZE_LARGE,
  fontWeight: 'bold',
  },
  textAuthor: {
  color: theme.COLOR_SECONDARY,
- fontSize: theme.FONT_SIZE_SMALL,
+ fontSize: theme.FONT_SIZE_MEDIUM,
  },
- footer: {
- position: 'absolute',
- paddingBottom: 20,
- paddingTop: 5,
- bottom: 0,
- width: '100%',
- alignItems: 'center',
+ share: {
+ marginTop: 10,
+ alignSelf: 'flex-start',
  },
 });

src/Components/__snapshots__/DictionaryPage.test.js.snap

@@ -245,7 +245,7 @@ exports[`<DictionaryPage /> renders correctly 1`] = `
  "borderRadius": 5,
  "borderWidth": 1,
  "flexDirection": "row",
- "height": 40,
+ "height": 50,
  "justifyContent": "center",
  "marginTop": 20,
  "opacity": 1,