Fixed One issue of Pledge events v1.2 regarding Headers

[harshvitra]

Fixes one issue from #1685

### Added 3 Types of Header components

1. Header with no Animations
2. Header with Title Animation
3. Header with Title and Image Animation

Removed Search bar and unnecessary spacing

The Headers do not support -

1. Search
2. Share
3. Burger Menu
   etc

These shall be added soon

@sagararyal please check the Headers and animations

[norbertschuler]

• On an iPhone X simulator the header does not work (arrow is not clickable) as the header does not check the top safety area - I assume that's because we don't regard it at

  treecounter-app/app/components/App/TreeCounter.native.js

  Line 27 in 69c03b9

  forceInset={{ top: 'never', bottom: 'always' }}

  - but please do not change that as otherwise our current header would not work correctly. Maybe you can add an additional <SafeAreaView> for you own header:

[harshvitra]

• On an iPhone X simulator the header does not work (arrow is not clickable) as the header does not check the top safety area - I assume that's because we don't regard it at

can you test if the latest commit fixed it for you

[norbertschuler]

can you test if the latest commit fixed it for you

I can earliest test this again at Monday.

[sagararyal]

@harshvitra https://facebook.github.io/react-native/docs/safeareaview

[norbertschuler]

@harshvitra https://facebook.github.io/react-native/docs/safeareaview

Yes, why can't we solve this with a given solution from react-native as a SafeAreaView instead of trying to fix it with an own solution?

[norbertschuler]

• On an iPhone X simulator the header does not work (arrow is not clickable) as the header does not check the top safety area - I assume that's because we don't regard it at

can you test if the latest commit fixed it for you

• I did a new test with my iPhone X simulator with the given fix, but it still does not work:

[harshvitra]

Yes, why can't we solve this with a given solution from react-native as a SafeAreaView instead of trying to fix it with an own solution?

I've added SafeAreaView

But cant get iphone simulator to build -

[norbertschuler]

I've added SafeAreaView
But cant get iphone simulator to build

I am sorry, I can not see the reason for the build failure from your screen shot. Maybe you can try clean your build or rerun the pod install with pod install in your ios folder.

[norbertschuler]

@harshvitra which SafeAreaView do you use? We have two different components from react-navigation and react-native used within our sources (don't ask me why ;-)):

Check out some article about the different versions of SafeAreaView: https://medium.com/@maheshnandam/use-safeareaview-from-react-navigation-to-fix-iphone-x-design-issue-ba531a9181d

[harshvitra]

I am sorry, I can not see the reason for the build failure from your screen shot. Maybe you can try clean your build or rerun the pod install with pod install in your ios folder.

I did this already -

'fatal error: 'UIKit/UIUserActivity.h' file not found'

This is what I can read in terminal

[norbertschuler]

I am sorry, I can not see the reason for the build failure from your screen shot. Maybe you can try clean your build or rerun the pod install with pod install in your ios folder.

I did this already -

'fatal error: 'UIKit/UIUserActivity.h' file not found'

This is what I can read in terminal

Probably react-native 0.6x requires at least Xcode 10.x to work and Xcode 9.x is not supported any more: facebook/react-native#25492

[norbertschuler]

Check out some article about the different versions of SafeAreaView: https://medium.com/@maheshnandam/use-safeareaview-from-react-navigation-to-fix-iphone-x-design-issue-ba531a9181d

As we now use v4 of react-navigation I think we have case 1 and should only more use import {SafeAreaView} from 'react-navigation'; without forceInset and with a proper headerStyle.

[sanjayradadiya]

https://www.loom.com/share/7ad1571f4db7402aa067fa101ff39d9b

@harshvitra you need to change some CSS
There is lot's of white space

I am not sure it's in design or something we have put that intentionally

[norbertschuler]

Works for me now (test on iPhone 5s, iPhone 6 and iPhone 11 simulator as well as Samsung Galaxy S6 Edge).