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

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...

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.

Autoplay video on element focus in react-native

import {Video} from 'expo-av';
return (
<FlatList
data={videos}
// keyExtractor={(item,ind}
keyExtractor={(item) => item.names}
renderItem={({item})=>(
<TouchableOpacity
onPress={() => {console.log('pushed');navigation.push('Details',{url:item.videourl})}}>
<Video
usePoster="true"
source={{ uri: item.videourl }}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
shouldPlay={isFocused ? true : false}
// isLooping
// useNativeControls
posterSource={{uri:item.imageurl}}
style={{ height: 300 }}
/>
</TouchableOpacity>
)}/>
);
If one video gets focused then the video must be played and if the video is not focused then it should pause.I am using expo-av for playing video. The above code is playing all videos on the screen but I want to play the video which is focused just like what youtube does.
To do this you need to keep track of how the scrollview has moved (the offset). FlatList has an onScroll property, where the callback is given information about the list layout etc., and you are interested in tracking how much the content has been scrolled vertically - that is contentOffset.y.
Dividing this value by the list item height (a constant 300 in your case) and rounding will give you the index of the item that should be playing.
Use state to store the currently focused index:
const [focusedIndex, setFocusedIndex] = React.useState(0);
Add a handler for the onScroll event :
const handleScroll = React.useCallback(({ nativeEvent: { contentOffset: { y } } }: NativeSyntheticEvent<NativeScrollEvent>) => {
const offset = Math.round(y / ITEM_HEIGHT);
setFocusedIndex(offset)
}, [setFocusedIndex]);
Pass the handler to your list:
<FlatList
onScroll={handleScroll}
...
/>
and modify the video's shouldPlay prop:
<Video
shouldPlay={focusedIndex === index}
...
/>
You can see a working snack here: https://snack.expo.io/#mlisik/video-autoplay-in-a-list, but note that the onScroll doesn't seem to be called if you view the web version.
Try https://github.com/SvanBoxel/visibility-sensor-react-native
Saved my time. You can use it like.
import VisibilitySensor from '#svanboxel/visibility-sensor-react-native'
const Example = props => {
const handleImageVisibility = visible = {
// handle visibility change
}
render() {
return (
<View style={styles.container}>
<VisibilitySensor onChange={handleImageVisibility}>
<Image
style={styles.image}
source={require("../assets/placeholder.png")}
/>
</VisibilitySensor>
</View>
)
}
}

How do I flex horizontally within a column layout? Currently only half the width of the screen

How do I flex horizontally within a column layout? Currently only half the width of the screen
Here's the current render code:
render() {
const {handle_data} = this.state
if (handle_data.length) {
return (
<ScrollView style={styles.container}>
{
handle_data.map(pack => {
console.log('this.cleanDataForFlatlist(pack): ', this.cleanDataForFlatlist(pack))
return (
<View style={styles.pack}>
<Text style={{fontWeight: 'bold'},{fontSize: 24}}>{pack[0].pack_name}</Text>
<Text style={{fontWeight: 'bold'},{fontSize: 16}}>{pack[0].pack_description}</Text>
<View style={styles.pack}>
<FlatList
data={this.cleanDataForFlatlist(pack)}
keyExtractor={this._keyExtractor}
renderItem={this._renderHandle}
/>
</View>
</View>
)
})
}
</ScrollView>
);
} else {
return null
}
}
Here's what it looks like now
I do not see your code about an item, so I show an example code. your problem is mainly the item render.
// the soruceData is the data souce,in other words, your handle_data
<View style={{flex:1, backgroundColor:'transparent'}} >
<FlatList
data={this.state.sourceData}
renderItem={this._renderItem}
/>
</View>
//the render item method, I suggest you put the item into a pure component
_renderItem = ({ item }) => {
return (
<View style={{flexDirection:'column',width:'92%'}>
id={item.id} // the every item should hava a unique id or key
<ImageView source={{uri:"image url"}} style={{width:,height:}}/>
<Text numberOfLines={1} style={{fontSize: 18,
color: '#353535',}}>"content"</Text>
/>
);
};
you set layout width or height should use flex or percent. in this case, your UI is flexible.
At the same time, I suggest you read felx layout guide
In the end, I suggest you remove the scroll view, move views which algin above the flatList into the flatList ListHeaderComponent. it can avoid the scroll conflict.

White flash after Splash Screen on Android 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>
);
}

Flexbox layout react native - first view occupies entire screen

I am trying to make a simple single page react native app.
Just to check if my flexbox layouts are working correctly,I decided to give background colors and check if they are aligned.
As seen in the picture the first view occupies the entire space.
Where I am I going wrong ?
My output as shown
Output
Here is my code:
render() {
return (
<View style={styles.container}>
<View style={styles.questionview}>
<Text>Enter a word to get meaning</Text>
<TextInput onChangeText={(text)=> this.setState({word:text})}/>
<Button title={"GET MEANING"} onPress={this.buttonPressed}/>
</View>
<View styles={styles.ansview}>
<Text styles={styles.anstext}>{this.state.answer}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1
},
questionview:{
flex:6,
backgroundColor:'red',
padding:30
},
ansview:{
flex:3,
backgroundColor:'green'
}
});
Took me some time, but found your problem. It's a typo.
It should be just 'style' , not 'styles'.
It should have been as below :
<View style={styles.ansview}>
<Text style={styles.anstext}>{this.state.answer}</Text>
</View>
also styles.anstext is not present in your code.