I am creating UI for my new project and the screen length is large so I put the Scrollview so that User can scroll the screen and on the same screen I am using SIX flautists to render some data but When I run my application on IOS simulator then I am getting warning on almost every screen where I am using Flatlist under Scrollview please check the attached screen shot
The warning appears because ScrollView and FlatList share the same logic, if FlatList run inside ScrollView, it's duplicated
By the way SafeAreaView doesn't work for me, the only way to solve is.you can use SafeArea like this
<SafeAreaView style={{flex: 1}}>
<FlatList
data={data}
ListHeaderComponent={ContentThatGoesAboveTheFlatList}
ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>
This is happening because it isn't recommended to work with a FlatList within a ScrollView.
A workaround tho would be to add a property to your FlatList like so :
<FlatList
data={yourdata}
nestedScrollEnabled ----> Add this
/>
Hope it solves your problem
i get this case too and the best way is to disable that warning because sometimes we need to use flatlist inside scrollview
import React, { useEffect } from 'react';
import { LogBox } from 'react-native';
useEffect(() => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, [])
Related
Description
When a child of a pressable component is pressed (such as an image), the function passed to the onPress prop does not execute on android. Works as expected on iOS.
React Native version:
0.63.2
Steps To Reproduce
Open a new expo snack
Create a Pressable component that is the parent of some other component (A text or image)
Set the onPress prop to call a function that has a visual effect. (Like an alert)
Switch to the android tab, and click 'Tap to play'
Expected Results
The function is called and the effect (an Alert) is fired
Snack, code example, screenshot, or link to a repository:
https://snack.expo.io/#razorshnegax/6c7be3
Code example:
import React from 'react';
import { View, Pressable, Image, Alert } from 'react-native';
export default class Index extends React.Component {
render() {
// The onPress function fires in iOS, but not android
return (
<View>
<Pressable onPress={() => {Alert.alert("Yeep")}}>
<Image source={require('./greatknight.png')} style={{
// So that the image is more centered
top: 100,
left: 100
}}/>
</Pressable>
</View>
);
}
}
Due to the styling, the Pressable component is not place behind the Image.
You can see this by adding a color to the Pressable component.
A fix for this would be to style the Pressable component so the image components are aligned and events bubble through.
I'm not exactly sure why the event doesn't bubble through on Android as it should based on the component hierarchy.
In my case added zindex to resolved this problem. This work even touchable also
<Pressable onPress={() => alert()} style={{zIndex: 0.5, }}>
*****
</Pressable>
TextInputs at the bottom of the screen in a FlatList automatically and immediately dismiss the keyboard on focus, making it impossible to write anything in it.
The issue is reproducible easily on a blank react-native init project. I tested it in Nexus 5x simulator and real device. I reproduce the bug every time on 0.61.
Related to https://github.com/facebook/react-native/issues/13745
Just add one props in your FlatList as below:
<FlatList
keyboardDismissMode={'none'}
.....
</FlatList>
Chears.!
Just don't give the component reference to the Flatlist footer because when we update state of the component then arrow function creates a new reference that's why TextInput loses it's focus. Just return direct View to the Flatlist footer.
<FlatList
data={...}
ListFooterComponent={renderYourFooter()}
/>
or
<FlatList
data={...}
ListFooterComponent={<View>
<TextInput/>
</View>}
/>
I am trying to translate a ball from one position (x1,y1) to another (x2,y2).
This translation is supposed to take place after clicking the ball.
I am using Animated.View which gets the current position of ball from a state variable. Inside this Animated.View I am wrapping the children using Touchable Opacity. I also looked around in internet and as per my understanding, this problem is related to absolute position of ball (initial and final position of ball is passed as a prop from parent)
<Animated.View style={this.state.position.getLayout()}>
<TouchableOpacity onPress={()=>console.log('clicked')}>
<View>
{this.props.children}
</View>
</TouchableOpacity>
</Animated.View>
I am unable to understand why onPress is not getting triggered and also want to know the solution to this problem. Thanks
Use TouchableOpacity from 'react-native-gesture-handler' instead of from 'react-native'.
import { TouchableOpacity } from 'react-native-gesture-handler';
Follow this post Cannot click TouchableOpacity in animated.view using React native
I have a code like this:
<View>
<View></View>
<ScrollView>
<View>
<TextInput/>
</View>
</ScrollView>
<View></View>
</View>
How can I handle it to response correctly to keyboard?
Both android and ios???
i have 2 permenant views top and bottom of the screen, this views pushed up on keyboard show
Your question is really unclear, but what I think you need is KeyboardAvoidingView.
It's a built-in React Native component that resizes based on the keyboard height.
To make sure the keyboard is not overlapping any important bits of your layout such as your text Input wrap your whole screen in KeyboardAvoidingView
https://facebook.github.io/react-native/docs/keyboardavoidingview
Solved!!
I solved it by handling the display of elements (views) on keyboard show and hide by keyboard in react native docs
Environment
react: 16.3.1
react-native: 0.55.3
Description
I've implemented a multi dimension list view on React Native with a few horizontal FlatLists . Everything displays correctly. However, when I move my focus all the way to the end of a row, the focus will automatically go to the row below when I try to go right (already at the end of the row).
Is there a solution to prevent this and make sure that focus will stop when it reaches the ends of a flatlist ?
Steps to Reproduce
Render a FlatList vertically with each row being another horizontal FlatList. Scroll to end of a row, try to move RIGHT and focus would go down to the next row.
Expected Behaviour
Expected Behaviour should be none since we're at the ends of the current row.
Actual Behaviour
Focus goes to the next row if at the backend of a row
Note
I've searched the docs and this is a specific issue to firetv/androidtv.
Same issue as issue #20100 but the bug is "closed".
Sample code
import React, {Component} from 'react';
import {View, Text, TouchableOpacity, ScrollView} from 'react-native';
export default class App extends Component {
render() {
const data = [];
for (let i = 0; i < 10; i++)
data.push(i);
return (
<View>
{[1, 2].map(() => (
<ScrollView horizontal style={{height: 210}}>
{data.map(i => (
<TouchableOpacity key={i}>
<View
style={{
backgroundColor: 'grey',
width: 200,
height: 200,
}}
>
<Text style={{fontSize: 60}}>{i}</Text>
</View>
</TouchableOpacity>
))}
</ScrollView>
))}
</View>
);
}
This is not really a (proper) solution, but more of a hack, but it does the job.. I found this out by pure coincidence; if you add a border to the ScrollView, you won't have this problem.. So you can maybe play around with this a bit (e.g. an invisible border).
Currently I have discovered this is not possible for tvOS or android or firetv. Unless I'm mistaken I am assuming there is a low number of people attempting to create connectedTv apps or if they are they have a very very simple interface
you should be able to handle this by setting the last item's nextFocusRight property to null or undefined.