As I have multiple data that need to be display in the screen that will exceed the screen limit and I cannot scroll down to look at the other data. I researched and found that SafeAreaView and FlatList helps in solving the issue.
I tried to apply to my code:
<SafeAreaView style = {styles.container}>
<FlatList>
<Text style = {styles.header}>{paramKey} results:</Text>
{
todoData.map((item,index) => {
return(
<View key ={index}>
<Text style ={styles.text}>{item.Halal}</Text>
<Text style ={styles.text}>{item.OH}</Text>
<Text style ={styles.text}>{item.Description}</Text>
<Text style ={styles.text}>{item.Location}</Text>
</View>
)
})
}
</FlatList>
</SafeAreaView>
After applying, my data cannot be displayed anymore. So I referred to the document: https://reactnative.dev/docs/flatlist
It seems like <FlatList> ends with /> and not <FlatList> ends with </FlatList>.
Example from the docs:
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({item}) => <Item title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
I tried ending <FlatList> with /> but it seems to be a syntax error in my IDE (Visual Studio code). How do I properly use <FlatList> in this case?
Flatlist do not accept children prop. Use renderItem prop instead:
<SafeAreaView style = {styles.container}>
<Text style = {styles.header}>{paramKey} results:</Text>
<FlatList
data={todoData}
renderItem={({ item }) => (
<View>
<Text style ={styles.text}>{item.Halal}</Text>
<Text style ={styles.text}>{item.OH}</Text>
<Text style ={styles.text}>{item.Description}</Text>
<Text style ={styles.text}>{item.Location}</Text>
</View>
)}
/>
</SafeAreaView>
I have a screen with the following structure:
<ScrollView>
<View style={styles.container}>
<View style={styles.topPanel} />
<View style={styles.titleSection}>
<View>
<Image style={styles.profilePicture} source={logos} />
</View>
<View style={styles.textComponent}>
<TextComponent
boldness="extraBold"
style={styles.titleSection__title}>
...
</TextComponent>
<TextComponent
boldness="semiBold"
style={styles.titleSection__text}>
...
</TextComponent>
</View>
<View style={styles.verticalLine} />
<RatingAndLocation location={6} medianRating={4.2} />
<View>
<TextComponent
boldness="semiBold"
style={styles.titleSection__desc}>
...
</TextComponent>
</View>
<View style={styles.verticalLine} />
</View>
</View>
<TabView images={images} setGalleryIndex={setGalleryIndex} />
</ScrollView>
Tabview component contains react-native-tabview tabs that are scrollViews with content in it. I'm trying to set scrollView's scroll position like that:
navigation.addListener('blur', () => {
scrollViewRef.scrollTo({ y: 0, x: 0, animated: true });
});
But it doesn't work. Nested scrollViews are not working. They don't fire onScroll event. Only the parent scrollview does that. I want to know if there is a way around this issue.
As I understand, you can't nest vertical scrollViews, but how else can you make each tab an individual scrollView and scroll to the top of it when changing index?
Here is how it all should look like:
I am trying to make visible list of buttons on top of a multi-line text input, which is now working. But when i am clicking on one of these button nothing is happening.
I am using zIndex to bring the childComponent on top of TextInput, Now when i am clicking on these button TextInput is getting focus instead of triggering button click event.
I just started learning react-native so I am not able to understand where i need to make the changes for making it functional.
Sample Code structure given below:*
const Component_1=()=>{
const UpdateTextInput=(ip,callType)=>{
console.log(ip);
}
return (<View keyboardShouldPersistTaps={'handle'}>
<View style={{flexDirection:'row',backgroundColor:'#fff',zIndex:10}}>
<ChildComponent callBackFunc={(ip,callType)=>UpdateTextInput(ip,callType)} />
</View>
<View>
<TextInput
multiline
onChangeText={(text)=>updateString(text,'')}
/>
</View>
</View>
)
}
export default Component_1;
const ChildComponent=({callBackFunc})=>{
const [ButtonSection,SetButtonSection]=useState(false)
return (
<View style={{flexDirection:'row-reverse'}}>
<View style={{flexDirection:'column',width:'15%',position:'absolute'}} >
<TouchableOpacity onPress={()=>SetButtonSection(!ButtonSection)} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='arrow-drop-down'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:20,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
{ButtonSection==true
?<View style={{flexDirection:'column',position:'relative',backgroundColor:'#ccc'}}>
<TouchableOpacity onPress={()=>callBackFunc('','CLR')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='block'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','COPY')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='content-copy'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','SAVE')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='save'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<Button title='BTN' onPress={()=>console.log('Button1')
}/>
</View>
:null
}
</View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps={'handle'} style={{marginRight:50}}>
<Item/>
</ScrollView>
</View>
)
}
export default ChildComponent
Instead of using zIndex, use absolute position in view.
position: 'absolute'
Give absolute position to the view of child component
I imported {TouchableNativeFeedback} from 'react-native'
In the render() function I am trying to use TouchableNativeFeedback; however, the function onpress is triggered only when the app reloads. When pressing the TouchableNativeFeedback the onpress function is not triggered. What's the problem? How can I have a TouchableNativeFeedback with onpress function working?
<View style={style.gameBody}>
{this.state.isMystery=='false'?
<View style={style.drinkBody}>
{/* BEER LOGO AND BEER COUNTER */}
<TouchableNativeFeedback style={style.beerText} onpress={console.log('this got preseed')}>
<View style={style.beerText}>
<Image
source={require('../img/beer.png')}
style={style.beerStyling}/>
<Feather style={style.beerCountXStyle} name='x'/>
<Text style={style.beerDrinkCounterStyle}>
{this.state.round1Drink[this.state.gameNum]}
</Text>
{/* Line Stlye */}
<Image
source={require('../img/line.png')}
style={style.lineStyle}/>
</View>
</TouchableNativeFeedback>
{/* BEER TEXT/CARD SCREEN HERE */}
<Text style={style.drinkText}
onPress={() => RandomChooseRound1()} // add this.startAnimation here
>
</Text>
</View>
: null
}
The onpress function in Works; however, the onpress function doesn not work for
<Text style={style.drinkText} onPress={() => RandomChooseRound1()}
When pressing on the text, the onpress function works.
Please Help! Thank you!
I think you're missing a 'this'.
<Text style={style.drinkText} onPress={() => this.RandomChooseRound1()}>
<View >
<Text style={HomeStyles.homeSegmentText}>
{currentUser.badgeId}
<Text style={!(this.props.expiryAlert) && {display:'none'}} )>
<BlinkMe days={getDays()} />
</Text>
</Text>
</View>
In the above example I want the BlinkMe component to only ever display if expiryAlert is true - but the display:none is ignored in the nested text component regardless - does anyone have any ideas for a workaround?
Display property isn't supported for the Text component, you should have a look at it style's props.
As a workaround you can do the following:
<View>
<Text style={HomeStyles.homeSegmentText}>
{currentUser.badgeId}
{!(this.props.expiryAlert) &&
<Text>
<BlinkMe days={getDays()} />
</Text>
}
</Text>
</View>