Issue
Got to this step in the Expo Go tutorial where you start to make changes to Button.js:
https://docs.expo.dev/tutorial/build-a-screen/#enhance-the-reusable-button-component
Despite making changes in the Button.js file and the Expo CLI saying "Android Bundling complete", the changes are not reflected in the StickerSmash app running in Expo Go on the Android phone.
Environment:
Laptop
- Node v21.2.0
- Windows 11 Pro (WSL2 Ubuntu)
Phone
- Expo Go (Android) 2.29.8
If I stop the app on the Expo Go CLI on my laptop and start it again, the updates are reflected. However, that's painfully long. Can't figure out why hot/dynamic reloading is not working. Any suggestions of what to try?
Thanks.
Solution
FINAL ANSWER:
You have to install Watchman in WSL2 Ubuntu for Expo
Instructions For Expo Installation;
To use Expo, you need to have the following tools installed on your machine:
Node.js LTS release - Only Node.js LTS releases (even-numbered) are recommended. As Node.js officially states, "Production applications should only use Active LTS or Maintenance LTS releases". You can install Node.js using a version management tool (such as nvm or volta or any other of your choice) to switch between different Node.js versions.
Git for source control.
Watchman (for Linux or macOS users).
And when you successfully installed Watchman with instructions and check from terminal with "watchman --version";
You should move ( if it is not ) your Project Folder to root folder from mounted drive.
Example: If you see /mnt/c/windows as directory (/mnt/) it means you are in mounted drive. You should move it or create new expo app to the root folder using;
cd ~
npx create-expo-app
cd ~ command will move you to the root folder.
TEST STEPS RESULTS; (Tested on WSL2 Ubuntu)
- Without Watchman. Result: Same as yours.
- With Watchman and Project in root folder. Result: Fine.
-- PREVIOUS ANSWER BEFORE UPDATE --
It should reflect changes to the EXPO GO app when you saved the file after making changes. So, if it does not, you do not have to stop and start again. You can simply press 'R' to reload app. Reload is not the same with restart duration.
**
Shake your phone to open Dev Menu and Enable Fast Refresh Mode.
**
Steps completed before answering;
- npx create-expo-app StickerSmash
- npx expo start
- Made changes following docs on docs.expo.dev
--
- Windows 11 Pro (22H2)
- Node v21.2.0
- Expo Go Android v2.29.8
--
Final Codes;
App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import ImageViewer from './components/ImageViewer';
import Button from './components/Button';
const PlaceholderImage = require('./assets/images/background-image.png');
export default function App() {
return (
<View style={styles.container}>
<View style={styles.imageContainer}>
<ImageViewer placeholderImageSource={PlaceholderImage} />
</View>
<View style={styles.footerContainer}>
<Button label="Choose a photo" />
<Button label="Use this photo" />
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#25292e',
alignItems: 'center',
},
footerContainer: {
flex: 1 / 3,
alignItems: 'center',
},
imageContainer: {
flex: 1,
paddingTop: 58,
},
image: {
width: 320,
height: 440,
borderRadius: 18,
}
});
Button.js
import { StyleSheet, View, Pressable, Text } from 'react-native';
export default function Button({ label }) {
return (
<View style={styles.buttonContainer}>
<Pressable style={styles.button} onPress={() => alert('You pressed a button.')}>
<Text style={styles.buttonLabel}>{label}</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
buttonContainer: {
width: 320,
height: 68,
marginHorizontal: 20,
alignItems: 'center',
justifyContent: 'center',
padding: 3,
},
button: {
borderRadius: 10,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
buttonIcon: {
paddingRight: 8,
},
buttonLabel: {
color: '#fff',
fontSize: 16,
},
});
ImageViewer.js
import { StyleSheet, Image } from 'react-native';
export default function ImageViewer({ placeholderImageSource }) {
return (
<Image source={placeholderImageSource} style={styles.image} />
);
}
const styles = StyleSheet.create({
image: {
width: 320,
height: 440,
borderRadius: 18,
},
});
Answered By - Melihcansahin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.