-
Notifications
You must be signed in to change notification settings - Fork 915
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improvements to Maestro example (#513)
- Remove unused app screen - Add separate Maestro flows for Expo Go and development builds (different app IDs) - Add instructions for local testing to `README.md` - Add missing app scheme to `app.json` - Remove assets and minimize number of files for better maintainability
- Loading branch information
1 parent
b862596
commit 1b0d96c
Showing
43 changed files
with
121 additions
and
998 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| { | ||
| "expo": { | ||
| "scheme": "dev.expo.eastestsexample", | ||
| "plugins": [ | ||
| "expo-router" | ||
| ], | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,102 +1,31 @@ | ||
| import Ionicons from '@expo/vector-icons/Ionicons'; | ||
| import { StyleSheet, Image, Platform } from 'react-native'; | ||
| import { StyleSheet, Text, SafeAreaView } from 'react-native'; | ||
|
|
||
| import { Collapsible } from '@/components/Collapsible'; | ||
| import { ExternalLink } from '@/components/ExternalLink'; | ||
| import ParallaxScrollView from '@/components/ParallaxScrollView'; | ||
| import { ThemedText } from '@/components/ThemedText'; | ||
| import { ThemedView } from '@/components/ThemedView'; | ||
|
|
||
| export default function TabTwoScreen() { | ||
| return ( | ||
| <ParallaxScrollView | ||
| headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }} | ||
| headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}> | ||
| <ThemedView style={styles.titleContainer}> | ||
| <ThemedText type="title">Explore</ThemedText> | ||
| </ThemedView> | ||
| <ThemedText>This app includes example code to help you get started.</ThemedText> | ||
| <SafeAreaView style={styles.container}> | ||
| <Text style={styles.title}>Explore</Text> | ||
| <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> | ||
| <Text>This app has two screens</Text> | ||
| </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/react-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> | ||
| </SafeAreaView> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| headerImage: { | ||
| color: '#808080', | ||
| bottom: -90, | ||
| left: -35, | ||
| position: 'absolute', | ||
| }, | ||
| titleContainer: { | ||
| flexDirection: 'row', | ||
| container: { | ||
| flex: 1, | ||
| gap: 8, | ||
| width: '80%', | ||
| height: '80%', | ||
| marginTop: '20%', | ||
| marginLeft: '10%', | ||
| }, | ||
| title: { | ||
| alignItems: 'center', | ||
| fontSize: 18, | ||
| fontWeight: 'bold', | ||
| marginBottom: 20, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,26 @@ | ||
| import { Image, StyleSheet, Platform } from 'react-native'; | ||
|
|
||
| import { HelloWave } from '@/components/HelloWave'; | ||
| import ParallaxScrollView from '@/components/ParallaxScrollView'; | ||
| import { ThemedText } from '@/components/ThemedText'; | ||
| import { ThemedView } from '@/components/ThemedView'; | ||
| import { StyleSheet, Text, SafeAreaView } from 'react-native'; | ||
|
|
||
| export default function HomeScreen() { | ||
| return ( | ||
| <ParallaxScrollView | ||
| headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }} | ||
| headerImage={ | ||
| <Image | ||
| source={require('@/assets/images/partial-react-logo.png')} | ||
| style={styles.reactLogo} | ||
| /> | ||
| }> | ||
| <ThemedView style={styles.titleContainer}> | ||
| <ThemedText type="title">Welcome!</ThemedText> | ||
| <HelloWave /> | ||
| </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' })} | ||
| </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> | ||
| <SafeAreaView style={styles.container}> | ||
| <Text style={styles.title}>Welcome!</Text> | ||
| </SafeAreaView> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| titleContainer: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| container: { | ||
| flex: 1, | ||
| gap: 8, | ||
| width: '80%', | ||
| height: '80%', | ||
| marginTop: '20%', | ||
| marginLeft: '10%', | ||
| }, | ||
| stepContainer: { | ||
| gap: 8, | ||
| marginBottom: 8, | ||
| }, | ||
| reactLogo: { | ||
| height: 178, | ||
| width: 290, | ||
| bottom: 0, | ||
| left: 0, | ||
| position: 'absolute', | ||
| title: { | ||
| alignItems: 'center', | ||
| fontSize: 18, | ||
| fontWeight: 'bold', | ||
| marginBottom: 20, | ||
| }, | ||
| }); |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.