fix: ios header spacing issue

ridvanaltun · May 30, 2022 · 3cde887 · 3cde887
1 parent 933bf51
commit 3cde887
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/example/App.tsx b/example/App.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { StatusBar } from 'expo-status-bar';
+import { Text, View, SafeAreaView, StatusBar, StyleSheet } from 'react-native';
 import { faker } from '@faker-js/faker';
 
 import Story from 'react-native-story-component';
@@ -25,33 +24,30 @@ const createStories = () => {
 
 const App = () => {
   return (
-    <>
-      <StatusBar backgroundColor="#000" style="light" />
-      <View style={styles.container}>
-        <Story
-          data={createStories()}
-          duration={10}
-          // customStoryView={({ index }) => {
-          //   return (
-          //     <View
-          //       key={index}
-          //       style={{
-          //         backgroundColor: '#fff',
-          //       }}
-          //     >
-          //       <Text>Custom View</Text>
-          //     </View>
-          //   );
-          // }}
-          customSwipeUpButton={() => (
-            <View>
-              <Text>Swipe</Text>
-            </View>
-          )}
-          storyListStyle={styles.story}
-        />
-      </View>
-    </>
+    <SafeAreaView style={styles.container}>
+      <StatusBar backgroundColor="#fff" barStyle="dark-content" />
+      <Story
+        data={createStories()}
+        duration={10}
+        // customStoryView={({ index }) => {
+        //   return (
+        //     <View
+        //       key={index}
+        //       style={{
+        //         backgroundColor: '#fff',
+        //       }}
+        //     >
+        //       <Text>Custom View</Text>
+        //     </View>
+        //   );
+        // }}
+        customSwipeUpButton={() => (
+          <View>
+            <Text>Swipe</Text>
+          </View>
+        )}
+      />
+    </SafeAreaView>
   );
 };
 
@@ -60,9 +56,6 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fff',
   },
-  story: {
-    marginTop: 70,
-  },
 });
 
 export default App;
diff --git a/example/package.json b/example/package.json
@@ -15,7 +15,6 @@
     "@faker-js/faker": "^7.1.0",
     "expo": "^45.0.4",
     "expo-splash-screen": "~0.15.1",
-    "expo-status-bar": "~1.3.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.68.2",

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -5477,11 +5477,6 @@ expo-splash-screen@~0.15.1:
     "@expo/configure-splash-screen" "^0.6.0"
     "@expo/prebuild-config" "~4.0.0"
 
-expo-status-bar@~1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.3.0.tgz"
-  integrity sha512-UszYUsT8A8jSUebrXht095Iwv5VIdg61LPuyNNoC5gFP0E9G+8LgX68deqR4zhJOlbsgSH2cixxKhrGW+1HPZg==
-
 expo@^45.0.4:
   version "45.0.4"
   resolved "https://registry.npmjs.org/expo/-/expo-45.0.4.tgz"

diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
   "dependencies": {
     "prop-types": "^15.8.1",
     "react-native-modalbox": "^2.0.2",
+    "react-native-status-bar-height": "^2.6.0",
     "react-native-swipe-gestures": "^1.0.5"
   },
   "devDependencies": {
@@ -57,6 +58,7 @@
     "@types/react": "^18.0.9",
     "@types/react-native": "^0.67.7",
     "@types/react-native-modalbox": "^1.4.10",
+    "auto-changelog": "^2.4.0",
     "commitizen": "^4.2.4",
     "commitlint": "^17.0.1",
     "cz-conventional-changelog": "^3.3.0",
@@ -129,7 +131,8 @@
   "release-it": {
     "git": {
       "commitMessage": "chore: release ${version} [ci skip]",
-      "tagName": "v${version}"
+      "tagName": "v${version}",
+      "changelog": "auto-changelog --stdout --unreleased --template ./templates/release-template.hbs"
     },
     "npm": {
       "publish": true

diff --git a/src/components/StoryListItem.tsx b/src/components/StoryListItem.tsx
@@ -20,6 +20,7 @@ import { isNullOrWhitespace } from '../helpers/ValidationHelpers';
 
 import { ActionStates } from '../index';
 import type { IUserStoryItem, ICustomProfileBanner } from '../index';
+import { getStatusBarHeight } from 'react-native-status-bar-height';
 
 const { width, height } = Dimensions.get('window');
 
@@ -351,6 +352,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     backgroundColor: 'rgba(117, 117, 117, 0.5)',
     marginHorizontal: 2,
+    marginTop: getStatusBarHeight(true),
   },
   userContainer: {
     height: 50,

diff --git a/templates/release-template.hbs b/templates/release-template.hbs
@@ -0,0 +1,32 @@
+{{#each releases}}
+  {{#if @first}}
+    {{#custom merges commits heading='#### Features' subject='feat: '}}
+      -
+      {{message}}
+      ({{#if id}}[`#{{id}}`]{{else}}[{{shorthash}}]{{/if}}({{href}})).
+    {{/custom}}
+
+    {{#custom
+      merges
+      commits
+      heading='#### Improvements'
+      subject='(chore|refactor|style): '
+    }}
+      -
+      {{message}}
+      ({{#if id}}[`#{{id}}`]{{else}}[{{shorthash}}]{{/if}}({{href}})).
+    {{/custom}}
+
+    {{#custom merges commits heading='#### Fixes' subject='fix: '}}
+      -
+      {{message}}
+      ({{#if id}}[`#{{id}}`]{{else}}[{{shorthash}}]{{/if}}({{href}})).
+    {{/custom}}
+
+    {{#custom merges commits heading='#### Documentations' subject='docs: '}}
+      -
+      {{message}}
+      ({{#if id}}[`#{{id}}`]{{else}}[{{shorthash}}]{{/if}}({{href}})).
+    {{/custom}}
+  {{/if}}
+{{/each}}
diff --git a/yarn.lock b/yarn.lock
@@ -2721,6 +2721,17 @@ atob@^2.1.2:
   resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+auto-changelog@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/auto-changelog/-/auto-changelog-2.4.0.tgz#a2d57d49b70ada7ca2e7c6a20a71572561d19cd9"
+  integrity sha512-vh17hko1c0ItsEcw6m7qPRf3m45u+XK5QyCrrBFViElZ8jnKrPC1roSznrd1fIB/0vR/zawdECCRJtTuqIXaJw==
+  dependencies:
+    commander "^7.2.0"
+    handlebars "^4.7.7"
+    node-fetch "^2.6.1"
+    parse-github-url "^1.0.2"
+    semver "^7.3.5"
+
 babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz"
@@ -3421,6 +3432,11 @@ commander@^2.19.0:
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz"
@@ -7686,7 +7702,7 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-fetch@^2.2.0, node-fetch@^2.5.0, node-fetch@^2.6.7:
+node-fetch@^2.2.0, node-fetch@^2.5.0, node-fetch@^2.6.1, node-fetch@^2.6.7:
   version "2.6.7"
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
@@ -8175,6 +8191,11 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-github-url@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-github-url/-/parse-github-url-1.0.2.tgz#242d3b65cbcdda14bb50439e3242acf6971db395"
+  integrity sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==
+
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz"
@@ -8664,6 +8685,11 @@ react-native-modalbox@^2.0.2:
   dependencies:
     prop-types "^15.5.10"
 
+react-native-status-bar-height@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-status-bar-height/-/react-native-status-bar-height-2.6.0.tgz#b6afd25b6e3d533c43d0fcdcfd5cafd775592cea"
+  integrity sha512-z3SGLF0mHT+OlJDq7B7h/jXPjWcdBT3V14Le5L2PjntjjWM3+EJzq2BcXDwV+v67KFNJic5pgA26cCmseYek6w==
+
 react-native-swipe-gestures@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz"