admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added camera screen + dependencies.

Browse Source
This commit is contained in:
Patrick Fic
2020-08-13 13:07:11 -07:00
parent 4d50906b48
commit 3ea3cd9fce
6 changed files with 116 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/job-list-item/job-list-item.component.jsx
View File

@@ -6,14 +6,19 @@ import Swipeable from "react-native-gesture-handler/Swipeable";
import { useTranslation } from "react-i18next";
import { Ionicons } from "@expo/vector-icons";
import styles from "../styles";
import { TouchableOpacity } from "react-native-gesture-handler";
const RenderRightAction = (props) => {
const navigation = useNavigation();
const { t } = useTranslation();
return (
<View style={[styles.swipe_view, styles.swipe_view_blue]}>
<TouchableOpacity
style={[styles.swipe_view, styles.swipe_view_blue]}
onPress={() => navigation.push("JobCamera")}
>
<Ionicons name="ios-camera" size={24} color="white" />
<Text style={styles.swipe_text}>{t("joblist.actions.swipecamera")}</Text>
</View>
</TouchableOpacity>
);
};
@@ -50,6 +55,10 @@ export default function JobListItem({ item }) {
item.v_model_desc || ""
}`}</Text>
</View>
<View style={[{ width: 150 }, localStyles.card_content_margin]}>
<Text numberOfLines={1}>{item.ins_co_nm || ""}</Text>
<Text>{item.clm_total || ""}</Text>
</View>
</CardItem>
</Card>
</Swipeable>
@@ -61,4 +70,7 @@ const localStyles = StyleSheet.create({
alignItems: "center",
},
item_header_margin: { marginLeft: 10 },
card_content_margin: {
marginLeft: 15,
},
});

87
components/screen-camera/screen-camera.component.jsx Normal file
View File

@@ -0,0 +1,87 @@
import React, { useState, useEffect } from "react";
import { Text, View, TouchableOpacity } from "react-native";
import { Camera } from "expo-camera";
export default function ScreenCamera() {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === "granted");
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type}>
<View
style={{
flex: 1,
backgroundColor: "transparent",
flexDirection: "row",
}}
>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: "flex-end",
alignItems: "center",
}}
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}
>
<Text style={{ fontSize: 18, marginBottom: 10, color: "white" }}>
Flip
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ alignSelf: "center" }}
onPress={async () => {
if (cameraRef) {
let photo = await cameraRef.takePictureAsync();
console.log("photo", photo);
}
}}
>
<View
style={{
borderWidth: 2,
borderRadius: "50%",
borderColor: "white",
height: 50,
width: 50,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<View
style={{
borderWidth: 2,
borderRadius: "50%",
borderColor: "white",
height: 40,
width: 40,
backgroundColor: "white",
}}
></View>
</View>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}

2
components/screen-main/screen-main.component.jsx
View File

@@ -29,6 +29,7 @@ import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.
import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
import ScreenSplash from "../screen-splash/screen-splash.component";
import ScreenCamera from "../screen-camera/screen-camera.component";
import { Ionicons } from "@expo/vector-icons";
const JobStack = createStackNavigator();
@@ -78,6 +79,7 @@ const JobStackNavigator = ({ navigation }) => (
i18n.t("joblist.labels.detail"),
})}
/>
<JobStack.Screen name="JobCamera" component={ScreenCamera} />
</JobStack.Navigator>
);

1
components/styles.js
View File

@@ -14,6 +14,7 @@ export default StyleSheet.create({
},
swipe_view: {
flex: 1,
alignItems: "center",
justifyContent: "center",
width: 100,

1
package.json
View File

@@ -16,6 +16,7 @@
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"expo": "~38.0.8",
"expo-camera": "~8.3.1",
"expo-font": "~8.2.1",
"expo-localization": "~8.2.1",
"expo-status-bar": "^1.0.2",

12
yarn.lock
View File

@@ -2906,6 +2906,16 @@ expo-asset@~8.1.7:
path-browserify "^1.0.0"
url-parse "^1.4.4"
expo-camera@~8.3.1:
version "8.3.1"
resolved "https://registry.yarnpkg.com/expo-camera/-/expo-camera-8.3.1.tgz#e17c080c4aafd71f66495c2b6dfc53dcd31b0368"
integrity sha512-weFanDVsJKAbm5g90zWIUD4zVrXKoQq7g2BTg4zy4p24YsGfXKYRH4ja0YRgr3Ci/abGaaRNZjsPMJiNskR+tA==
dependencies:
fbjs "1.0.0"
invariant "2.2.4"
lodash "^4.6.0"
prop-types "^15.6.0"
expo-constants@~9.1.1:
version "9.1.1"
resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-9.1.1.tgz#bca141ee3d4550e308798128f66c6d9c6a206ca1"
@@ -3626,7 +3636,7 @@ inquirer@^3.0.6:
strip-ansi "^4.0.0"
through "^2.3.6"
invariant@^2.2.2, invariant@^2.2.4:
invariant@2.2.4, invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==