Getting ready for collab
This commit is contained in:
parent
90ec951b0c
commit
c5916a195a
@ -37,14 +37,16 @@ const TabLayout = () => {
|
||||
name='index'
|
||||
options={{
|
||||
title: 'Home',
|
||||
tabBarIcon: ({ color }) => <IconSymbol size={28} name='house.fill' color={color} />,
|
||||
tabBarIcon: ({ color }) =>
|
||||
<IconSymbol size={28} name='house.fill' color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name='settings'
|
||||
options={{
|
||||
title: 'Settings',
|
||||
tabBarIcon: ({ color }) => <IconSymbol size={28} name='gearshape.fill' color={color} />,
|
||||
tabBarIcon: ({ color }) =>
|
||||
<IconSymbol size={28} name='gearshape.fill' color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
import { Image, StyleSheet, Platform } from 'react-native';
|
||||
import ParallaxScrollView from '@/components/default/ParallaxScrollView';
|
||||
import { ThemedText, ThemedView } from '@/components/theme/Theme';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
|
||||
const HomeScreen = () => {
|
||||
const scheme = useColorScheme() ?? 'dark';
|
||||
return (
|
||||
<ParallaxScrollView
|
||||
headerImage={
|
||||
@ -19,38 +16,7 @@ const HomeScreen = () => {
|
||||
}
|
||||
>
|
||||
<ThemedView style={styles.titleContainer}>
|
||||
<ThemedText type='title'>Welcome!</ThemedText>
|
||||
</ThemedView>
|
||||
<ThemedView style={styles.stepContainer}>
|
||||
<ThemedText type='subtitle'>Step 1: Try it</ThemedText>
|
||||
<ThemedText>
|
||||
Edit <ThemedText type='defaultSemiBold'>app/(tabs)/index.tsx</ThemedText> to see changes.
|
||||
Press{' '}
|
||||
<ThemedText type='defaultSemiBold'>
|
||||
{Platform.select({
|
||||
ios: 'cmd + d',
|
||||
android: 'cmd + m',
|
||||
web: 'F12',
|
||||
})}
|
||||
</ThemedText>{' '}
|
||||
to open developer tools.
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
<ThemedView style={styles.stepContainer}>
|
||||
<ThemedText type='subtitle'>Step 2: Explore</ThemedText>
|
||||
<ThemedText>
|
||||
Tap the Explore tab to learn more about what's included in this starter app.
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
<ThemedView style={styles.stepContainer}>
|
||||
<ThemedText type='subtitle'>Step 3: Get a fresh start</ThemedText>
|
||||
<ThemedText>
|
||||
When you're ready, run{' '}
|
||||
<ThemedText type='defaultSemiBold'>npm run reset-project</ThemedText> to get a fresh{' '}
|
||||
<ThemedText type='defaultSemiBold'>app</ThemedText> directory. This will move the current{' '}
|
||||
<ThemedText type='defaultSemiBold'>app</ThemedText> to{' '}
|
||||
<ThemedText type='defaultSemiBold'>app-example</ThemedText>.
|
||||
</ThemedText>
|
||||
|
||||
</ThemedView>
|
||||
</ParallaxScrollView>
|
||||
);
|
||||
@ -68,16 +34,16 @@ const styles = StyleSheet.create({
|
||||
marginBottom: 8,
|
||||
},
|
||||
reactLogo: {
|
||||
height: 80,
|
||||
width: 82,
|
||||
height: 70,
|
||||
width: 72,
|
||||
bottom: 10,
|
||||
left: 10,
|
||||
left: 40,
|
||||
position: 'absolute',
|
||||
},
|
||||
headerTitle: {
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
left: 40,
|
||||
left: 75,
|
||||
right: 0,
|
||||
textAlign: 'center',
|
||||
fontSize: 48,
|
||||
|
||||
@ -8,84 +8,15 @@ import { IconSymbol } from '@/components/ui/IconSymbol';
|
||||
const TabTwoScreen = () => {
|
||||
return (
|
||||
<ParallaxScrollView
|
||||
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
|
||||
headerHeight={150}
|
||||
headerImage={
|
||||
<IconSymbol size={200} color='#808080' name='gear.circle' style={styles.headerImage} />
|
||||
<IconSymbol size={80} color='#808080' name='gear.circle' style={styles.headerImage} />
|
||||
}
|
||||
headerTitle={
|
||||
<ThemedText type='title' style={styles.headerTitle}>
|
||||
Settings
|
||||
</ThemedText>
|
||||
}
|
||||
>
|
||||
<ThemedView style={styles.titleContainer}>
|
||||
<ThemedText type='title'>Settings</ThemedText>
|
||||
</ThemedView>
|
||||
<ThemedText>This app includes example code to help you get started.</ThemedText>
|
||||
<Collapsible title='File-based routing'>
|
||||
<ThemedText>
|
||||
This app has two screens:{' '}
|
||||
<ThemedText type='defaultSemiBold'>app/(tabs)/index.tsx</ThemedText> and{' '}
|
||||
<ThemedText type='defaultSemiBold'>app/(tabs)/explore.tsx</ThemedText>
|
||||
</ThemedText>
|
||||
<ThemedText>
|
||||
The layout file in <ThemedText type='defaultSemiBold'>app/(tabs)/_layout.tsx</ThemedText>{' '}
|
||||
sets up the tab navigator.
|
||||
</ThemedText>
|
||||
<ExternalLink href='https://docs.expo.dev/router/introduction'>
|
||||
<ThemedText type='link'>Learn more</ThemedText>
|
||||
</ExternalLink>
|
||||
</Collapsible>
|
||||
<Collapsible title='Android, iOS, and web support'>
|
||||
<ThemedText>
|
||||
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
|
||||
<ThemedText type='defaultSemiBold'>w</ThemedText> in the terminal running this project.
|
||||
</ThemedText>
|
||||
</Collapsible>
|
||||
<Collapsible title='Images'>
|
||||
<ThemedText>
|
||||
For static images, you can use the <ThemedText type='defaultSemiBold'>@2x</ThemedText> and{' '}
|
||||
<ThemedText type='defaultSemiBold'>@3x</ThemedText> suffixes to provide files for
|
||||
different screen densities
|
||||
</ThemedText>
|
||||
<Image source={require('@/assets/images/tech_tracker_logo.png')} style={{ alignSelf: 'center' }} />
|
||||
<ExternalLink href='https://reactnative.dev/docs/images'>
|
||||
<ThemedText type='link'>Learn more</ThemedText>
|
||||
</ExternalLink>
|
||||
</Collapsible>
|
||||
<Collapsible title='Custom fonts'>
|
||||
<ThemedText>
|
||||
Open <ThemedText type='defaultSemiBold'>app/_layout.tsx</ThemedText> to see how to load{' '}
|
||||
<ThemedText style={{ fontFamily: 'SpaceMono' }}>
|
||||
custom fonts such as this one.
|
||||
</ThemedText>
|
||||
</ThemedText>
|
||||
<ExternalLink href='https://docs.expo.dev/versions/latest/sdk/font'>
|
||||
<ThemedText type='link'>Learn more</ThemedText>
|
||||
</ExternalLink>
|
||||
</Collapsible>
|
||||
<Collapsible title='Light and dark mode components'>
|
||||
<ThemedText>
|
||||
This template has light and dark mode support. The{' '}
|
||||
<ThemedText type='defaultSemiBold'>useColorScheme()</ThemedText> hook lets you inspect
|
||||
what the user's current color scheme is, and so you can adjust UI colors accordingly.
|
||||
</ThemedText>
|
||||
<ExternalLink href='https://docs.expo.dev/develop/user-interface/color-themes/'>
|
||||
<ThemedText type='link'>Learn more</ThemedText>
|
||||
</ExternalLink>
|
||||
</Collapsible>
|
||||
<Collapsible title='Animations'>
|
||||
<ThemedText>
|
||||
This template includes an example of an animated component. The{' '}
|
||||
<ThemedText type='defaultSemiBold'>components/HelloWave.tsx</ThemedText> component uses
|
||||
the powerful <ThemedText type='defaultSemiBold'>react-native-reanimated</ThemedText>{' '}
|
||||
library to create a waving hand animation.
|
||||
</ThemedText>
|
||||
{Platform.select({
|
||||
ios: (
|
||||
<ThemedText>
|
||||
The <ThemedText type='defaultSemiBold'>components/ParallaxScrollView.tsx</ThemedText>{' '}
|
||||
component provides a parallax effect for the header image.
|
||||
</ThemedText>
|
||||
),
|
||||
})}
|
||||
</Collapsible>
|
||||
</ParallaxScrollView>
|
||||
);
|
||||
};
|
||||
@ -94,10 +25,20 @@ export default TabTwoScreen;
|
||||
const styles = StyleSheet.create({
|
||||
headerImage: {
|
||||
color: '#808080',
|
||||
bottom: -90,
|
||||
left: -35,
|
||||
bottom: 6,
|
||||
left: 38,
|
||||
position: 'absolute',
|
||||
},
|
||||
headerTitle: {
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
left: 16,
|
||||
right: 0,
|
||||
textAlign: 'center',
|
||||
fontSize: 48,
|
||||
lineHeight: 64,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
titleContainer: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
|
||||
@ -77,9 +77,6 @@ const ParallaxScrollView = ({
|
||||
export default ParallaxScrollView;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
blank: {
|
||||
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* This script is used to reset the project to a blank state.
|
||||
* It moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
|
||||
* You can remove the `reset-project` script from package.json and safely delete this file after running it.
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const root = process.cwd();
|
||||
const oldDirs = ['app', 'components', 'hooks', 'constants', 'scripts'];
|
||||
const newDir = 'app-example';
|
||||
const newAppDir = 'app';
|
||||
const newDirPath = path.join(root, newDir);
|
||||
|
||||
const indexContent = `import { Text, View } from "react-native";
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text>Edit app/index.tsx to edit this screen.</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
`;
|
||||
|
||||
const layoutContent = `import { Stack } from "expo-router";
|
||||
|
||||
export default function RootLayout() {
|
||||
return <Stack />;
|
||||
}
|
||||
`;
|
||||
|
||||
const moveDirectories = async () => {
|
||||
try {
|
||||
// Create the app-example directory
|
||||
await fs.promises.mkdir(newDirPath, { recursive: true });
|
||||
console.log(`📁 /${newDir} directory created.`);
|
||||
|
||||
// Move old directories to new app-example directory
|
||||
for (const dir of oldDirs) {
|
||||
const oldDirPath = path.join(root, dir);
|
||||
const newDirPath = path.join(root, newDir, dir);
|
||||
if (fs.existsSync(oldDirPath)) {
|
||||
await fs.promises.rename(oldDirPath, newDirPath);
|
||||
console.log(`➡️ /${dir} moved to /${newDir}/${dir}.`);
|
||||
} else {
|
||||
console.log(`➡️ /${dir} does not exist, skipping.`);
|
||||
}
|
||||
}
|
||||
|
||||
// Create new /app directory
|
||||
const newAppDirPath = path.join(root, newAppDir);
|
||||
await fs.promises.mkdir(newAppDirPath, { recursive: true });
|
||||
console.log('\n📁 New /app directory created.');
|
||||
|
||||
// Create index.tsx
|
||||
const indexPath = path.join(newAppDirPath, 'index.tsx');
|
||||
await fs.promises.writeFile(indexPath, indexContent);
|
||||
console.log('📄 app/index.tsx created.');
|
||||
|
||||
// Create _layout.tsx
|
||||
const layoutPath = path.join(newAppDirPath, '_layout.tsx');
|
||||
await fs.promises.writeFile(layoutPath, layoutContent);
|
||||
console.log('📄 app/_layout.tsx created.');
|
||||
|
||||
console.log('\n✅ Project reset complete. Next steps:');
|
||||
console.log(
|
||||
"1. Run `npx expo start` to start a development server.\n2. Edit app/index.tsx to edit the main screen.\n3. Delete the /app-example directory when you're done referencing it.",
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(`Error during script execution: ${error}`);
|
||||
}
|
||||
};
|
||||
|
||||
moveDirectories();
|
||||
Loading…
x
Reference in New Issue
Block a user