feat: use the new safe area context lib

ios/Podfile.lock

@@ -499,7 +499,7 @@ PODS:
     - React-Core
   - react-native-randombytes (3.6.1):
     - React-Core
-  - react-native-safe-area-context (3.4.1):
+  - react-native-safe-area-context (4.7.4):
     - React-Core
   - react-native-web-browser (1.1.0):
     - React-Core
@@ -1037,7 +1037,7 @@ SPEC CHECKSUMS:
   react-native-mmkv: 69b9c003f10afdd01addf7c6ee784ce42ee2eff3
   react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
-  react-native-safe-area-context: 9e40fb181dac02619414ba1294d6c2a807056ab9
+  react-native-safe-area-context: 2cd91d532de12acdb0a9cbc8d43ac72a8e4c897c
   react-native-web-browser: 087b454e1e94b58b40ba73f54251d77486144d19
   React-perflogger: 74b2d33200b8c26440c2c39b87a4177d8404655f
   React-RCTActionSheet: 3fdf6b3a85f2ea4b365b267efd9c82aaeb20fe33

package.json

@@ -102,7 +102,7 @@
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-randombytes": "3.6.1",
     "react-native-reanimated": "2.14.1",
-    "react-native-safe-area-context": "^3.2.0",
+    "react-native-safe-area-context": "^4.7.4",
     "react-native-screens": "^3.18.2",
     "react-native-select-dropdown": "^3.3.4",
     "react-native-svg": "^13.7.0",

src/components/DKeyboardAvoidingView/index.tsx

@@ -11,7 +11,7 @@ const DKeyboardAvoidingView: React.FC<PropsWithChildren<KeyboardAvoidingViewProp
   ...props
 }) => (
   <KeyboardAvoidingView
-    keyboardVerticalOffset={Platform.OS === 'ios' ? 110 : 0}
+    keyboardVerticalOffset={Platform.OS === 'ios' ? 12 : 0}
     {...(Platform.OS === 'ios' ? { behavior: 'padding' } : {})}
     children={children}
     {...props}

src/components/ProfileHeader/index.tsx

@@ -14,7 +14,7 @@ import Spacer from 'components/Spacer';
 import TypographyContentLoaders from 'components/ContentLoaders/Typography';
 import StyledActivityIndicator from 'components/StyledActivityIndicator';
 import { Validator } from 'types/validator';
-import { usePickPicture, useMemoizedPictureSource } from './useHooks';
+import { useMemoizedPictureSource, usePickPicture } from './useHooks';
 import useStyles from './useStyles';
 
 export type ProfileHeaderProps = {
@@ -112,7 +112,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = (props) => {
   }, [profile?.coverPicture, profile?.profilePicture, validator?.avatarUrl]);
 
   return (
-    <View style={styles.root}>
+    <View style={styles.root} onStartShouldSetResponder={() => true}>
       <View style={styles.topRight}>{topRightElement}</View>
       <View style={styles.topLeft}>{topLeftElement}</View>
 

src/components/StyledSafeAreaView/index.tsx

@@ -10,17 +10,26 @@ import {
 } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import Divider from 'components/Divider';
+import { SafeAreaView, SafeAreaViewProps, useSafeAreaInsets } from 'react-native-safe-area-context';
 import useStyles from './useStyles';
 
 export type StyledSafeAreaViewProps = ViewProps & {
+  /**
+   * Edges to apply to the SafeAreaView.
+   */
+  edges?: SafeAreaViewProps['edges'];
   /**
    * True if the content should be wrapped inside a ScrollView.
    */
   scrollable?: boolean;
   /**
-   * View padding.
+   * View padding horizontal.
    */
-  padding?: number;
+  paddingHorizontal?: number;
+  /**
+   * View padding vertical.
+   */
+  paddingVertical?: number;
   /**
    * Shows an element as a top bar.
    */
@@ -49,10 +58,19 @@ export type StyledSafeAreaViewProps = ViewProps & {
    * to hide the user keyboard on iOS devices.
    */
   touchableWithoutFeedbackOnPress?: () => any;
+  /**
+   * Override themed background color.
+   */
+  customBackgroundColor?: string;
+  /**
+   * Add a fake top bar to the view.
+   */
+  fakeTopBar?: boolean;
 };
 
 const StyledSafeAreaView: React.FC<StyledSafeAreaViewProps> = (props) => {
   const {
+    edges,
     scrollable,
     topBar,
     divider,
@@ -61,46 +79,47 @@ const StyledSafeAreaView: React.FC<StyledSafeAreaViewProps> = (props) => {
     style,
     touchableWithoutFeedbackDisabled,
     touchableWithoutFeedbackOnPress,
-    ...viewProps
+    customBackgroundColor,
+    fakeTopBar,
   } = props;
   const styles = useStyles(props);
   const theme = useTheme();
   const statusBarVariant = theme.dark ? 'light-content' : 'dark-content';
-
+  const insets = useSafeAreaInsets();
   return (
-    <View style={styles.root}>
-      <StatusBar barStyle={statusBarVariant} backgroundColor="transparent" />
-      {background !== undefined && (
-        <ImageBackground style={styles.background} source={background} />
-      )}
-      {topBar}
-      {divider && <Divider />}
-      <TouchableWithoutFeedback
-        disabled={touchableWithoutFeedbackDisabled ?? true}
-        onPress={touchableWithoutFeedbackOnPress ?? Keyboard.dismiss}
+    <TouchableWithoutFeedback
+      disabled={touchableWithoutFeedbackDisabled ?? true}
+      onPress={touchableWithoutFeedbackOnPress ?? Keyboard.dismiss}
+    >
+      <SafeAreaView
+        style={[
+          styles.root,
+          { backgroundColor: customBackgroundColor ?? theme.colors.background },
+          style,
+        ]}
+        edges={edges}
       >
-        <View style={[styles.content, style]}>
-          {scrollable ? (
-            <View
-              {...viewProps}
-              style={styles.scrollViewContainer}
-              onStartShouldSetResponder={() => false}
+        {fakeTopBar && <View style={[styles.fakeView, { height: insets.top }]} />}
+        <StatusBar barStyle={statusBarVariant} backgroundColor="transparent" />
+        {background !== undefined && (
+          <ImageBackground style={styles.background} source={background} />
+        )}
+        <View style={styles.topBar}>{topBar}</View>
+        {divider && <Divider />}
+        {scrollable ? (
+          <View style={styles.scrollViewContainer} onStartShouldSetResponder={() => false}>
+            <ScrollView
+              style={{ margin: -theme.spacing.m }}
+              contentContainerStyle={{ padding: theme.spacing.m, flexGrow: 1 }}
             >
-              <ScrollView
-                style={{ margin: -theme.spacing.m }}
-                contentContainerStyle={{ padding: theme.spacing.m, flexGrow: 1 }}
-              >
-                {children}
-              </ScrollView>
-            </View>
-          ) : (
-            <View {...viewProps} style={{ flex: 1 }} onStartShouldSetResponder={() => false}>
               {children}
-            </View>
-          )}
-        </View>
-      </TouchableWithoutFeedback>
-    </View>
+            </ScrollView>
+          </View>
+        ) : (
+          children
+        )}
+      </SafeAreaView>
+    </TouchableWithoutFeedback>
   );
 };
 

src/components/StyledSafeAreaView/useStyles.ts

@@ -1,30 +1,34 @@
 import { makeStyleWithProps } from 'config/theme';
-import { Platform } from 'react-native';
 import { StyledSafeAreaViewProps } from 'components/StyledSafeAreaView/index';
+import { Dimensions } from 'react-native';
 
 const useStyles = makeStyleWithProps((props: StyledSafeAreaViewProps, theme) => ({
   root: {
+    flex: 1,
     display: 'flex',
     flexDirection: 'column',
-    flexGrow: 1,
-    paddingBottom: Platform.OS === 'android' || props.noIosPadding === true ? 0 : 24,
-    backgroundColor: theme.colors.background,
+    paddingHorizontal: props?.paddingHorizontal ?? theme.spacing.m,
+    paddingVertical: props?.paddingVertical ?? theme.spacing.m,
+    backgroundColor: props.background === undefined ? theme.colors.background : 'transparent',
   },
   background: {
     position: 'absolute',
-    width: '100%',
-    height: '100%',
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-    padding: props?.padding ?? theme.spacing.m,
-    backgroundColor: props.background === undefined ? theme.colors.background : 'transparent',
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+    top: 0,
+    bottom: 0,
+    zIndex: 0,
   },
   scrollViewContainer: {
     flex: 1,
   },
+  topBar: { marginHorizontal: -theme.spacing.m, marginTop: -theme.spacing.m, zIndex: 10 },
+  fakeView: {
+    width: Dimensions.get('window').width,
+    backgroundColor: theme.colors.background,
+    zIndex: 10,
+    alignSelf: 'center',
+  },
 }));
 
 export default useStyles;

src/components/TopBar/useStyles.ts

@@ -1,5 +1,4 @@
 import { makeStyleWithProps } from 'config/theme';
-import { Platform, StatusBar } from 'react-native';
 import { TopBarProps } from 'components/TopBar/index';
 
 const useStyles = makeStyleWithProps((props: TopBarProps, theme) => ({
@@ -8,9 +7,8 @@ const useStyles = makeStyleWithProps((props: TopBarProps, theme) => ({
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: theme.colors.background,
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 42,
-    maxHeight: 80,
   },
+
   containerLeft: {
     flex: 1,
     alignItems: 'flex-start',
@@ -19,7 +17,6 @@ const useStyles = makeStyleWithProps((props: TopBarProps, theme) => ({
   },
   containerCenter: {
     flex: 3,
-    height: '100%',
     justifyContent: 'center',
     alignItems: 'center',
   },

src/config/theme/DarkTheme.ts

@@ -52,6 +52,7 @@ const DarkTheme: ReactNativePaper.Theme = {
     neutral900: '#E6E6E6',
     neutral700: '#AFAFAF',
     neutral300: '#E8E8E8',
+    placeholder: '#FFF0EC',
   },
 };
 

src/config/theme/LightTheme.ts

@@ -77,6 +77,7 @@ export const LightTheme: ReactNativePaper.Theme = {
     neutral300: '#E8E8E8',
     neutral700: '#5C5C5C',
     neutral900: '#0A0A0A',
+    placeholder: '#0A0A0A',
     feedbackSuccess: '#1EC490',
     feedbackSuccessBg: '#DEF9E4',
     feedbackError: '#E44A4A',

src/screens/DevScreen/index.tsx

@@ -42,6 +42,7 @@ const routesToRender = [
   ROUTES.VALIDATOR_DETAILS,
   ROUTES.MANAGE_STAKING,
   ROUTES.COMPONENTS_DEMO,
+  ROUTES.SPLASH_SCREEN,
   DevRoutes.SINGLE_BUTTON_MODAL,
   DevRoutes.BOTTOM_MODAL,
   DevRoutes.TEST_TRANSACTION,

src/screens/EditProfile/index.tsx

@@ -211,19 +211,19 @@ const EditProfile = () => {
 
   return (
     <StyledSafeAreaView
-      padding={0}
+      paddingHorizontal={0}
       topBar={
         <TopBar
+          style={styles.topBar}
           stackProps={{ navigation }}
           rightElement={DoneButton}
           title={profile ? t('edit profile') : t('create profile')}
         />
       }
       touchableWithoutFeedbackDisabled={false}
-      scrollable
     >
       <DKeyboardAvoidingView style={{ flex: 1 }}>
-        <ScrollView style={styles.content} keyboardDismissMode={'on-drag'}>
+        <ScrollView style={styles.content}>
           {/* Header */}
           <ProfileHeader
             canEdit={true}

src/screens/EditProfile/useStyles.ts

@@ -16,6 +16,7 @@ const useStyles = makeStyle((theme) => ({
   saveBtn: {
     margin: theme.spacing.m,
   },
+  topBar: { marginTop: -theme.spacing.m, marginHorizontal: theme.spacing.m },
 }));
 
 export default useStyles;

src/screens/GovernanceProposalDetails/index.tsx

@@ -90,34 +90,40 @@ const GovernanceProposalDetails: React.FC<NavProps> = (props) => {
     }
 
     return (
-      <Tabs.Container
-        renderHeader={Header}
-        headerContainerStyle={styles.headerContainer}
-        width={tabsWidth}
-        renderTabBar={StyledMaterialTabBar}
-        minHeaderHeight={-25}
+      <View
+        style={styles.tabsContainer}
+        onLayout={(e) => {
+          setTabsWidth(e.nativeEvent.layout.width);
+        }}
       >
-        <Tabs.Tab name={ProposalDetailsTabs.PROPOSAL_DETAILS} label={t('proposal details')}>
-          {/* @ts-ignore */}
-          <Tabs.ScrollView showsVerticalScrollIndicator={false}>
-            <ProposalDetails proposal={proposal} />
-          </Tabs.ScrollView>
-        </Tabs.Tab>
-        <Tabs.Tab name={ProposalDetailsTabs.VOTES} label={t('votes')}>
-          <Votes proposalId={proposal.id} />
-        </Tabs.Tab>
-      </Tabs.Container>
+        <Tabs.Container
+          renderHeader={Header}
+          headerContainerStyle={styles.headerContainer}
+          width={tabsWidth}
+          renderTabBar={StyledMaterialTabBar}
+        >
+          <Tabs.Tab name={ProposalDetailsTabs.PROPOSAL_DETAILS} label={t('proposal details')}>
+            {/* @ts-ignore */}
+            <Tabs.ScrollView showsVerticalScrollIndicator={false}>
+              <ProposalDetails proposal={proposal} />
+            </Tabs.ScrollView>
+          </Tabs.Tab>
+          <Tabs.Tab name={ProposalDetailsTabs.VOTES} label={t('votes')}>
+            <Votes proposalId={proposal.id} />
+          </Tabs.Tab>
+        </Tabs.Container>
+      </View>
     );
-  }, [proposal, Header, styles.headerContainer, tabsWidth, t]);
+  }, [proposal, styles.tabsContainer, styles.headerContainer, Header, tabsWidth, t]);
 
   return (
     <StyledSafeAreaView
+      edges={['bottom']}
       scrollable={false}
+      paddingVertical={0}
+      fakeTopBar={true}
       touchableWithoutFeedbackDisabled={true}
       topBar={<TopBar style={styles.topBar} title={t('proposal')} stackProps={props} />}
-      onLayout={(e) => {
-        setTabsWidth(e.nativeEvent.layout.width);
-      }}
     >
       {proposalDetails}
     </StyledSafeAreaView>

src/screens/GovernanceProposalDetails/useStyles.ts

@@ -21,6 +21,9 @@ const useStyles = makeStyle((theme) => ({
     elevation: 0,
     zIndex: 4,
   },
+  tabsContainer: {
+    flex: 1,
+  },
 }));
 
 export default useStyles;

src/screens/GovernanceProposals/index.tsx

@@ -73,6 +73,7 @@ const GovernanceProposals: React.FC<NavProps> = (props) => {
 
   return (
     <StyledSafeAreaView
+      edges={['top']}
       topBar={
         <TopBar
           leftIconColor={theme.colors.icon['1']}