├── Handle BarCodeScanner
    ├── src
    │   ├── navigation
    │   │   └── Navigator.js
    │   └── screens
    │   │   ├── Results.js
    │   │   ├── Scanner.js
    │   │   ├── Maj.js
    │   │   └── Products.js
    ├── assets
    │   ├── 4.png
    │   ├── icon.png
    │   ├── logo.png
    │   ├── favicon.png
    │   ├── open-box.png
    │   ├── search.png
    │   ├── splash.png
    │   ├── switch.png
    │   └── adaptive-icon.png
    ├── babel.config.js
    ├── .expo-shared
    │   └── assets.json
    ├── .gitignore
    ├── app.json
    ├── package.json
    └── App.js
└── readme.md


/Handle BarCodeScanner/src/navigation/Navigator.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Handle BarCodeScanner/assets/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saifeddineelhanoune/HandlingBarCode/HEAD/Handle BarCodeScanner/assets/4.png


--------------------------------------------------------------------------------
/Handle BarCodeScanner/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saifeddineelhanoune/HandlingBarCode/HEAD/Handle BarCodeScanner/assets/icon.png


--------------------------------------------------------------------------------
/Handle BarCodeScanner/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saifeddineelhanoune/HandlingBarCode/HEAD/Handle BarCodeScanner/assets/logo.png


--------------------------------------------------------------------------------
/Handle BarCodeScanner/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saifeddineelhanoune/HandlingBarCode/HEAD/Handle BarCodeScanner/assets/favicon.png


--------------------------------------------------------------------------------
/Handle BarCodeScanner/assets/open-box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saifeddineelhanoune/HandlingBarCode/HEAD/Handle BarCodeScanner/assets/open-box.png


--------------------------------------------------------------------------------
/Handle BarCodeScanner/assets/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saifeddineelhanoune/HandlingBarCode/HEAD/Handle BarCodeScanner/assets/search.png


--------------------------------------------------------------------------------
/Handle BarCodeScanner/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saifeddineelhanoune/HandlingBarCode/HEAD/Handle BarCodeScanner/assets/splash.png


--------------------------------------------------------------------------------
/Handle BarCodeScanner/assets/switch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saifeddineelhanoune/HandlingBarCode/HEAD/Handle BarCodeScanner/assets/switch.png


--------------------------------------------------------------------------------
/Handle BarCodeScanner/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saifeddineelhanoune/HandlingBarCode/HEAD/Handle BarCodeScanner/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/Handle BarCodeScanner/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/Handle BarCodeScanner/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/Handle BarCodeScanner/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | ### Feature updates :
2 | 
3 | a button 'import' that could help to add a .csv file that contains a requirement to fill it into the app .
4 | 
5 | custom logo of company/start-up that may help to manage products and become aproducts management application 
6 | 


--------------------------------------------------------------------------------
/Handle BarCodeScanner/src/screens/Results.js:
--------------------------------------------------------------------------------
 1 | import { View, Text } from 'react-native'
 2 | import React from 'react'
 3 | 
 4 | const Results = () => {
 5 |   return (
 6 |     <View>
 7 |       <Text>Results</Text>
 8 |     </View>
 9 |   )
10 | }
11 | 
12 | export default Results


--------------------------------------------------------------------------------
/Handle BarCodeScanner/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "scan",
 4 |     "slug": "scan",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "userInterfaceStyle": "light",
 9 |     "splash": {
10 |       "image": "./assets/splash.png",
11 |       "resizeMode": "contain",
12 |       "backgroundColor": "#ffffff"
13 |     },
14 |     "updates": {
15 |       "fallbackToCacheTimeout": 0
16 |     },
17 |     "assetBundlePatterns": [
18 |       "**/*"
19 |     ],
20 |     "ios": {
21 |       "supportsTablet": true
22 |     },
23 |     "android": {
24 |       "adaptiveIcon": {
25 |         "foregroundImage": "./assets/adaptive-icon.png",
26 |         "backgroundColor": "#FFFFFF"
27 |       }
28 |     },
29 |     "web": {
30 |       "favicon": "./assets/favicon.png"
31 |     }
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/Handle BarCodeScanner/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "scan",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web",
10 |     "eject": "expo eject"
11 |   },
12 |   "dependencies": {
13 |     "@react-navigation/native": "^6.0.11",
14 |     "@react-navigation/native-stack": "^6.7.0",
15 |     "expo": "^49.0.21",
16 |     "expo-barcode-scanner": "~11.3.0",
17 |     "expo-status-bar": "~1.3.0",
18 |     "react": "17.0.2",
19 |     "react-dom": "17.0.2",
20 |     "react-native": "0.68.2",
21 |     "react-native-ico-material-design": "^3.3.1",
22 |     "react-native-safe-area-context": "4.2.4",
23 |     "react-native-screens": "~3.11.1",
24 |     "react-native-svg": "^12.4.3",
25 |     "react-native-web": "0.17.7"
26 |   },
27 |   "devDependencies": {
28 |     "@babel/core": "^7.12.9"
29 |   },
30 |   "private": true
31 | }
32 | 


--------------------------------------------------------------------------------
/Handle BarCodeScanner/src/screens/Scanner.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { Text, View, StyleSheet, Button } from 'react-native';
 3 | import { BarCodeScanner } from 'expo-barcode-scanner';
 4 | 
 5 | export default function Scanner() {
 6 |   const [hasPermission, setHasPermission] = useState(null);
 7 |   const [scanned, setScanned] = useState(false);
 8 | 
 9 |   useEffect(() => {
10 |     (async () => {
11 |       const { status } = await BarCodeScanner.requestPermissionsAsync();
12 |       setHasPermission(status === 'granted');
13 |     })();
14 |   }, []);
15 | 
16 |   const handleBarCodeScanned = ({ data }) => {
17 |     setScanned(true);
18 |     let codeScan = data;
19 |     let codeArticle = codeScan.substring(4,7);
20 |     let quantity = codeScan.substring(8,11);
21 |     if(codeScan.length > 13)
22 |         alert("le code barre doit être composé de 13 chiffre");
23 |   }
24 | 
25 |   if (hasPermission === null) {
26 |     return <Text>Requesting for camera permission</Text>;
27 |   }
28 |   if (hasPermission === false) {
29 |     return <Text>No access to camera</Text>;
30 |   }
31 | 
32 |   return (
33 |     <View style={styles.container}>
34 |       <BarCodeScanner
35 |         onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
36 |         style={StyleSheet.absoluteFillObject}
37 |       />
38 |       {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
39 |       <View>
40 | 
41 |       </View>
42 |     </View>
43 |   );
44 | }
45 | 
46 | const styles = StyleSheet.create({
47 |   container: {
48 |     flex: 1,
49 |     height:'100%',
50 |     justifyContent:'center',
51 |     alignItems:'center',
52 |   },
53 | });
54 | 


--------------------------------------------------------------------------------
/Handle BarCodeScanner/src/screens/Maj.js:
--------------------------------------------------------------------------------
 1 | import { View, TextInput, StyleSheet, SafeAreaView , Button,Alert} from 'react-native'
 2 | import React from 'react'
 3 | 
 4 | const Maj = () => {
 5 |   const [number, onChangeNumber] = React.useState(null);
 6 |   return (
 7 |     <View style={styles.container}>
 8 | 
 9 |      <SafeAreaView>
10 |       <TextInput
11 |         style={styles.input}
12 |         onChangeText={onChangeNumber}
13 |         value={number}
14 |         placeholder="Code scan"
15 |         keyboardType="numeric"
16 |       />
17 |       <TextInput
18 |         style={styles.input}
19 |         onChangeText={onChangeNumber}
20 |         value={number}
21 |         placeholder="Code Article"
22 |         keyboardType="numeric"
23 |       />
24 |       <TextInput
25 |         style={styles.input}
26 |         onChangeText={onChangeNumber}
27 |         value={number}
28 |         placeholder="Designation"
29 |         keyboardType="numeric"
30 |       />
31 |       <TextInput
32 |         style={styles.input}
33 |         onChangeText={onChangeNumber}
34 |         value={number}
35 |         placeholder="Qantity"
36 |         keyboardType="numeric"
37 |       />
38 |     <View style={styles.fixToText}>
39 |         <Button
40 |           title="Left button"
41 |           width="45%"
42 |           onPress={() => Alert.alert('Left button pressed')}
43 |         />
44 |         </View>
45 |         <View style={styles.fixToText}>
46 |         <Button
47 |           title="Right button"
48 |           onPress={() => Alert.alert('Right button pressed')}
49 |         />
50 |       </View>
51 |     </SafeAreaView>
52 |     </View>
53 |   )
54 | }
55 | const styles = StyleSheet.create({
56 |   container:{
57 |     flex:1,
58 |     justifyContent:'center',
59 |     alignItems:'center'
60 |     },
61 |     input: {
62 |       width:350,
63 |       height: 40,
64 |       margin: 12,
65 |       borderWidth: 1,
66 |       padding: 10,
67 |       borderRadius:10,
68 |       
69 |     },
70 |   fixToText: {
71 |     flexDirection: 'column',
72 |     marginHorizontal:19,
73 |     marginVertical:10
74 |   },
75 |   
76 | });
77 | 
78 | export default Maj


--------------------------------------------------------------------------------
/Handle BarCodeScanner/src/screens/Products.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet, Text, SafeAreaView,FlatList, View,TextInput,Image } from 'react-native'
 2 | import React from 'react'
 3 | import { Database } from '../../Data'
 4 | 
 5 | 
 6 | const Products = () => {
 7 | 
 8 |   const [number, onChangeNumber] = React.useState('');
 9 |   
10 |   const renderItem =({item}) =>{
11 |     return(
12 |       <View style={styles.card}>
13 |         <View style={styles.list}>
14 |             <Text style={styles.arte}>Article: <Text  style={styles.itms}>{item.article}</Text></Text>
15 |             <Text style={styles.arte}> Code Article:<Text style={styles.itms}>{item.code_art}</Text> </Text>
16 |             <Text style={styles.arte}> Prix HT: <Text style={styles.itms}>{item.pa_ht}</Text></Text>
17 |             <Text style={styles.arte}> Prix TTC:<Text style={styles.itms}>{item.pv_ttc}</Text> </Text>
18 |         </View>
19 |       </View>
20 |       
21 |     )
22 |   }
23 |   const filteredData = Database.filter(item => item.code_art.includes(number));
24 |   return (
25 |     <>
26 | 
27 |       <View style={{flexDirection:"row",alignContent:'space-between', borderWidth:1,borderRadius:20,marginHorizontal:10,marginVertical:10,}}>
28 |         <Image
29 |           style={{width : 32, height : 32, marginHorizontal : 10, marginVertical : 10}}
30 |           source={require('../../assets/search.png')}
31 |         />
32 |         <TextInput
33 |           style={styles.input}
34 |           onChangeText = { onChangeNumber }
35 |           value = { number }
36 |           placeholder="search by code article"
37 |           keyboardType="numeric"
38 |         />
39 |       </View>
40 |       <SafeAreaView style={ styles.container }>
41 |         <FlatList 
42 |           data = { number ? filteredData : Database }
43 |           renderItem = { renderItem }
44 |           keyExtractor = { item => item.code_art }
45 |         />
46 |       </SafeAreaView>
47 |     </>
48 |     
49 |   )
50 | }
51 | 
52 | 
53 | export default Products
54 | 
55 | const styles = StyleSheet.create({
56 |   container:{
57 |     flex:1,
58 |     justifyContent:'center',
59 |     alignItems:'center'
60 |     },
61 |     card:{
62 |       flexDirection:"row",
63 |        backgroundColor:'oldlace',
64 |        marginHorizontal:10,
65 |        marginVertical:10, 
66 |        width:"95%",
67 |        alignContent:'space-between',
68 |        padding:20,
69 |        borderRadius:20,
70 |        
71 |     },
72 |     arte:{
73 |       marginHorizontal:2,
74 |       marginVertical:5,
75 |     },
76 |     list:{
77 |       justifyContent:'center',
78 |     },
79 |     itms:{
80 |       color: "#f30f30",
81 |     },input: {
82 |       width:350,
83 |       height: 40,
84 |       margin: 12,
85 |       borderWidth: 1,
86 |       padding: 10,
87 |       borderWidth:0,
88 |       
89 |     },
90 | })


--------------------------------------------------------------------------------
/Handle BarCodeScanner/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { StyleSheet, Text, View,Image,Pressable ,SafeAreaView,TextInput} from 'react-native';
  3 | //import Search from './src/screens/Search';
  4 | import Scanner from './src/screens/Scanner';
  5 | import { createNativeStackNavigator } from '@react-navigation/native-stack';
  6 | import { NavigationContainer } from '@react-navigation/native';
  7 | import Products from './src/screens/Products';
  8 | 
  9 | 
 10 | function HomeScreen({navigation}) {
 11 |   return (
 12 |     <View style={styles.container}>
 13 |     <View>
 14 |         <Image
 15 |             style={styles.logo}
 16 |             source={require('./assets/logo.png')}
 17 |         />
 18 |     </View>
 19 |     <View style={styles.navbar}>
 20 |         <Pressable  style={styles.Container2} onPress={() => navigation.navigate('Scan')}>
 21 |             <Image
 22 |               style={styles.icon}
 23 |               source={require('./assets/switch.png')}
 24 |             />
 25 |             <Text>BarCodeScanner</Text>
 26 |         </Pressable>
 27 |         <Pressable style={styles.Container2} onPress={() => navigation.navigate('Search')} >
 28 |             <Image
 29 |               style={styles.icon}
 30 |               source={require('./assets/search.png')}
 31 |             />
 32 |           <Text>MAJ products</Text>
 33 |         </Pressable>
 34 |         <Pressable style={styles.Container2} onPress={() => navigation.navigate('Produits')} >
 35 |             <Image
 36 |               style={styles.icon}
 37 |               source={require('./assets/open-box.png')}
 38 |             />
 39 |           <Text>Search Products</Text>
 40 |         </Pressable>
 41 |     </View>
 42 | </View>
 43 |   );
 44 | }
 45 | const  ScanScreen = () => {
 46 |   return (
 47 |     <Scanner></Scanner>
 48 |   );
 49 | }
 50 | const  ProduitScreen = (value) => {
 51 |   return (
 52 |     <Products></Products>
 53 |   );
 54 | }
 55 | const  SearchScreen= ({navigation}) => {
 56 |   const [number, onChangeNumber] = React.useState(null);
 57 |   return (
 58 |     <View style={styles.container3}>
 59 |       <Image
 60 |       style={{width:80,height:80}}
 61 |       source={require('./assets/search.png')}
 62 |       />
 63 |       <SafeAreaView>
 64 |         <TextInput
 65 |           style={styles.input}
 66 |           onChangeText={onChangeNumber}
 67 |           value={number}
 68 |           placeholder="Code scan"
 69 |           keyboardType="numeric"
 70 |         />
 71 |         <TextInput
 72 |           style={styles.input}
 73 |           onChangeText={onChangeNumber}
 74 |           value={number}
 75 |           placeholder="Code Article"
 76 |           keyboardType="numeric"
 77 |         />
 78 |         <TextInput
 79 |           style={styles.input}
 80 |           onChangeText={onChangeNumber}
 81 |           value={number}
 82 |           placeholder="Designation"
 83 |           keyboardType="numeric"
 84 |         />
 85 |         <TextInput
 86 |           style={styles.input}
 87 |           onChangeText={onChangeNumber}
 88 |           value={number}
 89 |           placeholder="Qantity"
 90 |           keyboardType="numeric"
 91 |         />
 92 |         <View style={styles.fixToText}>
 93 |               <Pressable  style={styles.container4} onPress={() => navigation.navigate('Scan')}>
 94 |                   <Text>ADD</Text>
 95 |               </Pressable>
 96 |               <Pressable style={styles.container4} onPress={() => navigation.navigate('Search')} >
 97 |                   <Text>UPDATE</Text>
 98 |               </Pressable>
 99 |         </View>
100 |       </SafeAreaView>
101 |    </View>
102 |   );
103 | }
104 | const Stack = createNativeStackNavigator();
105 | export default class App extends Component {
106 |   render() {
107 |     return (
108 |       <NavigationContainer>
109 |         <Stack.Navigator>
110 |               <Stack.Screen name="La fonda" options={{headerShown: false}} component={HomeScreen}  />
111 |               <Stack.Screen name="Scan" component={ScanScreen} />
112 |               <Stack.Screen name="Search"  component={SearchScreen}/>
113 |               <Stack.Screen name="Produits" component={ProduitScreen}/>
114 |         </Stack.Navigator>
115 |       </NavigationContainer>
116 |     
117 |     )
118 |   }
119 | }
120 | const styles = StyleSheet.create({
121 |   container:{
122 |     flex:1,
123 |     marginVertical:60,
124 |     alignItems:'center',
125 |     },
126 |   Container2:{
127 |     height:150,
128 |     width:320,
129 |     backgroundColor:'oldlace',
130 |     marginHorizontal:10,
131 |     marginVertical:10,
132 |     alignItems:'center',
133 |     justifyContent:'center',
134 |     borderRadius:10,
135 |     },
136 |     container3:{
137 |       flex:1,
138 |       alignItems:'center',
139 |       justifyContent:'center',
140 |     },
141 |   icon:{
142 |     padding:10,
143 |     width:45,
144 |     height: 45,
145 |     marginVertical:10,
146 |    },
147 |   logo:{
148 |     width:236,
149 |     height:120,
150 |     marginVertical:30
151 |   },
152 |   input: {
153 |     width:350,
154 |     height: 40,
155 |     margin: 12,
156 |     borderWidth: 1,
157 |     padding: 10,
158 |     borderRadius:10,
159 |     
160 |   },
161 | fixToText: {
162 |   flexDirection: 'row',
163 |   marginVertical:10,
164 | },
165 | container4:{
166 |   marginHorizontal:10,
167 |   width:'45%',
168 |   alignItems:'center',
169 |   backgroundColor:'oldlace',
170 |   padding:9,
171 |   
172 | }
173 | });
174 | 


--------------------------------------------------------------------------------