White flash after Splash Screen on Android React Native - react-native

I have a React Native App built with ExpoKit SDK 32. I have a main switch navigator (from React Navigation) which starts with a Loading Screen, there I do some business logic to decide what screen should load next (Screen A or B), on the next screen I disable the Splash Screen.
The problem is: Whenever I move from the Loading Screen to screen A, I get a White flash.
I have not seem it happen on iOS, only on Android.
Screen A has a imageBackground Component on the whole screen. The image is cached and its the same as the splash screen.
I've tried rendering an image equal to the SplashScreen on the background of the Loading Screen. Same result.
Then I put on my componentDidMount of Screen A SplashScren.hide(). Same result.
The best outcome as been putting 'SplashScreen.hide()' on the onLoadEnd of my background Image of Screen A.
Any help is appreciated! Is there a better way to deal with this kind of situation involving the Switch Component on React Navigation?
This is how my Screen A looks now:
async imageLoaded() {
SplashScreen.hide();
try {
const usuario = await SecureStore.getItemAsync(LOGIN_USUARIO_LOCAL_AUTH);
if (usuario) {
await this.localAuth();
}
} catch (err) {
// faz nada
}
}
....
render() {
const { usuario, senha } = this.state;
const { logando, localAuthHardware } = this.props;
const labelHardware = localAuthLabel(localAuthHardware);
return (
<SafeAreaView style={styles.safeArea}>
<ImageBackground
source={require('../../../assets/images/start.png')}
resizeMode="cover"
style={styles.container}
imageStyle={styles.container}
onLoadEnd={this.imageLoaded}
fadeDuration={0}
>
<KeyboardAwareScrollView alwaysBounceVertical={false} keyboardShouldPersistTaps="handled">
<Image
source={require('../../../assets/images/baladapp-icone.png')}
style={styles.baladappicone}
resizeMode="contain"
fadeDuration={0}
/>
<View style={styles.baladappView}>
<Image
source={require('../../../assets/images/BaladAPP.png')}
resizeMode="contain"
style={styles.baladapp}
fadeDuration={0}
/>
<Text style={styles.produtorText}>PRODUTOR</Text>
</View>
<View style={styles.formView}>
<TextInput
placeholder="Usuário"
style={[styles.input, { elevation: 1.3 }]}
underlineColorAndroid="transparent"
value={usuario}
onChangeText={this.changeUsuario}
keyboardType={Platform.OS === 'ios' ? 'email-address' : 'visible-password'}
autoCorrect={false}
autoCapitalize="none"
/>
<PasswordInputField
placeholder="Senha"
style={styles.input}
enablesReturnKeyAutomatically
underlineColorAndroid="transparent"
value={senha}
onChangeText={this.changeSenha}
containerStyle={[styles.containerPasswordStyle, { elevation: 1.3 }]}
onSubmitEditing={this.login}
/>
<TouchableOpacity
onPress={this.abrirRecuperarSenha}
style={styles.esqueceuTextView}
hitSlop={hitSlop15}
>
<Text style={styles.esqueceuText}>Esqueceu a senha?</Text>
</TouchableOpacity>
<Button
text="ACESSAR SISTEMA"
containerStyle={styles.button}
textStyle={styles.buttonText}
onPress={this.login}
loading={logando}
loadingColor={colors.branco}
/>
{localAuthHardware.length > 0 && (
<TouchableOpacity
onPress={this.localAuth}
style={styles.localAuthView}
hitSlop={hitSlop15}
>
<Text style={styles.esqueceuText}>{`Acessar com ${labelHardware}`}</Text>
</TouchableOpacity>
)}
</View>
</KeyboardAwareScrollView>
</ImageBackground>
</SafeAreaView>
);
}

Related

React-Native Image Not Showing

Okay, so I have a react-native screen looking like
const SentimentScreen = ({ navigation, route }) => {
return (
<View style={styles.container}>
<View style={styles.container}>
<Text style={styles.titleText}>Sentiment: {route.params.sent}</Text>
<Image
style={{width: '100%', height: '50%'}}
source={{uri:route.params.url}}
/>
</View>
<StatusBar style="auto" />
</View>
);
};
And the url param is a string like 'https://www.example.com/lol.png'
But the image doesn't show. What am I doing wrong? (I'm still kind of a noob in terms of react-native)
Take out the image from path first give it specific, height , width and size .Then you can pass in uri.

componentWillMount doesn't get called again when navigating back to my original component

screen A: calling componentWillMount successfully and then navigating to screen B,
screen B: do some redux changes (that will affect the data in WillMount) and then navigating back to A but componentWillMount doesn't get called and preventing desirable data from appearing on the screen
screen A:
componentWillMount(){
this.props.fetchData();
console.log('fetched')
}
renderItem({item}){
return <Text>{item.name}</Text>
}
render(){
const array = Object.values(this.props.data)
return(
<View style={{flex: 1}}>
<Inline>
<View style={styles.container}>
<View style={styles.headerContainer}>
<Header style={styles.header} HeaderText={'EmployeeList'}
/>
</View>
<TouchableOpacity style={styles.buttonContainer}
onPress={()=> this.props.navigation.navigate('CreateEmp')}
//screen B
>
<Text style={styles.buttonStyle}>Add an Employee</Text>
</TouchableOpacity>
</View>
</Inline>
<FlatList
data={array}
renderItem={this.renderItem}
keyExtractor={array1 => array1.name}
/>
</View>
screen B:
functionOne(){
const {name, phone, createEmployee, shift} = this.props
createEmployee(name, phone, shift)
}
functionTwo(){
this.props.navigation.navigate('EmployeeList')//screen A
}
functionCombined(){
this.functionOne();
this.functionTwo();
}
and calling functionCombined in the class of course
The componentWillMount is executed when the screen is rendered.
However, when navigating to the Navigate command, if the screen is first moved, it is rendered to draw the screen, but if it is already rendered, it is not rendered again.
The function shall be moved using a push commands to run again.
functionTwo(){
this.props.navigation.push('EmployeeList')//screen A
}

React Native - Performance drop to 10 fps when rendering an image inside a SectionList

I have SectionLists inside a horizontal FlatList (react-native-snap-carousel). Each SectionList item represents an entry in a timeline. Some of the items are just text and others also have an image.
While scrolling, every time an image is visible on the screen, the fps drop to less than 10. If I simply comment the <Image> tag so that no image is rendered, the fps go up to 50>fps.
The app on the left has images, the app on the right has <Image /> component commented.
I only tested the app on Android.
Any explanation why the fps drop when an image is displayed?
renderItem:
render() {
const {
containerStyle,
hourStyle,
hourTextStyle,
contentStyle,
iconDashesStyle,
titleText,
descriptionText,
notesText
} = styles;
const activity = this.props.item;
const { type, category, date, note } = activity;
return (
<View style={containerStyle}>
<View style={hourStyle} >
<Text style={hourTextStyle}>
{moment(date).format('HH:mm')}
</Text>
</View>
<View style={iconDashesStyle}>
{this.renderIcons()}
{this.renderDashes()}
</View>
<View style={contentStyle}>
<Text style={titleText}>{getActivityName(type, category).toUpperCase()}</Text>
<Text style={descriptionText}>{getActivityDescription(activity)}</Text>
<Text style={notesText}>{note}</Text>
{this.renderImage()}
</View>
</View>
);
}
renderImage function:
renderImage() {
const { type } = this.props.item;
if (type === ID_SHARE_MOMENT && this.props.image) {
const { uri, ratio } = this.props.image;
return (
<View
ref={r => (this.imgRef = r)}
style={[styles.momentImgContainer, { aspectRatio: ratio }]}
collapsable={false}
>
<TouchableOpacity onPress={this.onPressImage}>
<Image
style={styles.momentImg}
source={{ uri }}
resizeMode='cover'
/>
</TouchableOpacity>
</View>
);
}
}
The second app without images has the renderImage as follows:
<TouchableOpacity onPress={this.onPressImage}>
{ /*
<Image
style={styles.momentImg}
source={{ uri }}
resizeMode='cover'
/>
*/ }
</TouchableOpacity>
Edit 1
While trying to improve the performance of my app, I followed this link of Adam Stanford on medium, which suggested to load static assets directly from the app package (images included via Xcode asset catalogs or in the Android drawable folder).
I started with the background image of the entry screen that precedes the screen shown above, which only has a background image, a logo, and a spinner:
Only by doing this in this first image, look what happened:
The fps went up to 40+ even when rendering the images in the timeline. However, I do not understand the relation...

Drawer Not opens on Android

I'm using react-navigation and implementing drawer.
It worked on the iOS but it's not working on the android.
When I call _drawToggle,
_drawerToggle = () => {
this.props.navigation.navigate('DrawerOpen');
}
The screen gets darker(seems like working, but not quite).
Here is return value of the render() function.
<View style={{flex:1}}>
<Header
headerText="Restaurant List"
navigation={this.props.navigation}
drawerToggle={this._drawerToggle}
/>
<ScrollView>
<FlatList
data={restaurants}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</ScrollView>
</View>

listview loading image react native android

I have a problem. I have a listview. I want to add loading image while wait show image in screen.
I've been tried react-native-fast-image, react-native-image-progress. But not.
You can help me. thankssss.
Index.js
<ListView
enableEmptySections
style={styles.list}
dataSource={this.state.dataSource}
renderRow={rowData => <ArtStreamRow artwork={rowData} />}
scrollRenderAheadDistance={3000}
initialListSize={30}
onEndReached={this.onEndReached}
onEndReachedThreshold={900}
refreshControl={
<RefreshControl
refreshing={this.props.isRefreshing}
onRefresh={this.onRefresh}
/>
ArtStreamRow.js
class ArtStreamRow extends PureComponent {
render() {
const {
artwork,
} = this.props;
return (
<View style={styles.container}>
<TouchableNativeFeedback
onPress={viewArtworkDetail.bind(this, artwork)}
background={Platform.OS === 'android' ?
TouchableNativeFeedback.SelectableBackground() : ''}
>
<Image
source={{ uri: getUrl(artwork) }}
style={styles.artworkImage}
resizeMode={Image.resizeMode.cover}
/>
</TouchableNativeFeedback>
</View>
)
}
here, loading image, I want to add.