Skip to content

Commit 779da94

Browse files
SkitPieSkitPie
committed
Update README with setup instructions and enhance HomeScreen layout
1 parent ca1eb0f commit 779da94

File tree

3 files changed

+246
-4
lines changed

3 files changed

+246
-4
lines changed

‎README.md‎

Lines changed: 243 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,243 @@
1-
# dynamiclayer-react-native
2-
Read me
1+
## Getting Started
2+
3+
Follow these steps to set up and run the Dynamic Layer React Native project.
4+
5+
### Prerequisites
6+
7+
1. **Visual Studio Code**
8+
9+
- Download and install the latest version of [Visual Studio Code](https://code.visualstudio.com/)
10+
- Recommended extensions:
11+
- React Native Tools
12+
- ESLint
13+
- Prettier
14+
15+
2. **Node.js**
16+
17+
- Install the latest LTS version of [Node.js](https://nodejs.org/)
18+
- Verify installation by running:
19+
```bash
20+
node --version
21+
npm --version
22+
```
23+
24+
3. **Git**
25+
26+
- Install [Git](https://git-scm.com/) for version control
27+
- Verify installation:
28+
```bash
29+
git --version
30+
```
31+
32+
### Installation
33+
34+
1. **Clone the Repository**
35+
36+
```bash
37+
git clone https://github.com/dynamiclayer/dynamic-layer-react-native.git
38+
cd dynamic-layer-react-native
39+
```
40+
41+
2. **Install Dependencies**
42+
Using npm:
43+
44+
```bash
45+
npm install
46+
```
47+
48+
Or using yarn:
49+
50+
```bash
51+
yarn install
52+
```
53+
54+
### Running the Project
55+
56+
1. **Start the Development Server**
57+
Using npm:
58+
59+
```bash
60+
npm start
61+
```
62+
63+
Or using yarn:
64+
65+
```bash
66+
yarn start
67+
```
68+
69+
2. **Running on Different Platforms**
70+
71+
- Press `a` to run on Android emulator/device
72+
- Press `i` to run on iOS simulator (macOS only)
73+
- Press `w` to run in web browser
74+
75+
### Additional Information
76+
77+
- The development server will start at `http://localhost:19002`
78+
- Use the Expo Go app on your mobile device to test the app by scanning the QR code
79+
- Make sure your development machine and mobile device are on the same network
80+
81+
### Troubleshooting
82+
83+
If you encounter any issues:
84+
85+
1. Clear the Metro bundler cache:
86+
87+
```bash
88+
npm start --reset-cache
89+
```
90+
91+
2. Make sure all dependencies are properly installed:
92+
93+
```bash
94+
rm -rf node_modules
95+
npm install
96+
```
97+
98+
3. Verify that your development environment is properly set up according to the prerequisites
99+
100+
## Usage Guide
101+
102+
### Project Structure
103+
104+
The project follows a modular architecture with the following structure:
105+
106+
```
107+
src/
108+
├── animations/ # Custom animation components
109+
├── components/ # Reusable UI components
110+
├── config/ # Configuration files
111+
├── navigation/ # Navigation setup
112+
├── screens/ # Application screens
113+
└── style.js # Global styles
114+
```
115+
116+
### Components
117+
118+
Located in `src/components/`, the app includes several reusable components:
119+
120+
#### Common Components
121+
122+
- `CustomButton.js`
123+
- `CustomButtonDock.js`
124+
- `CustomButtonIcon.js`
125+
- `CustomCard.js`
126+
- `CustomInput.js`
127+
- `NotificationBadge.js`
128+
129+
#### Navigation Components
130+
131+
- `CustomTabNavigator.js` - Custom bottom tab navigation
132+
- `CustomTopNavigation.js` - Custom top navigation bar
133+
134+
### Navigation
135+
136+
The app's navigation is managed through `src/navigation/AppNavigator.js`, which sets up the routing structure. It utilizes React Navigation for seamless screen transitions.
137+
138+
### Screens
139+
140+
The application screens are organized in `src/screens/` with two main directories:
141+
142+
- `Main/` - Primary application screens
143+
- `PreviewScreens/` - Preview and demonstration screens
144+
145+
### Assets
146+
147+
The `assets/` directory contains:
148+
149+
- Icons (organized by category in `icons/`)
150+
- Images and placeholder content
151+
- SVG components in `icons/svg_js/`
152+
153+
### Customization
154+
155+
You can customize the app's appearance and behavior through:
156+
157+
- Global styles in `src/style.js`
158+
159+
### Example Usage
160+
161+
## Adding New Screens
162+
163+
### Option 1: Adding a Tab Screen
164+
165+
To add a new screen as a tab in the bottom navigation:
166+
167+
1. Create your screen component in `src/screens/Main/`:
168+
169+
```javascript
170+
// src/screens/Main/NewScreen.js
171+
import React from "react";
172+
import { View, Text } from "react-native";
173+
import { CustomButton } from "../../components/common/CustomButton";
174+
175+
export const NewScreen = () => {
176+
return (
177+
<View>
178+
<Text>New Screen</Text>
179+
<CustomButton text="Click Me" onPress={() => {}} />
180+
</View>
181+
);
182+
};
183+
```
184+
185+
2. Add the screen to the tab configuration in `src/navigation/AppNavigator.js`:
186+
187+
```javascript
188+
import HomeScreen from "../screens/Main/HomeScreen";
189+
import ProfileScreen from "../screens/Main/ProfileScreen";
190+
import ButtonScreen from "../screens/PreviewScreens/buttonScreen";
191+
192+
const tabScreens = [
193+
{ name: "Home", component: HomeScreen, icon: HomeIcon, notifications: 0 },
194+
{ name: "Templates", component: ProfileScreen, icon: TemplatesIcon, notifications: 5 },
195+
{ name: "NewTab", component: NewScreen, icon: YourIcon, notifications: 0 },
196+
];
197+
198+
function MainTabScreen() {
199+
return <CustomTabNavigator type="md" screens={tabScreens} />;
200+
}
201+
```
202+
203+
### Option 2: Adding a Default Screen
204+
205+
1. Create your screen component in `src/screens/Main/` or `src/screens/PreviewScreens/`:
206+
207+
```javascript
208+
import React from "react";
209+
import { View, Text } from "react-native";
210+
import { CustomButton } from "../../components/common/CustomButton";
211+
212+
export const NewScreen = () => {
213+
return (
214+
<View>
215+
<Text>New Screen</Text>
216+
<CustomButton text="Click Me" onPress={() => {}} />
217+
</View>
218+
);
219+
};
220+
```
221+
222+
2. Add the screen to the MainStack navigator in `src/navigation/AppNavigator.js`:
223+
224+
```javascript
225+
<MainStack.Navigator screenOptions={defaultScreenOptions}>
226+
<MainStack.Screen name="MainTabs" component={MainTabScreen} options={{ headerShown: false }} />
227+
<MainStack.Screen name="NewScreen" component={NewScreen} options={{ title: "New Screen" }} />
228+
</MainStack.Navigator>
229+
```
230+
231+
3. Using Navigation:
232+
233+
```javascript
234+
import { useNavigation } from "@react-navigation/native";
235+
236+
const MyComponent = () => {
237+
const navigation = useNavigation();
238+
return (
239+
<CustomButton title="Go to Screen" onPress={() => navigation.navigate("ScreenName")} />
240+
);
241+
};
242+
```
243+

‎src/components/navigation/CustomTabNavigator.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,10 @@ function CustomTabNavigator({ type = 'md', screens, functional = true }) {
5959
tabBarShowLabel: false,
6060
tabBarStyle: {
6161
height: Platform.select({
62-
ios: paddings.p_8 * 3 + 24 + 16,
62+
ios: ((paddings.p_8 * 3) + 24 + 16) * 1.5,
6363
android: paddings.p_8 * 3 + 24 + 16,
6464
}),
65+
backgroundColor: colors.black,
6566
elevation: 0,
6667
shadowOpacity: 0,
6768
borderTopWidth: 1,

‎src/screens/Main/HomeScreen.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function HomeScreen() {
1414
};
1515

1616
return (
17-
<SafeAreaView style={styles.container}>
17+
<SafeAreaView edges={["top"]} style={styles.container}>
1818
<ScrollView contentContainerStyle={styles.scrollContainer}>
1919
<View style={styles.header}>
2020
<Text style={styles.headerText}>Home</Text>

0 commit comments

Comments
 (0)