SafeAreaView IOS implementation on Donations/Projects

[mahmed0715]

Currently on IOS 10 the bottom donate button has override and has issue with view/button click
Thus need to implement safeware view may be to overcome the default behaviour.
@sagararyal please comment

[norbertschuler]

We should reconsider if we are using SafeAreaView correctly:

app/components/App/TreeCounter.native.js:11	import SafeAreaView from 'react-native-safe-area-view';
app/components/App/TreeCounter.native.js:28	        <SafeAreaView
app/components/App/TreeCounter.native.js:33	        </SafeAreaView>
app/components/Challenge/createChallenge.native.js:9	import { SafeAreaView } from 'react-navigation';
app/components/Challenge/createChallenge.native.js:122	      <SafeAreaView style={{ flex: 1, backgroundColor: colors.WHITE }}>
app/components/Challenge/createChallenge.native.js:148	      </SafeAreaView>
app/components/Competition/screens/CompetitionList.native.js:12	import { SafeAreaView } from 'react-navigation';
app/components/Competition/screens/CompetitionList.native.js:136	        <SafeAreaView style={{ flex: 1 }}>
app/components/Competition/screens/CompetitionList.native.js:172	        </SafeAreaView>
app/components/EditUserProfile/index.native.js:22	import { SafeAreaView } from 'react-navigation';
app/components/EditUserProfile/index.native.js:248	      <SafeAreaView style={{ flex: 1, backgroundColor: colors.WHITE }}>
app/components/EditUserProfile/index.native.js:274	      </SafeAreaView>
app/components/ErrorBoundry/globalErrorBoundry.native.js:3	import { Text, ScrollView, SafeAreaView } from 'react-native';
app/components/ErrorBoundry/globalErrorBoundry.native.js:36	        <SafeAreaView style={styles.confirmDeleteContainer}>
app/components/ErrorBoundry/globalErrorBoundry.native.js:56	        </SafeAreaView>
app/components/FAQ/index.native.js:14	import { SafeAreaView } from 'react-navigation';
app/components/FAQ/index.native.js:74	        <SafeAreaView style={{ flex: 1, backgroundColor: colors.WHITE }}>
app/components/FAQ/index.native.js:109	        </SafeAreaView>
app/components/GiftTrees/index.native.js:6	import { SafeAreaView } from 'react-navigation';
app/components/GiftTrees/index.native.js:23	        <SafeAreaView style={{ flex: 1 }}>
app/components/GiftTrees/index.native.js:30	        </SafeAreaView>
app/components/Header/HeaderNew.native.js:11	import { SafeAreaView } from 'react-navigation';
app/components/Header/HeaderNew.native.js:42	    <SafeAreaView
app/components/Header/HeaderNew.native.js:168	    </SafeAreaView>
app/components/Header/HeaderStack.js:8	  SafeAreaView
app/components/Header/HeaderStack.js:45	        <SafeAreaView>
app/components/Header/HeaderStack.js:102	        </SafeAreaView>
app/components/Header/HeaderStack.js:105	          <SafeAreaView />
app/components/Header/HeaderStatic.js:6	  SafeAreaView,
app/components/Header/HeaderStatic.js:33	    <SafeAreaView
app/components/Header/HeaderStatic.js:111	    </SafeAreaView>
app/components/Header/SearchLayout.native.js:4	import { SafeAreaView } from 'react-navigation';
app/components/Header/SearchLayout.native.js:79	      <SafeAreaView style={styles.container}>
app/components/Header/SearchLayout.native.js:123	      </SafeAreaView>
app/components/LeaderboardRefresh/Companies/CompaniesLeaderBoard.js:9	  SafeAreaView
app/components/LeaderboardRefresh/Companies/CompaniesLeaderBoard.js:81	    <SafeAreaView style={styles.mainContainer}>
app/components/LeaderboardRefresh/Companies/CompaniesLeaderBoard.js:141	    </SafeAreaView>
app/components/LeaderboardRefresh/Countries/CountriesLeaderBoard.js:9	  SafeAreaView
app/components/LeaderboardRefresh/Countries/CountriesLeaderBoard.js:120	    <SafeAreaView style={styles.mainContainer}>
app/components/LeaderboardRefresh/Countries/CountriesLeaderBoard.js:183	    </SafeAreaView>
app/components/LeaderboardRefresh/Countries/CountryDetails.js:9	  SafeAreaView
app/components/LeaderboardRefresh/Countries/CountryDetails.js:85	    <SafeAreaView style={styles.mainContainer}>
app/components/LeaderboardRefresh/Countries/CountryDetails.js:143	    </SafeAreaView>
app/components/LeaderboardRefresh/Individuals/IndividualsLeaderBoard.js:9	  SafeAreaView
app/components/LeaderboardRefresh/Individuals/IndividualsLeaderBoard.js:82	    <SafeAreaView style={styles.mainContainer}>
app/components/LeaderboardRefresh/Individuals/IndividualsLeaderBoard.js:144	    </SafeAreaView>
app/components/LeaderboardRefresh/Schools/SchoolsLeaderBoard.js:9	  SafeAreaView
app/components/LeaderboardRefresh/Schools/SchoolsLeaderBoard.js:81	    <SafeAreaView style={styles.mainContainer}>
app/components/LeaderboardRefresh/Schools/SchoolsLeaderBoard.js:139	    </SafeAreaView>
app/components/LeaderboardRefresh/TPOs/tpoLeaderBoard.js:9	  SafeAreaView
app/components/LeaderboardRefresh/TPOs/tpoLeaderBoard.js:81	    <SafeAreaView style={styles.mainContainer}>
app/components/LeaderboardRefresh/TPOs/tpoLeaderBoard.js:143	    </SafeAreaView>
app/components/Menu/index.native.js:2	import { View, ScrollView, SafeAreaView, Text, Linking, Platform } from 'react-native';
app/components/Menu/index.native.js:201	      <SafeAreaView style={styles.outerContainer}>
app/components/Menu/index.native.js:350	      </SafeAreaView>
app/components/NewGiftTrees/index.native.js:4	import { SafeAreaView } from 'react-navigation';
app/components/NewGiftTrees/index.native.js:13	    <SafeAreaView style={{ flex: 1 }}>
app/components/NewGiftTrees/index.native.js:79	    </SafeAreaView>
app/components/PledgeEvents/MakePledgeForm.native.js:14	import { SafeAreaView } from 'react-navigation';
app/components/PledgeEvents/MakePledgeForm.native.js:100	      <SafeAreaView style={styles.createPledgeRootView}>
app/components/PledgeEvents/MakePledgeForm.native.js:315	      </SafeAreaView>
app/components/PledgeEvents/PledgeEvents.native.js:4	import { SafeAreaView } from 'react-navigation';
app/components/PledgeEvents/PledgeEvents.native.js:37	      <SafeAreaView style={styles.peRootView}>
app/components/PledgeEvents/PledgeEvents.native.js:120	      </SafeAreaView>
app/components/PledgeEvents/UpdatePledgeEvent.native.js:16	import { SafeAreaView } from 'react-navigation';
app/components/PledgeEvents/UpdatePledgeEvent.native.js:104	      <SafeAreaView style={styles.createPledgeRootView}>
app/components/PledgeEvents/UpdatePledgeEvent.native.js:302	      </SafeAreaView>
app/components/PublicTreeCounter/PublicTreecounter.native.js:11	  SafeAreaView,
app/components/PublicTreeCounter/PublicTreecounter.native.js:176	      <SafeAreaView style={{ flex: 1 }}>
app/components/PublicTreeCounter/PublicTreecounter.native.js:177	        <SafeAreaView
app/components/PublicTreeCounter/PublicTreecounter.native.js:195	        </SafeAreaView>
app/components/PublicTreeCounter/PublicTreecounter.native.js:374	      </SafeAreaView>
app/components/Redemption/index.native.js:19	// import { SafeAreaView } from 'react-navigation';
app/components/Redemption/app/AddTrees.native.js:13	import { SafeAreaView } from 'react-navigation';
app/components/Redemption/app/AddTrees.native.js:47	    <SafeAreaView style={styles.safeAreaViewContainer}>
app/components/Redemption/app/AddTrees.native.js:47	    <SafeAreaView style={styles.safeAreaViewContainer}>
app/components/Redemption/app/AddTrees.native.js:124	    </SafeAreaView>
app/components/RegisterTrees/index.native.js:3	import { Text, PixelRatio, SafeAreaView } from 'react-native';
app/components/RegisterTrees/index.native.js:121	        <SafeAreaView style={{ flex: 1, backgroundColor: colors.WHITE }}>
app/components/RegisterTrees/index.native.js:150	        </SafeAreaView>
app/components/SelectPlantProject/index.native.js:6	import { SafeAreaView } from 'react-navigation';
app/components/SelectPlantProject/index.native.js:173	        <SafeAreaView style={{ flex: 1 }}>
app/components/SelectPlantProject/index.native.js:193	        </SafeAreaView>
app/components/TreecounterGraphics/Trillion.native.js:9	  // SafeAreaView,
app/components/TreecounterGraphics/Trillion.native.js:15	import { SafeAreaView } from 'react-navigation';
app/components/TreecounterGraphics/Trillion.native.js:433	          <SafeAreaView style={{ flex: 1 }}>
app/components/TreecounterGraphics/Trillion.native.js:451	          </SafeAreaView>
app/components/UserHome/AnimatedMap.js:7	import { SafeAreaView } from 'react-navigation';
app/components/UserHome/AnimatedMap.js:432	        {this.props.isFullMapComponentModal ? (!isMapPressed) && <SafeAreaView forceInset={{ bottom: 'always' }} /> : null}
app/components/UserHome/AnimatedMap.js:489	          <SafeAreaView forceInset={{ flex: 1, bottom: 'always' }} style={{ position: 'absolute', bottom: (Platform.OS == 'ios' ? 0 : 25), right: 0, width: '100%', backgroundColor: '#fff', }}>
app/components/UserHome/AnimatedMap.js:504	          </SafeAreaView>
app/components/UserHome/index.native.js:5	import { SafeAreaView } from 'react-navigation';
app/components/UserHome/index.native.js:321	      <SafeAreaView style={{ elevation: 1, flex: 1, backgroundColor: colors.WHITE }}
app/components/UserHome/index.native.js:554	      </SafeAreaView>
app/components/Welcome/WelcomeSlider.js:14	import SafeAreaView from 'react-native-safe-area-view';
app/components/Welcome/WelcomeSlider.js:50	    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
app/components/Welcome/WelcomeSlider.js:73	    </SafeAreaView>
app/containers/Menu/NewBottomNavigator.js:3	  SafeAreaView,
app/containers/Menu/NewBottomNavigator.js:124	          <SafeAreaView style={styles.container} />
app/styles/redeem.native.js:6	  safeAreaViewContainer: { flex: 1, backgroundColor: 'white' },```

[harshvitra]

@norbertschuler @mahmed0715

Will this be fixed in #1908 ?

[norbertschuler]

@harshvitra @mahmed0715 I am not sure if this get solved. At least the PR does not answer my question if we could do a general clean-up of usages of SafeAreaView in so many places in our code from different packages react-navigation, react-native and react-native-safe-area-view.