- 1. Root dictionary:
- **constants**:
- - This directory is typically used for storing constant values that are used throughout the application, such as configuration settings, API keys (though sensitive keys should be kept secure), or commonly used data.
- **hooks**:
- - Here, custom React hooks are defined. Hooks are functions that let you “hook into” React state and lifecycle features from function components.
- **scripts**:
- - This folder may contain scripts for automation tasks like building, deploying, or local development enhancements.
2. _layout.tsx is the bottom navigator.
core component
import React, { useState } from "react";
import {
Text,
View,
StyleSheet,
TextInput,
Button,
Image,
Switch,
StatusBar,
ActivityIndicator,
Modal,
Alert,
TouchableHighlight,
Pressable
} from "react-native";
export default function HomeScreen() {
const [text, setText] = useState("");
const [isEnabled, setIsEnabled] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
const handleSubmit = () => {
alert("You entered: " + text);
};
const toggleSwitch = () => {
setIsEnabled((prev) => !prev);
};
return (
<View style={styles.text1}>
{/* the use of Text */}
<Text
style={styles.text2}
numberOfLines={2}
onPress={() => {
alert("hello world");
}}
>
{" "}
Tap on me!
</Text>
{/* the use of TextInput */}
<TextInput
style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
onChangeText={(text) => setText(text)}
value={text}
placeholder="enter the value"
/>
<Button onPress={handleSubmit} color="#841584" title="submit" />
{/* image */}
{/* <Image source={{ uri: 'https://path/to/remote/image.png' }} style={{ width: 200, height: 200 }} /> */}
{/*
<ImageBackground
source={{ uri: 'https://some-image-url.com/background.jpg' }}
style={styles.background}
resizeMode="cover"
>
</ImageBackground> */}
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
onValueChange={toggleSwitch}
value={isEnabled}
/>
{/* <StatusBar style="auto" /> */}
<Text>Loading, please wait...</Text>
{/* the use of loading */}
<ActivityIndicator size="large" color="#0000ff" />
{/* the use of Modal */}
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text>Hello, I am a Modal!</Text>
<TouchableHighlight
style={styles.hideModalButton}
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
onPress={() => {
setModalVisible(true);
}}
>
<Text>Show Modal</Text>
</TouchableHighlight>
{/* Pressable */}
<Pressable
onPress={() => console.log('Pressed!')}
style={({ pressed }) => [
styles.button,
pressed ? styles.pressedButton : styles.normalButton,
]}
>
<Text style={styles.buttonText}>Press me</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
text1: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
text2: {
fontSize: 16,
color: "blue",
textAlign: "center",
margin: 10,
fontFamily: "Arial",
},
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)' // Adds a semi-transparent background
},
modalView: {
margin: 20,
backgroundColor: 'white',
borderRadius: 20,
padding: 35,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
},
hideModalButton: {
marginTop: 15,
backgroundColor: "#2196F3",
padding: 10
},
button: {
padding: 10,
borderRadius: 5,
},
normalButton: {
backgroundColor: 'blue',
},
pressedButton: {
backgroundColor: 'darkblue',
},
buttonText: {
color: 'white',
textAlign: 'center',
},
});