Merge pull request #9 from rafi-zimraan/main

Deploy Image picker

Author: muhammadhafifalbusyro

android/app/src/main/AndroidManifest.xml

@@ -2,12 +2,12 @@
   package="com.rnboilerplate">
 
     <uses-permission android:name="android.permission.INTERNET" />
-        <uses-permission android:name="android.permission.CAMERA" />
+        <!-- <uses-permission android:name="android.permission.CAMERA" />
         <uses-feature android:name="android.hardware.camera" />
         <uses-feature android:name="android.hardware.camera.autofocus" />
-    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
-    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> -->
 
+    <!-- <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> -->
 
     <application
       android:name=".MainApplication"

package-lock.json

@@ -18,7 +18,7 @@
     "@react-navigation/native-stack": "^6.7.0",
     "react": "17.0.2",
     "react-native": "0.68.2",
-    "react-native-image-picker": "^3.0.1",
+    "react-native-image-picker": "4.8.4",
     "react-native-image-slider-box": "^2.0.7",
     "react-native-linear-gradient": "^2.8.1",
     "react-native-pager-view": "^6.2.0",

package.json

@@ -46,6 +46,7 @@ const icons = {
   goggleMap: require('../assets/icons/goggleMap.png'),
   show: require('../assets/icons/show.png'),
   hide: require('../assets/icons/hide.png'),
+  telephone: require('../assets/icons/telephone.png'),
 };
 
 // !  Export all assets files

src/assets/icons/telephone.png

@@ -0,0 +1,24 @@
+import React from 'react';
+import {TouchableOpacity, Text} from 'react-native';
+import {colors} from '../utils';
+const Button = ({title, onPress = () => {}}) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.7}
+      style={{
+        height: 55,
+        width: '100%',
+        backgroundColor: colors.blue,
+        marginVertical: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Text style={{color: colors.white, fontWeight: 'bold', fontSize: 18}}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export default Button;

src/assets/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {colors} from '../utils';
+const Input = ({
+  label,
+  iconName,
+  error,
+  password,
+  onFocus = () => {},
+  ...props
+}) => {
+  const [hidePassword, setHidePassword] = React.useState(password);
+  const [isFocused, setIsFocused] = React.useState(false);
+  return (
+    <View style={{marginBottom: 20}}>
+      <Text style={style.label}>{label}</Text>
+      <View
+        style={[
+          style.inputContainer,
+          {
+            borderColor: error
+              ? colors.red
+              : isFocused
+              ? colors.secondary
+              : colors.black,
+            alignItems: 'center',
+            backgroundColor: '#fff', // Updated background color
+          },
+        ]}>
+        <Icon
+          name={iconName}
+          style={{color: colors.grey, fontSize: 22, marginRight: 10}}
+        />
+        <TextInput
+          autoCorrect={false}
+          onFocus={() => {
+            onFocus();
+            setIsFocused(true);
+          }}
+          onBlur={() => setIsFocused(false)}
+          secureTextEntry={hidePassword}
+          style={{color: colors.black, flex: 1}}
+          {...props}
+        />
+        {password && (
+          <Icon
+            onPress={() => setHidePassword(!hidePassword)}
+            name={hidePassword ? 'eye-outline' : 'eye-off-outline'}
+            style={{color: colors.grey, fontSize: 22}}
+          />
+        )}
+      </View>
+      {error && (
+        <Text style={{marginTop: 7, color: colors.red, fontSize: 12}}>
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  label: {
+    marginVertical: 5,
+    fontSize: 14,
+    color: colors.black,
+  },
+  inputContainer: {
+    height: 55,
+    flexDirection: 'row',
+    paddingHorizontal: 15,
+    borderWidth: 0.9,
+    borderRadius: 10,
+  },
+});
+
+export default Input;

src/components/Button.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  useWindowDimensions,
+  View,
+  Text,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+import {colors} from '../utils';
+
+const Loader = ({visible = false}) => {
+  const {width, height} = useWindowDimensions();
+  return (
+    visible && (
+      <View style={[style.container, {height, width}]}>
+        <View style={style.loader}>
+          <ActivityIndicator size="large" color={colors.blue} />
+          <Text style={{marginLeft: 10, fontSize: 16}}>Loading...</Text>
+        </View>
+      </View>
+    )
+  );
+};
+
+const style = StyleSheet.create({
+  loader: {
+    height: 70,
+    backgroundColor: colors.white,
+    marginHorizontal: 50,
+    borderRadius: 5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  container: {
+    position: 'absolute',
+    zIndex: 10,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+  },
+});
+
+export default Loader;

src/components/Input.js

@@ -1,3 +1,6 @@
 import ButtonCustom from './ButtonCustom';
+import Loader from './Loader';
+import Input from './Input';
+import Button from './Button';
 
-export { ButtonCustom };
+export {ButtonCustom, Loader, Input, Button};