Fast refresh that was introduced in React Native 0.61 doesn't work - react-native

(also posted in https://github.com/facebook/react-native/issues/27583)
Update: a day passed and I started my app again. Didn't change anything since posting the question. Now it works fine. No idea what happened...
From the fact that two people marked this question as useful, I understand that I am not the only one having this problem...
I am running a very basic 'app' (a single file, a single component) for which the code is attached below, using React native 0.61.
Developing for android, on windows 10 with genymotion.
Fast Refresh is turned on, but it doesn't seem to work, for example, when:
I am changing the 'Posts' string to 'New Posts'
When I remove the posts button
Only the debug menu's "reload" refreshes the app and renders the changes.
Any idea why?
Here is the code:
import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
export const App = () => {
const [resource, setResource] = useState('todos');
return (
<View style={{ flex: 1, alignItems: 'center', marginTop: 30 }}>
<View style={{ flexDirection: 'row', marginTop: 0,
alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity onPress={() => (setResource('posts'))}>
<View style={styles.button}>
<Text style={styles.buttonText}>
Posts
</Text>
</View>
</TouchableOpacity>
<View style={{ width: 20 }} />
<TouchableOpacity onPress={() => setResource('todos')}>
<View style={styles.button}>
<Text style={styles.buttonText}>
Todos
</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
buttonText: {
color: 'black',
fontSize: 20
},
button: {
backgroundColor: '#a8a',
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 5,
paddingHorizontal: 10,
borderRadius: 2
}
});

I've found that sometimes the Metro Bundler gets 'stuck'. That would explain why when you ran it the next day, it worked fine.
When things get weird for (seemingly) no apparent reason, I do:
yarn start --reset-cache

In my case I ran watchman watch-del-all and suddenly I lost fast reload.
Re-installing node_modules and clear & rebuilding app did not help me.
Update: a day passed and I started my app again. Didn't change anything since posting the question. Now it works fine. No idea what happened...
Got a hint from this and restarted my computer. Now it works fine.

I had the same issue few minutes back. Fast refresh was not working even though it was enabled. I closed the metro bundle and started the new instance. Worked for me.

Related

react-native-keyboard-aware-scroll-view : Page scrolls down when I start typing

Until typing everything is ok. However after starting typing page scrolls down(shifting). I am not able to solve this whatever i do...
<ImageBackground
source={bgSrc}
style={styles.background}
resizeMode="cover">
<StatusBar hidden={true} />
<KeyboardAwareScrollView
showsVerticalScrollIndicator={false}
enableOnAndroid
>
{screenToShow}
</KeyboardAwareScrollView>
</ImageBackground>
const styles = StyleSheet.create({
container: {
width: '100%',
height: height,
backgroundColor: '#555',
},
background: {
flex: 1,
width: null,
height: null,
justifyContent: 'center',
alignItems: 'center'
}
});
before typing, it's looking perfect
After typing in the password field page moves down as u see:
after typing, it scroll down
This library is always a bit janky. Try a configuration like this:
<KeyboardAwareScrollView
style={{ backgroundColor:
themeColors.boxPrimaryBackground, flexGrow: 1 }}
contentContainerStyle={{ width: '100%', margin: 0 }}
scrollEnabled={true}
extraScrollHeight={-125}
extraHeight={10}
keyboardOpeningTime={Number.MAX_SAFE_INTEGER}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps={'handled'}
>
// add scroll content here
</ KeyboardAwareScrollView>
The thing you really need to add is the keyboardOpeningTime={Number.MAX_SAFE_INTEGER}. It has something to do with the animation inside the library. Good luck hope this helps.
I have seen your question on github as well, and its been a long time since that is in open state there.
I have the above problem resolved using KeyboardAvoidingView from react-native
import {KeyboardAvoidingView} from 'react-native'
I have replaced KeyboardAwareScrollView with KeyboardAvoidingView and this is working as needed.
Here is an app link that does this. You can download and see it's login page.

using react-native-youtube api : youtube videos not rendering

I'm trying to get youtube videos to play in my react-native project. I am using the react-native-youtube module and have enabled YouTubeDataAPIv3 and YouTubeAnalyticsAPI. But I'm getting a blank screen. Sometimes, after a little delay, the screen will resize leaving a smaller white square in the corner and a black background. But still no video.
MY api key does work. I tested this by passing a text-based request through postman. I've also made sure the api is also correctly being passed down to the component. I've tried different videos/videoIds. I've played around with various settings and looked at other examples of working code. My current theory is that this may have something to do with nested views/containers and settings. The videos are in component that is embedded in a parent screen. Maybe a flex:1 is overriding another view? I really don't know. . Has anyone else run into this problem? Any ideas how to fix this?
parent screen:
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<LeaderBoard />
<CurrentVideos />
</View>
</SafeAreaView>
);
}
video screen:
return (
<ScrollView style={{ flex: 1}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink'
}}
>
<YouTube
videoId={'BunklIatIK4'}
play={true}
apiKey={config.API_KEY}
controls={1}
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
</View>
</ScrollView>
);
Figured it out! The issue was that I hadn't manually moved a copy of the the youtube iframe file from the node modules to the project in Xcode. Now, it's BEAUTIFUL!

Quotes around numeric style values cause app to crash

I have the following section of code. When I put quotes (either single quotes around the integer values in the sections of code marked with Issue n my app crashes without any apparent error message. As soon as I navigate to that page I get a popup box that says: "Unfortunately ExampleApp has stopped." with an "OK" button.
Adding quotes to any of the four marked sections below causes the app to crash. However, if I add quotes around the flex integer, I get a proper error thrown and a red screen is displayed on my phone with the message: Invariant Violation: Invalid prop 'flex' of type 'string' supplied to 'StyleSheet container', expected 'number'.
render(){
const styles = StyleSheet.create({
container: {
flex: 0, //No Issue
padding: 8, //Issue 1
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#C1C1C1',
},
button: {
margin: 5 //Issue 2
}
});
return(
<View style={styles.container}>
<View>
<TouchableOpacity onPress={()=> this.goHome()} style={{marginRight: 20}}> //Issue 3
<Image source={require('../images/pic001.png')} style={{width: 30, height: 30}} /> //Issue 4
</TouchableOpacity>
</View>
<View style={styles.button}>
<Button title="Select" onPress={() => this.selectItem()} />
</View>
</View>
)
}
Is there a reason that quotes would cause my app to crash unexpectedly like this? Why do I get a proper error when the flex value is quoted, but do not get a proper error in any of the other situations.
If it helps, I am developing on Windows 10, connecting to my Android phone (with USB cable for the initial connection).
See also this page for a similar problem.

React Native 0.52.0 - Text truncates when fontWeight set to bold

I just created a new React Native project and was working on the UI bit. I tried to write some text within <Text>Hello world!</Text> and it was working fine:
Hello world!
But when I added fontWeight: 'bold' to the same, it truncated and showed something like this:
Hel..
I've only tested this in android.
My React project version details:
react-native-cli: 2.0.1
react-native: 0.52.0
I have no idea why the text is truncating itself. Is this a known issue in the 0.52.0 because I've been using the same method to set text bold and the issue never occurred in 0.48.2
EDIT:
I just realized, this happens when I have inside a with a style property alignItems: 'center' . I have no idea why this still happens though. Here's my code:
<View style={{alignItems:'center'}}>
<Text style={{fontWeight: 'bold'}}>Helloworld!</Text>
</View>
Thanks!
my coworker had the same problem, we solved by changing the font (through font-family). Most probably a bug from react...
You can use flex:1 and flexDirection:"column" at view level style if you want your content to come line by line. like this:-
<View style={{flex:1, flexDirection:"column"}}>
<Text style={{fontWeight: 'bold'}}>Helloworld!</Text>
</View>
or if you don't want to use flexDirection then you can use alignSelf: 'stretch', textAlign: 'center'. like this:-
<View style={{ alignSelf: 'stretch', textAlign: 'center'}}>
<Text style={{fontWeight: 'bold'}}>Helloworld!</Text>
</View>
You can use flexGrow:1 on the Text element, e.g.:
<Text style={{flexGrow:1, fontWeight:'bold'}}> General Checkup </Text>

react-native-blur in modal

I'm using react-native-blur to blur a view on react-native but it does not work inside a modal as this issue states.
I've tried the idea suggested in the comment by setting a timeout after the imageLoad but it still not blured.
Is there any workaround ? Why does it works outside a modal but not in the modal ? What is the difference between how a modal render in react-native ? That's unfortunately a bug part of my app and I must succeed.
Thanks
EDIT:
I did it differently. As blurRadius is working for images on android in modals, I use a combinations of images to show exactly what I want of the image.
Perhaps useful for other people, I tried the react-native-blur solution but got stuck as well. Eventually this worked just fine for me:
<Modal
animationType={'fade'}
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
this.setState({ modalVisible: false });
}}
>
<View
style={{
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
backgroundColor: 'rgba(100,100,100, 0.5)',
padding: 20,
}}
>
{this.props.modalContent}
</View>
</Modal>
The remaining part of the code can be found in the documentation of the react native modal: https://facebook.github.io/react-native/docs/modal