Some custom components added, safe area supported, utils moved.

example/src/Router.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
-import WelcomeScreen from './Welcome';
-import BasicExampleScreen from './BasicExample';
+import WelcomeScreen from './screens/Welcome';
+import BasicExampleScreen from './screens/BasicExample';
 
 const RootStack = createStackNavigator();
 
@@ -10,13 +10,21 @@ const Router = () => {
     <RootStack.Navigator>
       <RootStack.Screen
         name={'root.welcome'}
-        options={{headerTitle: 'Welcome'}}
+        options={{
+          headerTitle: 'Welcome',
+          headerTitleAlign: 'center',
+          headerLeftLabelVisible: false,
+        }}
         component={WelcomeScreen}
       />
 
       <RootStack.Screen
         name={'root.basic_example'}
-        options={{headerTitle: 'Basic Example'}}
+        options={{
+          headerTitle: 'Basic Example',
+          headerTitleAlign: 'center',
+          headerLeftLabelVisible: false,
+        }}
         component={BasicExampleScreen}
       />
     </RootStack.Navigator>

example/src/components/commons/ExButton/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  Text,
+  StyleSheet,
+} from 'react-native';
+
+const ExButton = ({title, style, ...props}: TouchableOpacityProps) => {
+  return (
+    <TouchableOpacity
+      style={[styles.wrapper, style]}
+      activeOpacity={0.5}
+      {...props}>
+      <Text style={styles.title}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'skyblue',
+    borderRadius: 16,
+    marginTop: 8,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+  },
+  title: {
+    fontSize: 18,
+  },
+});
+
+export default ExButton;

example/src/components/commons/ExWrapper/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {SafeAreaViewProps, SafeAreaView} from 'react-native-safe-area-context';
+
+const ExWrapper = ({
+  edges = ['bottom'],
+  style,
+  children,
+  ...props
+}: SafeAreaViewProps) => {
+  return (
+    <SafeAreaView style={[styles.wrapper, style]} edges={edges} {...props}>
+      {children}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    padding: 8,
+  },
+});
+
+export default ExWrapper;

example/src/components/commons/index.js

@@ -0,0 +1,4 @@
+import ExButton from './ExButton';
+import ExWrapper from './ExWrapper';
+
+export {ExButton, ExWrapper};

example/src/screens/BasicExample/index.js

@@ -1,17 +1,10 @@
 import React, {useEffect, useState} from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  FlatList,
-  Button,
-  SafeAreaView,
-  Platform,
-} from 'react-native';
+import {StyleSheet, View, Text, FlatList, Platform} from 'react-native';
 import RNFS from 'react-native-fs';
 import RNBGD from '@kesha-antonov/react-native-background-downloader';
 import Slider from '@react-native-community/slider';
-import {toast, uuid} from '../utils';
+import {ExButton, ExWrapper} from '../../components/commons';
+import {toast, uuid} from '../../utils';
 
 const defaultDir = RNBGD.directories.documents;
 
@@ -25,16 +18,16 @@ const Footer = ({
   ...props
 }) => {
   return (
-    <View style={styles.headerWrapper}>
+    <View style={styles.headerWrapper} {...props}>
       {isStart ? (
-        <Button title={'Stop'} onPress={onStop} />
+        <ExButton title={'Stop'} onPress={onStop} />
       ) : (
-        <Button title={'Start'} onPress={onStart} />
+        <ExButton title={'Start'} onPress={onStart} />
       )}
 
-      <Button title={'Reset'} onPress={onReset} />
-      <Button title={'Clear'} onPress={onClear} />
-      <Button title={'Read'} onPress={onRead} />
+      <ExButton title={'Reset'} onPress={onReset} />
+      <ExButton title={'Clear'} onPress={onClear} />
+      <ExButton title={'Read'} onPress={onRead} />
     </View>
   );
 };
@@ -67,7 +60,12 @@ const BasicExampleScreen = () => {
    * It is used to resume your incomplete or unfinished downloads.
    */
   const resumeExistingTasks = async () => {
-    const tasks = await RNBGD.checkForExistingDownloads();
+    const tasks = await RNBGD.checkForExistingDownloads()
+      .then(data => data)
+      .catch(err => {
+        console.log(`checkForExistingDownloads failed ${err}`);
+      });
+
     console.log(tasks);
 
     if (tasks.length > 0) {
@@ -128,7 +126,7 @@ const BasicExampleScreen = () => {
           return [...prevState];
         });
 
-        Platform.OS === 'ios' && RNBGD.completeHandler(task.id)
+        Platform.OS === 'ios' && RNBGD.completeHandler(task.id);
       });
   };
 
@@ -162,7 +160,7 @@ const BasicExampleScreen = () => {
   };
 
   const stop = () => {
-    const tasks = downloadTasks.map((task, index) => {
+    const tasks = downloadTasks.map(task => {
       task.stop();
       return task;
     });
@@ -208,7 +206,7 @@ const BasicExampleScreen = () => {
   };
 
   return (
-    <SafeAreaView style={styles.wrapper}>
+    <ExWrapper>
       <Text style={styles.title}>Basic Example</Text>
       <View>
         <FlatList
@@ -235,7 +233,7 @@ const BasicExampleScreen = () => {
         />
       </View>
       <FlatList
-        style={{flex: 1}}
+        style={{flex: 1, flexGrow: 1}}
         data={downloadTasks}
         renderItem={({item, index}) => {
           const isEnd = ['STOPPED', 'DONE', 'FAILED'].includes(item.state);
@@ -256,25 +254,25 @@ const BasicExampleScreen = () => {
               <View>
                 {!isEnd &&
                   (isDownloading ? (
-                    <Button title={'Pause'} onPress={() => pause(item.id)} />
+                    <ExButton title={'Pause'} onPress={() => pause(item.id)} />
                   ) : (
-                    <Button title={'Resume'} onPress={() => resume(item.id)} />
+                    <ExButton
+                      title={'Resume'}
+                      onPress={() => resume(item.id)}
+                    />
                   ))}
-                <Button title={'Cancel'} onPress={() => cancel(item.id)} />
+                <ExButton title={'Cancel'} onPress={() => cancel(item.id)} />
               </View>
             </View>
           );
         }}
         keyExtractor={(item, index) => `task-${index}`}
       />
-    </SafeAreaView>
+    </ExWrapper>
   );
 };
 
 const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-  },
   headerWrapper: {
     flex: 1,
     flexDirection: 'row',

example/src/screens/Welcome/index.js

@@ -1,29 +1,34 @@
 import React from 'react';
-import {SafeAreaView, Button, Text, StyleSheet} from 'react-native';
+import {Text, StyleSheet} from 'react-native';
+import {ExButton, ExWrapper} from '../../components/commons';
 
 const WelcomeScreen = ({navigation}) => {
   return (
-    <SafeAreaView style={styles.wrapper}>
+    <ExWrapper>
       <Text style={styles.title}>React Native Background Downloader</Text>
 
-      <Button
+      <ExButton
         title={'1- Basic Example'}
         onPress={() => navigation.navigate('root.basic_example')}
       />
-    </SafeAreaView>
+    </ExWrapper>
   );
 };
 
 const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-  },
   title: {
     fontSize: 24,
     fontWeight: '500',
     textAlign: 'center',
     alignSelf: 'center',
-    marginTop: 16,
+    marginTop: 12,
+  },
+  description: {
+    fontSize: 18,
+    fontWeight: '500',
+    textAlign: 'center',
+    alignSelf: 'center',
+    marginTop: 6,
   },
 });
 

example/src/utils.js

@@ -1,6 +0,0 @@
-import Toast from 'react-native-root-toast';
-
-export const uuid = () => Math.random().toString(36).substring(2, 6);
-export const toast = (message, duration = 750, position = 120) => {
-  Toast.show(message, {duration, position});
-};

example/src/utils/index.js

@@ -0,0 +1,11 @@
+import Toast from 'react-native-root-toast';
+import {initialWindowMetrics} from 'react-native-safe-area-context';
+
+const safeTopInset = initialWindowMetrics.insets.top
+  ? initialWindowMetrics.insets.top + 50
+  : 100;
+
+export const uuid = () => Math.random().toString(36).substring(2, 6);
+export const toast = (message, duration = 750, position = safeTopInset) => {
+  Toast.show(message, {duration, position});
+};