Ajout traque-app

traque-app/components/button.js

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import { TouchableHighlight, View, Text, StyleSheet } from "react-native";
+
+export default CustomButton = forwardRef(function CustomButton({ label, onPress }, ref) {
+    return (
+        <View style={styles.buttonContainer}>
+            <TouchableHighlight style={styles.button} onPress={onPress} ref={ref}>
+                <Text style={styles.buttonLabel}>{label}</Text>
+            </TouchableHighlight>
+        </View>
+    );
+});
+
+const styles = StyleSheet.create({
+    buttonContainer: {
+        width: "100%",
+        maxWidth: 240,
+        height: 80,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 3,
+        borderWidth: 4,
+        borderColor: '#888',
+        borderRadius: 18 
+    },
+    button: {
+        borderRadius: 10,
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#555' 
+    },
+    buttonLabel: {
+        color: '#fff',
+        fontSize: 16,
+    },
+});

traque-app/components/image.js

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { StyleSheet, View, Image, TouchableOpacity } from "react-native";
+import ImageViewing from 'react-native-image-viewing';
+
+export default function CustomImage({ source, canZoom, onPress }) {
+    // canZoom : boolean
+    const [isModalVisible, setIsModalVisible] = useState(false);
+
+    return (
+        <View style={styles.container}>
+            <TouchableOpacity onPress={canZoom ? () => setIsModalVisible(true) : onPress}>
+                <Image style={styles.image} resizeMode="contain" source={source}/>
+            </TouchableOpacity>
+            <ImageViewing
+                images={[source]}
+                visible={isModalVisible}
+                onRequestClose={() => setIsModalVisible(false)}
+                swipeToCloseEnabled={false}
+                doubleTapToZoomEnabled={false}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center"
+    },
+    image: {
+        width: "100%",
+        height: undefined,
+        aspectRatio: 1.5
+    }
+});

traque-app/components/input.js

@@ -0,0 +1,26 @@
+import { TextInput, StyleSheet } from 'react-native';
+
+export default function CustomTextInput({ style, value, inputMode, placeholder, onChangeText }) {
+    return (
+        <TextInput
+            value={value}
+            inputMode={inputMode}
+            style={[styles.input, style]}
+            placeholder={placeholder}
+            multiline={false}
+            onChangeText={onChangeText}
+        />
+    );
+};
+
+const styles = StyleSheet.create({
+    input: {
+        width: "100%",
+        padding: 15,
+        borderColor: '#777',
+        borderRadius: 12,
+        borderWidth: 2,
+        backgroundColor: '#fff',
+        fontSize: 20,
+    },
+});

traque-app/components/stat.js

@@ -0,0 +1,12 @@
+import { TouchableOpacity, View, Image, Text, Alert } from 'react-native';
+
+export default function Stat({ children, source, description }) {
+    return (
+        <TouchableOpacity onPress={description ? () => Alert.alert("Info", description) : null}>
+            <View style={{height: 30, flexDirection: "row", justifyContent: 'center', alignItems: 'center'}}>
+                {source && <Image source={source} style={{width: 30, height: 30, marginRight: 5}} resizeMode="contain"/>}
+                <Text style={{fontSize: 15}}>{children}</Text>
+            </View>
+        </TouchableOpacity>
+    );
+};