React native Flatlist doesn't scroll - javascript

I have an weather app in react native that uses react-native-app-intro-slider that is basically a vertical FlatList. This is my App render
return (
<AppIntroSlider style = {{backgroundColor:'#4c669f'}}
renderItem = {_renderItem}
data = {dataToRender}
showDoneButton = {false}
showPrevButton = {false}
showNextButton = {false}/>
)
And the Slider items that i'm rendering look like this
_renderItem = ( {item} ) => {
return (
<View style={{flex:1}}>
<Text style={{fontSize:20, marginTop:20, color:'white',fontSize:25, alignSelf:'center'}}>{item.name}</Text>
<View style={{ flexDirection:'row', marginTop:15, alignItems:'center', justifyContent:'center'}}>
<Image source={{uri: 'http://openweathermap.org/img/wn/' + item.icon + '#2x.png'}} style={{width:90, height:90}}/>
<Text style={{color:'white', fontSize:60}}>{`${_.round(item.temp)}°C`}</Text>
</View>
<View>
<Text style={{alignSelf:'center', justifyContent:'center', color:'white', fontSize:20}}>{item.clouds}</Text>
<View style={{display:'flex', alignItems:'flex-start', marginLeft:40 }}>
<View style={{ marginTop:40, flexDirection:'row'}}>
<Icon name='wind' size={28}/>
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.wind} km/h</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row'}}>
<Icon name='temperature-low' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_min,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='temperature-high' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_max,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='compress-alt' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.air_pressure} hPa</Text>
</View>
</View>
</View>
<View>
<FlatList
data={dataToRender16}
renderItem={renderFlatListItem}/>
</View>
</View>
);
}
And the issue is that the FlatList in the rendered item (in the second code snippet) is not scrolling down, I've tried changing some styles but none of that worked


First of your dataToRender16 must have some unique id ,and you must add keyExtractor to your FlatList.
checkout the following example:
<FlatList
keyExtractor={(item, index) => item.id}
data={dataItems}
renderItem={itemData => (
<ItemComponent
id={itemData.item.id}
onDelete={removeItemHandler}
title={itemData.item.value}
/>
)}
/>


Adding flex:1 to styles of the that FlatList is netsted is solved the issue
<View style={{flex:1, alignItems:'center', paddingTop:50}}>
<FlatList
data={dataToRender16 }
renderItem={renderFlatListItem}/>
</View>

Related

How to space items in React or React Native

I am trying to space my components however I am having issues. I would like my grid to take up 90% of the screen and the gear icon to take 10%
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{flex: 1}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
</View>
What I have
What I am hoping for
I was able to get the look but I had to change the grid flex value to 12. I know it's not the correct way so I am trying to figure how to do this

You put flex: 1 in both Views, this means that both will try to take up 50% of the space (1+1). If you want one to take 90% and the other one 10%, one will need flex: 9 and the other one flex: 1.
Just change the flex values:
<View style={{flex: 9}}>
<FlatGrid
...
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
To try to make it clearer: just imagine the sum of the flex values on the same level are 100%. Since you had 2 flex: 1, 1+1=2=100%, so 1=50%.
By making the change I suggested (flex: 9 and flex: 1) you can think of it like 9+1=10=100%, so 9=90% and 1=10%.

const {width} = Dimensions.get('window');
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{width : 0.9*width}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{width : 0.1*width}}>
<Icon name="settings" size={30} />
</View>
</View>
try this, don't forget to import Dimensions from react-native
use cosnt {width} = Dimensions.... out of return statement.

You can set your gear icon as an absolute element:
<View style={styles.grid}>
<Octicons name="gear" size={iconSize} color="black" style={styles.icon} />
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
with the following styles:
grid: {
alignSelf: 'center',
width: width * 0.9,
},
icon: {
position: 'absolute',
right: -iconSize,
top: 0,
}
Here is a working snack: https://snack.expo.dev/#hristoeftimov/absolute-icon

"undefined is not an object", need to check if allNotes array is empty. How?

Feel like this is kind of a silly question but I need to only return the allNotes map data if allNotes isn't empty (its an array). This seems like just a simple if/else but really can't figure out how to do this in this context (inside view). Right now, I get the error in the title when nothing is in the array. when it has data everything is fine.
{isOpen &&
<TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastListUpdated}>
<View style={{ alignItems: 'center' }}>
<Text style={styles.flastlistItemText2}>{props.noteitem.note}</Text>
</View>
<View style={{ height: 1, width: '100%', backgroundColor: 'lightgrey' }} />
<View>
{allNotes.map((item) => {
return (
<View style={{ flexDirection: 'row', margin: 5 }}>
<View style={styles.perItemBar} />
<Text style={styles.noteTextStyle}>{item}</Text>
</View>
)
})}
<View style={styles.bottomBar}>
<TextInput onChangeText={(text) => { updateNoteStatus(text) }} style={{ flex: 2 }} placeholder='Enter New:' />
<TouchableOpacity onPress={addNote} style={{ flex: 1 }}>
<Text style={{ fontSize: 30 }}>+</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
}
</View>
)
}
Again I Know this is something really simple but I can't get the formatting correct. Don't know what the correct method of doing this would be. Thanks!

Could always double check that allNotes is defined like this although it may be better to default allNotes to an empty array and then confirm here that it's what you'd expect.
{isOpen &&
<TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastListUpdated}>
<View style={{ alignItems: 'center' }}>
<Text style={styles.flastlistItemText2}>{props.noteitem.note}</Text>
</View>
<View style={{ height: 1, width: '100%', backgroundColor: 'lightgrey' }} />
<View>
{allNotes && allNotes.map(item => (
<View style={{ flexDirection: 'row', margin: 5 }}>
<View style={styles.perItemBar} />
<Text style={styles.noteTextStyle}>{item}</Text>
</View>
)
)}
<View style={styles.bottomBar}>
<TextInput onChangeText={(text) => { updateNoteStatus(text) }} style={{ flex: 2 }} placeholder='Enter New:' />
<TouchableOpacity onPress={addNote} style={{ flex: 1 }}>
<Text style={{ fontSize: 30 }}>+</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
}
</View>
)
}

How to get the touchableOpacity function to work correctly?

When I press on "Immunity boosting" the correct Pressedinfo shows up, so its original function works, but the problem is it also alerts citrus, and when I click the touchableOpacity thats supposed to alert Citrus but I don't get any alerts when I'm supposed to, Please check code down below.........................................
export default function LinksScreen() {
const citrusAlert = () => Alert.alert("Citrus ");
const [Pressedinfo, setPressedInfo] = useState(null)
const pressHandler = (id) => {
if (id == 1) {
setPressedInfo(
<View>
<View style={Styles.component}>
<Image source={home} style={Styles.home} />
<Text style={Styles.Text2}>#Stay home, Save lives</Text>
</View>
<View style={Styles.component}>
<Image source={distanceimg} style={Styles.distance} />
<Text style={Styles.Text2}>Keep a safe distance</Text>
</View>
<View style={Styles.component}>
<Image source={washinghands} style={Styles.distance} />
<Text style={Styles.Text2}>Wash hands often</Text>
</View>
<View style={Styles.component}>
<Image source={coverimg} style={Styles.distance} />
<Text style={Styles.Text2}>Cover your cough</Text>
</View>
<View style={Styles.component}>
<Image source={sickimg} style={Styles.distance} />
<Text style={Styles.Text2}>Sick? Call for help</Text>
</View>
</View>
)
} else if (id == 2) {
setPressedInfo(<View>
<TouchableOpacity onPress={citrusAlert()} style={Styles.component}>
<Image source={citrus} style={Styles.distance} />
<Text style={Styles.Text2}>Citrus (Vitamin C)</Text>
</TouchableOpacity>
<View style={Styles.component}>
<Image source={bellp} style={Styles.distance} />
<Text style={Styles.Text2}>Red Bell Peppers</Text>
</View>
<View style={Styles.component}>
<Image source={broc} style={Styles.distance} />
<Text style={Styles.Text2}>Broccoli</Text>
</View>
<View style={Styles.component}>
<Image source={garlic} style={Styles.distance} />
<Text style={Styles.Text2}>Garlic</Text>
</View>
<View style={Styles.component}>
<Image source={ginger} style={Styles.distance} />
<Text style={Styles.Text2}>Ginger</Text>
</View>
<View style={Styles.component}>
<Image source={spinach} style={Styles.distance} />
<Text style={Styles.Text2}>Spinach</Text>
</View>
</View>)
} else if (id == 3) {
setPressedInfo(<View>
<View style={Styles.component}>
<Text style={Styles.Text3}>Stay Home and Call a Health Care Provider</Text>
</View>
</View>)
}
}
return (
<ScrollView style={Styles.scrv} >
<View style={Styles.container} >
<TouchableOpacity onPress={() => pressHandler(1)}>
<View style={Styles.container2}>
<Image source={img5} style={Styles.Hand} />
<Text style={Styles.Text1}> 5 rules of prevention</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => pressHandler(2)}>
<View style={Styles.container2}>
<Image source={food} style={Styles.Hand} />
<Text style={Styles.Text1}>Immunity boosting</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => pressHandler(3)}>
<View style={Styles.container2}>
<Image source={sickimg} style={Styles.Hand} />
<Text style={Styles.Text1}>Feeling Sick?</Text>
</View>
</TouchableOpacity>
</View>
{Pressedinfo}
</ScrollView>
)
}

change onPress={citrusAlert()} to onPress={citrusAlert}

Button working on simulator but not in physical device

I'm trying to make use of the buttons on my app, but apparently they don't work on a physical device, I cannot press them. In the simulator it is indeed possible to press them, but not sure why not in the physical device.
This is the following code I'm using:
<ScrollView refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}>
<View style={{ padding: 20, flexDirection: 'row' }}>
<TouchableOpacity onPress={() => console.log("the button works.")}>
<View style={styles.addHomework}>
<Text style={{ color: 'white' }}>Add Homework</Text>
</View>
</TouchableOpacity>
<View style={{ paddingLeft: 3 }}>
<TouchableOpacity onPress={() => this.removeSubject()}>
<View style={styles.removeSubject}>
<Text style={{ color: 'white' }}>Remove Subject</Text>
</View>
</TouchableOpacity>
</View>
</View>

React Native Spinner Activity Indicator not working

This is Code but not working for me.
return (
<View style={styles.spinnerStyle}>
<ActivityIndicator
animating={true}
size='large'
/>
</View>
);

This styling is for showing ActivityIndicator on center of page.
<View style={{
display:"flex",
flex:1,
justifyContent:"center",
alignItems:"center"
}}>
<ActivityIndicator
animating={true}
size='large'
/>
</View>

Categories