Skip to content

Commit 8809e4b

Browse files
bagusokbagusok
committed
Initial commit
Generated by create-expo-app 3.0.0.
0 parents  commit 8809e4b

36 files changed

+19011
-0
lines changed

‎.gitignore

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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

‎README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Welcome to your Expo app 👋
2+
3+
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
4+
5+
## Get started
6+
7+
1. Install dependencies
8+
9+
```bash
10+
npm install
11+
```
12+
13+
2. Start the app
14+
15+
```bash
16+
npx expo start
17+
```
18+
19+
In the output, you'll find options to open the app in a
20+
21+
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
22+
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
23+
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
24+
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
25+
26+
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
27+
28+
## Get a fresh project
29+
30+
When you're ready, run:
31+
32+
```bash
33+
npm run reset-project
34+
```
35+
36+
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
37+
38+
## Learn more
39+
40+
To learn more about developing your project with Expo, look at the following resources:
41+
42+
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
43+
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
44+
45+
## Join the community
46+
47+
Join our community of developers creating universal apps.
48+
49+
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
50+
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

‎app.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"expo": {
3+
"name": "anime-stream",
4+
"slug": "anime-stream",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "myapp",
9+
"userInterfaceStyle": "automatic",
10+
"splash": {
11+
"image": "./assets/images/splash.png",
12+
"resizeMode": "contain",
13+
"backgroundColor": "#ffffff"
14+
},
15+
"ios": {
16+
"supportsTablet": true
17+
},
18+
"android": {
19+
"adaptiveIcon": {
20+
"foregroundImage": "./assets/images/adaptive-icon.png",
21+
"backgroundColor": "#ffffff"
22+
}
23+
},
24+
"web": {
25+
"bundler": "metro",
26+
"output": "static",
27+
"favicon": "./assets/images/favicon.png"
28+
},
29+
"plugins": [
30+
"expo-router"
31+
],
32+
"experiments": {
33+
"typedRoutes": true
34+
}
35+
}
36+
}

‎app/(tabs)/_layout.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Tabs } from 'expo-router';
2+
import React from 'react';
3+
4+
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
5+
import { Colors } from '@/constants/Colors';
6+
import { useColorScheme } from '@/hooks/useColorScheme';
7+
8+
export default function TabLayout() {
9+
const colorScheme = useColorScheme();
10+
11+
return (
12+
<Tabs
13+
screenOptions={{
14+
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
15+
headerShown: false,
16+
}}>
17+
<Tabs.Screen
18+
name="index"
19+
options={{
20+
title: 'Home',
21+
tabBarIcon: ({ color, focused }) => (
22+
<TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
23+
),
24+
}}
25+
/>
26+
<Tabs.Screen
27+
name="explore"
28+
options={{
29+
title: 'Explore',
30+
tabBarIcon: ({ color, focused }) => (
31+
<TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
32+
),
33+
}}
34+
/>
35+
</Tabs>
36+
);
37+
}

‎app/(tabs)/explore.tsx

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import Ionicons from '@expo/vector-icons/Ionicons';
2+
import { StyleSheet, Image, Platform } from 'react-native';
3+
4+
import { Collapsible } from '@/components/Collapsible';
5+
import { ExternalLink } from '@/components/ExternalLink';
6+
import ParallaxScrollView from '@/components/ParallaxScrollView';
7+
import { ThemedText } from '@/components/ThemedText';
8+
import { ThemedView } from '@/components/ThemedView';
9+
10+
export default function TabTwoScreen() {
11+
return (
12+
<ParallaxScrollView
13+
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
14+
headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}>
15+
<ThemedView style={styles.titleContainer}>
16+
<ThemedText type="title">Explore</ThemedText>
17+
</ThemedView>
18+
<ThemedText>This app includes example code to help you get started.</ThemedText>
19+
<Collapsible title="File-based routing">
20+
<ThemedText>
21+
This app has two screens:{' '}
22+
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
23+
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
24+
</ThemedText>
25+
<ThemedText>
26+
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
27+
sets up the tab navigator.
28+
</ThemedText>
29+
<ExternalLink href="https://docs.expo.dev/router/introduction">
30+
<ThemedText type="link">Learn more</ThemedText>
31+
</ExternalLink>
32+
</Collapsible>
33+
<Collapsible title="Android, iOS, and web support">
34+
<ThemedText>
35+
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
36+
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
37+
</ThemedText>
38+
</Collapsible>
39+
<Collapsible title="Images">
40+
<ThemedText>
41+
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
42+
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
43+
different screen densities
44+
</ThemedText>
45+
<Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
46+
<ExternalLink href="https://reactnative.dev/docs/images">
47+
<ThemedText type="link">Learn more</ThemedText>
48+
</ExternalLink>
49+
</Collapsible>
50+
<Collapsible title="Custom fonts">
51+
<ThemedText>
52+
Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
53+
<ThemedText style={{ fontFamily: 'SpaceMono' }}>
54+
custom fonts such as this one.
55+
</ThemedText>
56+
</ThemedText>
57+
<ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
58+
<ThemedText type="link">Learn more</ThemedText>
59+
</ExternalLink>
60+
</Collapsible>
61+
<Collapsible title="Light and dark mode components">
62+
<ThemedText>
63+
This template has light and dark mode support. The{' '}
64+
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
65+
what the user's current color scheme is, and so you can adjust UI colors accordingly.
66+
</ThemedText>
67+
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
68+
<ThemedText type="link">Learn more</ThemedText>
69+
</ExternalLink>
70+
</Collapsible>
71+
<Collapsible title="Animations">
72+
<ThemedText>
73+
This template includes an example of an animated component. The{' '}
74+
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
75+
the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText> library
76+
to create a waving hand animation.
77+
</ThemedText>
78+
{Platform.select({
79+
ios: (
80+
<ThemedText>
81+
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
82+
component provides a parallax effect for the header image.
83+
</ThemedText>
84+
),
85+
})}
86+
</Collapsible>
87+
</ParallaxScrollView>
88+
);
89+
}
90+
91+
const styles = StyleSheet.create({
92+
headerImage: {
93+
color: '#808080',
94+
bottom: -90,
95+
left: -35,
96+
position: 'absolute',
97+
},
98+
titleContainer: {
99+
flexDirection: 'row',
100+
gap: 8,
101+
},
102+
});

‎app/(tabs)/index.tsx

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Image, StyleSheet, Platform } from 'react-native';
2+
3+
import { HelloWave } from '@/components/HelloWave';
4+
import ParallaxScrollView from '@/components/ParallaxScrollView';
5+
import { ThemedText } from '@/components/ThemedText';
6+
import { ThemedView } from '@/components/ThemedView';
7+
8+
export default function HomeScreen() {
9+
return (
10+
<ParallaxScrollView
11+
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
12+
headerImage={
13+
<Image
14+
source={require('@/assets/images/partial-react-logo.png')}
15+
style={styles.reactLogo}
16+
/>
17+
}>
18+
<ThemedView style={styles.titleContainer}>
19+
<ThemedText type="title">Welcome!</ThemedText>
20+
<HelloWave />
21+
</ThemedView>
22+
<ThemedView style={styles.stepContainer}>
23+
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
24+
<ThemedText>
25+
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
26+
Press{' '}
27+
<ThemedText type="defaultSemiBold">
28+
{Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
29+
</ThemedText>{' '}
30+
to open developer tools.
31+
</ThemedText>
32+
</ThemedView>
33+
<ThemedView style={styles.stepContainer}>
34+
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
35+
<ThemedText>
36+
Tap the Explore tab to learn more about what's included in this starter app.
37+
</ThemedText>
38+
</ThemedView>
39+
<ThemedView style={styles.stepContainer}>
40+
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
41+
<ThemedText>
42+
When you're ready, run{' '}
43+
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
44+
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
45+
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
46+
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
47+
</ThemedText>
48+
</ThemedView>
49+
</ParallaxScrollView>
50+
);
51+
}
52+
53+
const styles = StyleSheet.create({
54+
titleContainer: {
55+
flexDirection: 'row',
56+
alignItems: 'center',
57+
gap: 8,
58+
},
59+
stepContainer: {
60+
gap: 8,
61+
marginBottom: 8,
62+
},
63+
reactLogo: {
64+
height: 178,
65+
width: 290,
66+
bottom: 0,
67+
left: 0,
68+
position: 'absolute',
69+
},
70+
});

‎app/+html.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { ScrollViewStyleReset } from 'expo-router/html';
2+
import { type PropsWithChildren } from 'react';
3+
4+
/**
5+
* This file is web-only and used to configure the root HTML for every web page during static rendering.
6+
* The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
7+
*/
8+
export default function Root({ children }: PropsWithChildren) {
9+
return (
10+
<html lang="en">
11+
<head>
12+
<meta charSet="utf-8" />
13+
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
15+
16+
{/*
17+
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
18+
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
19+
*/}
20+
<ScrollViewStyleReset />
21+
22+
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
23+
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
24+
{/* Add any additional <head> elements that you want globally available on web... */}
25+
</head>
26+
<body>{children}</body>
27+
</html>
28+
);
29+
}
30+
31+
const responsiveBackground = `
32+
body {
33+
background-color: #fff;
34+
}
35+
@media (prefers-color-scheme: dark) {
36+
body {
37+
background-color: #000;
38+
}
39+
}`;

‎app/+not-found.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Link, Stack } from 'expo-router';
2+
import { StyleSheet } from 'react-native';
3+
4+
import { ThemedText } from '@/components/ThemedText';
5+
import { ThemedView } from '@/components/ThemedView';
6+
7+
export default function NotFoundScreen() {
8+
return (
9+
<>
10+
<Stack.Screen options={{ title: 'Oops!' }} />
11+
<ThemedView style={styles.container}>
12+
<ThemedText type="title">This screen doesn't exist.</ThemedText>
13+
<Link href="/" style={styles.link}>
14+
<ThemedText type="link">Go to home screen!</ThemedText>
15+
</Link>
16+
</ThemedView>
17+
</>
18+
);
19+
}
20+
21+
const styles = StyleSheet.create({
22+
container: {
23+
flex: 1,
24+
alignItems: 'center',
25+
justifyContent: 'center',
26+
padding: 20,
27+
},
28+
link: {
29+
marginTop: 15,
30+
paddingVertical: 15,
31+
},
32+
});

0 commit comments

Comments
 (0)